I can usually figure this stuff out on my own but I'm completely lost on this one. I'm using a module for my MagicMirror called WebView to embed a website onto my mirror. It uses javascript, heres the base code
const WEBVIEW_ID = 'mmm-webview';
Module.register('MMM-WebView', {
defaults: {
url: 'https://www.google.com/',
height: '640px',
width: '480px',
autoRefresh: false,
autoRefreshInterval: 10 * 60 * 1000,
loadedJS: undefined,
},
start: function () {
if (this.config.autoRefresh) {
setInterval(() => {
//Electron.session.defaultSession.clearCache(() => {});
//this.updateDom();
const webview = document.getElementById(WEBVIEW_ID);
webview.reloadIgnoringCache();
}, this.config.autoRefreshInterval);
}
},
getDom: function () {
let wrapper = document.createElement('div');
wrapper.id = 'mmm-webview-wrapper';
wrapper.innerHTML = `<webview id="${WEBVIEW_ID}" style="width: ${this.config.width}; height: ${this.config.height};" src="${this.config.url}"></webview>`;
return wrapper;
},
notificationReceived: function (notification, payload, sender) {
if (notification == 'MODULE_DOM_CREATED') {
if (this.config.loadedJS && this.config.loadedJS.length > 0) {
const webview = document.getElementById(WEBVIEW_ID);
if (webview) {
webview.addEventListener('did-finish-load', () => {
webview.executeJavaScript(this.config.loadedJS);
});
} else {
// TODO: Show Error
}
}
}
},
});
I'm trying to remove HTML div elements by ID from the webpage that im embedding when the site loads up but I just cant quite figure out how to remove elements with javascript within a 'iFrame' I guess you would call it. Any help would be appreciated!
I've tried using document.getElementById(WEBVIEW_ID).remove(); and a few other things including jQuery in the wrapper.HTML section and haven't been able to get it working. I feel like I'm close I just don't know how to implement it into the code correctly.