我目前正在尝试更改此Google任务小工具的样式元素:
https://mail.google.com/tasks/ig
使用chrome内容脚本。
在这个例子中,我正在删除底部的工具栏。因为Google使用javascript生成HTML,并将其放在iframe中。我需要使用这段代码:
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById(':1.ft').style.display = 'none'
从开发人员控制台运行此代码时,它会隐藏工具栏。但它不能用作内容脚本。
我认为这是因为代码在页面准备好之前运行。所以我尝试使用事件监听器:
document.addEventListener("DOMContentLoaded", function () {
document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById(':1.ft').style.display = 'none'
}, false);
但这也不起作用。还尝试了事件监听器'domready'和'load'。但他们都没有工作。
我如何获得该元素?
答案 0 :(得分:1)
在这种情况下,您可以确保将此样式规则应用于相应的iframe,而不必担心何时加载:
#:1.ft {display: none !important;}
(^_^)
但是,对于src="javascript: ...
的iframe来说,这可能无法实现。
在更一般的情况下。如果该节点(或其包含的iframe)由AJAX加载,那么在“domready”甚至“加载”之后很久就会出现这种情况。
经过验证的解决方案是轮询元素:
var waitForElementIntrvl = setInterval (checkForElement, 333);
function checkForElement () {
var firstIframe = document.querySelector ("iframe");
if (firstIframe) {
var targElement = firstIframe.contentWindow.document.getElementById (':1.ft');
if (targElement) {
targElement.style.display = 'none';
clearInterval (waitForElementIntrvl);
}
}
}
谷歌Chrome内容脚本仍然不适合使用iframed DOM。因此,为了使代码有效,必须将其注入目标页面。最终的内容脚本代码变为:
function userscriptMain () {
var waitForElementIntrvl = setInterval (checkForElement, 333);
function checkForElement () {
var firstIframe = document.querySelector ("iframe");
if (firstIframe) {
var targElement = firstIframe.contentWindow.document.getElementById (':1.ft');
if (targElement) {
targElement.style.display = 'none';
clearInterval (waitForElementIntrvl);
}
}
}
}
addJS_Node (null, null, userscriptMain);
function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
var D = document;
var scriptNode = D.createElement ('script');
if (runOnLoad) {
scriptNode.addEventListener ("load", runOnLoad, false);
}
scriptNode.type = "text/javascript";
if (text) scriptNode.textContent = text;
if (s_URL) scriptNode.src = s_URL;
if (funcToRun) scriptNode.textContent = '(' + funcToRun.toString() + ')()';
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
targ.appendChild (scriptNode);
}