如果 $('body').html() 动态更新，页面会无限刷新

我有一个页面，在关闭'body'标记之前，所有脚本都被移到底部。此页面可能包含一个特殊符号，该符号必须在$（document）.ready（）.上动态替换

对于这种情况，我通常使用这个简单的技巧：

$('body').html($('body').html().replace('special_symbol', 'new_value'));

如果脚本位于标头中，则此代码运行良好。

但如果将脚本移到底部，则此代码将导致无限的页面刷新
所以，问题是：是否有可能在不进行无限刷新的情况下动态更新整个HTML？或者，有没有更好的方法可以动态更新html子字符串，而不指定其父类或id？

UPD：找到了一个更好的解决方案来替换特殊符号：

replaceTextInDom('original_value', 'new_value');
...
function replaceTextInDom(original_value, new_value){   
    var reg_exp =  new RegExp(original_value, 'g');
    $('div:contains('+original_value+')').each(function(){      
        if ($(this).clone().children('div').remove().end().text().indexOf(original_value) >= 0)
            $(this).html($(this).html().replace(reg_exp, new_value));
    });         
}

这看起来可能是一个简单的技巧，但它是我见过的最丑陋的JavaScript之一。

您的代码获取页面的整个HTML作为文本字符串，然后用new_value替换special_cymbol，然后在更新时重新绘制整个页面？

不管怎样，事情是这样的：

正如我所说，这一行$('body').html()将整个HTML作为一个文本字符串。HTML中包含什么？您的脚本标记。因此，当你更新整个页面的HTML时，你也在重新添加标签，这些标签会被下载、解析并再次执行，这就是更新页面的javascript代码的所在地，然后它会一遍又一遍地做完全相同的事情。

编辑

不要做你正在做的事，这太可怕了。如果你需要更新文本special_cymbol，那么每次你在页面上输出它时，都要这样做：

<span class="special_cymbol_class">special_cymbol</span>

然后你可以这样做：

$('.special_cymbol_class').html('new_value');

尝试使用jQuery.parseHTML，将第三个参数jQuery.parseHTML( data [, context ] [, keepScripts ] )设置为false

var body = $("body");
var html = $.parseHTML(body.html(), document, false);
$(html).each(function(i, html) {
    return $(html).text(function(_, text) {
      return text.replace(/special_cymbol/, "new_value")
    })
});
body.html(html);

    var body = $("body");
    var html = $.parseHTML(body.html(), document, false);
    $(html).each(function(i, html) {
        return $(html).text(function(_, text) {
          return text.replace(/special_cymbol/, "new_value")
        })
    });
    body.html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <body>
      <script>
        console.log($.now())
      </script>
      <div>abc</div>
      <div>special_cymbol</div>
    </body>

相关内容

最新更新

热门标签：