Question

我有一个奇怪的问题。我尝试编写一个GreaseMonkey脚本，以便在Firefox和Google Chrome中运行。使用Chrome，我尝试了2个扩展程序：＆＃34; TamperMonkey＆＃34;和＃34;空白画布脚本处理程序＆＃34;，主要是因为我的脚本会定期检查外部网站上的新版本，这被视为跨站脚本，而不是Chrome中的授权。

为了向您展示我的问题，我写了一个简单的测试用例：

// ==UserScript==
// @name        test
// @namespace       http://fgs.ericc-dream.fr.nf
// @description     test gm script
// @include         http://gaia.fallengalaxy.eu/
// @author          ericc
// @version         0.0.1
// ==/UserScript==

/* We attach an event listener to the body tag and trigger the function
 * 'message' each time that an element is inserted in the page */
var el = document.body;
el.addEventListener('DOMNodeInserted', message, false);

var extraFlag = false;

function message(event) {
    /* first we capture the id of the new inserted element
     * (the one who created the event) */
    var objId = event.target.id;

    /* add an event listener on the map container */
    if (objId == "extra") {
        el = document.getElementById('extra');
        el.addEventListener('DOMSubtreeModified',readTest,false);
        GM_log(el.style.display);
    }
}

function readTest() {
    el = document.getElementById('extra');
    GM_log(extraFlag);
    GM_log(el.style.display);
    if ((el.style.display != 'none') && (!extraFlag)) {
        alert('extra');
        extraFlag = true;
    } else if ((el.style.display == 'none')) {
        extraFlag = false;
    }
}

div元素＆＃39;额外＆＃39;由页面修改。问题是Chrome无法读取el.style.display的值，因此extraFlag永远不会变为“错误”。再次。我使用这个标志来避免多次运行代码，该网站是由JavaScript驱动的这段代码在Firefox中很好用！

我尝试使用Google进行搜索，但无法找到正确的答案。似乎很容易改变显示的价值，但似乎我是唯一一个试图阅读它的人！

我写这段代码因为＆＃34; DOMAttrModified＆＃34; Chrome中不支持:-(

提前感谢您的帮助

ericc

2 个答案:

答案 0 :(得分：3)

答案 1 :(得分：1)

Answer 1

我很难准确理解您的问题是什么，但看起来Chrome可以正常阅读.style.display属性。我只是将以下代码放入HTML模板并将其加载到Chrome 10中：

<div id="div1">
</div>

<div id="div2" style="display: block;">
</div>

<div id="div3" style="display: inline;">
</div>

<div id="div4" style="display: none;">
</div>

<script type="text/javascript">
    alert(document.getElementById("div1").style.display);
    alert(document.getElementById("div2").style.display);
    alert(document.getElementById("div3").style.display);
    alert(document.getElementById("div4").style.display);

    document.getElementById("div1").style.display = "none";

    alert(document.getElementById("div1").style.display);
</script>

代码生成5个“警报”框，输出如下：

块
内联
无
无

所以看来Chome读这个属性就好了。

也许问题是你运行你的greasemonkey脚本的网页在Chrome中的表现与Firefox不同？可能是元素的ID不同，或者元素是从DOM中删除而不是隐藏？如果你用一些更多的支票来修改你的功能会发生什么呢？

function readTest() {
    el = document.getElementById('extra');
    if(el)
    {
        GM_log(extraFlag);
        GM_log(el.style.display);
        if (el.style.display && (el.style.display != 'none') && (!extraFlag)) {
            alert('extra');
            extraFlag = true;
        } else if ((el.style.display == 'none') || !el.style.display) {
            extraFlag = false;
        }
    }
    else
    {
        GM_log(extraFlag);
        GM_log("element not present");
        extraFlag = false;
    }
}

这有帮助吗？如果没有，还有其他原因你可以想到为什么el.style.display无法在Chrome中正确评估？

如果我们更了解您尝试使用脚本执行的操作，以及可能尝试运行此操作的网页或代码，则可能会有所帮助。

Answer 2

经过几个小时和大量的测试用例，我终于找到了一个可以接受的解释（但还没有解决方案！）

让我们解释一下这个场景：
1°）用户点击屏幕上的图标
2°）通过删除其显示属性（.style.display =“”），可以看到页面中已存在的div＃extra 3°）div＃extra由AJAX函数提交，其中包含一些元素，具体取决于用户点击的图标（在某些情况下超过200个元素）
4°）用户点击另一个图标关闭div 5°）div＃extra中的所有元素都被删除了 6°）div＃extra被显示属性隐藏为'none'（.style.display =“none”）

首先，在Firefox上，我在div＃extra上使用了“ DOMAttrModified ”事件来检查显示属性何时被修改并做出相应的反应。问题，Chrome不支持此活动！

所以我用“ DOMSubtreeModified ”（附加到div＃extra）替换它，这两个浏览器都支持....但不完全相同： - （
在Firefox上，会为子树中的每个修改触发一个事件，但也会在元素本身被修改时触发在Chrome上，它们更加严格，并且仅在子树中进行修改时触发事件....这是我的问题！

在Firefox中，第一个事件在第2点（在场景中）触发，最后在第6点触发，允许我的函数在div＃extra被隐藏时读取

在Chrome中，第一个事件在第3点触发，最后一个在第5点触发...所以当div＃extra被隐藏时，我的函数没有被调用，我无法修改标志！ CQFD

现在，或者我将在页面主体上添加一个事件监听器，以便在显示属性被修改时进行拦截，但它会产生很多对我的函数的调用，或者TamperMonkey的开发人员昨天说他的扩展现在支持“ DOMAttrModified ”（在Chrome上）....

非常感谢您花时间了解我的问题和您提出的解决方案

ericc

Chrome无法读取style.display值

2 个答案: