Question

采用以下html：

<div id="somediv" style="display:none;"></div>
<script>
    document.getElementById("somediv").style.display = 'none';
</script>

somediv已被隐藏，一些javascript运行，实际上什么也没做。我需要代码在javascript中使用style.display时进行检测，无论样式是否更改。

我尝试过MutationObserver：

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        alert(mutationRecord.target.id);
    });
});
observer.observe(document.getElementById("somediv"), { attributes : true, attributeFilter : ['style'] });

以上仅在样式发生更改时触发。 无论样式是否更改，我都需要它来触发。

Answer 1

所以我确实想出了一个答案。它的工作方式是：获取每个脚本标签，将.style.display替换为您自己的函数，最后替换DOM（这是真正的把戏）：

//loop through <script> tags
$('script').each(function(){
        var scripthtml = $(this).html();
        if (scripthtml.indexOf('style.display') != -1){
            scripthtml = scripthtml.replace(/.style.display = 'none'/g, ".customdisplay('none')");
            scripthtml = scripthtml.replace(/.style.display = "none"/g, '.customdisplay("none")');
            scripthtml = scripthtml.replace(/.style.display ='none'/g, ".customdisplay('none')");
            scripthtml = scripthtml.replace(/.style.display ="none"/g, '.customdisplay("none")');
            scripthtml = scripthtml.replace(/.style.display='none'/g, ".customdisplay('none')");
            scripthtml = scripthtml.replace(/.style.display="none"/g, '.customdisplay("none")');
            $(this).replaceWith('<script>' + scripthtml + '</script>');
        }

});

现在这是我的.style.display替换功能：

HTMLElement.prototype.customdisplay = function(showhide){
    //insert whatever code you want to execute
    this.style.display = showhide;
    alert('Success!  .style.display has been detected!');
};

.replaceWith 是实际更改DOM的内容。该脚本唯一不执行的操作是无法浏览包含的javascript文件。谢谢大家的评论<3。

更新：

使用 replaceWith 添加脚本标签时，ipad / iphone / ipod将再次执行脚本标签。为了防止这种双重执行，您需要执行以下操作：

$(this).replaceWith('<script>if (1==0){' + scripthtml + '}</script>');

您的函数将有效，但该函数以外的任何内容都将不会执行。

Answer 2

我认为您没有完全意识到自己的要求，但这是我了解的最近选择的简短描述：

https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401

基本上， MutationObserver 是过去的主要改进，它与您想要的和最受现代浏览器支持的最接近。 但是所有这一切的关键在于它听取变化。

您基本上是在要求检测甚至没有变化。除了以下以外，我看不到您摆脱了这个问题：

编写包装器，以了解用于更改代码的方式，然后调用包装器而不是调用更改。简单，容易，需要重构代码中的所有调用。

覆盖进行更改的实际功能。这样可以节省您的重构，但是您在这里玩火了。在全球范围内重写一个众所周知的功能意味着您和所有从事该项目的开发人员都将永久遇到问题。

轮询-简而言之，反复调用某些元素以检查属性。它不仅检测到轮询间隔的延迟为0的变化，而且还使用资源，并且如果您要监视所有内容，则必须编写一个递归，该递归从当前DOM的顶部到每个节点依次进行检查。您将以此杀死表演。我说不清有多难，但我怀疑轮询间隔会很长，从而增加检测延迟，或者您的性能会像灰色猎鹰一样下降。

我有一个大问题要问你

是什么导致您进入需要此状态的？您基本上希望程序能够检测其何时使用其自身的特定部分（因为它是核心部分，由浏览器实现）。这听起来像是请求：嘿，无论何时更改或不更改代码中任何变量的值，我都应该能够对此做出反应。

我并不是想在这里听起来像纳金·南希（Naggin Nancy），而是鼓励您质疑导致这成为您所需要的东西的思路，并弄清楚您是否想为此花费更多时间，因为我不认为您可以轻松获得您想要的东西，我怀疑这是由于过去糟糕的设计决策所致。

Javascript检测何时使用style.display而不管样式如何更改

2 个答案: