1

我目前正在尝试更改此 Google-tasks 小工具的样式元素：

https://mail.google.com/tasks/ig

使用 chrome 内容脚本。

在此示例中，我将删除底部的工具栏。因为谷歌正在使用 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”。但他们都没有工作。

我如何获得该元素？

4

1 回答 1

1

在这种情况下，您只需确保将此样式规则应用于适当的 iframe，而不必担心何时加载：

#:1.ft {display: none !important;}

(^_^)
但是，对于带有src="javascript: ....

在更一般的情况下。如果该节点（或其包含的 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);
        }
    }
}


然而：

Google 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);
}
于 2012-08-25T02:34:50.260 回答