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

时间:2015-02-11 23:07:30

标签: jquery replace document-ready

我有一个页面,所有脚本都移到底部,就在关闭'body'标签之前。 此页面可能包含一个特殊符号,必须在$(document).ready()。

上动态替换

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

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

如果脚本位于标题中,则此代码可以正常工作。

但是如果脚本移动到底部,则此代码会导致无限页面刷新 所以,问题是:是否有可能动态更新全身HTML,而无需无限刷新? 或者可能有更好的方法来动态更新html substing而不指定其父类或id?

UPD:找到更换special_symbol的更好解决方案:

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));
    });         
}

2 个答案:

答案 0 :(得分:1)

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

您的代码以文本字符串的形式抓取整个页面的HTML,然后用special_cymbol替换new_value,然后重新绘制整个页面当你更新它。矫枉过正?

无论如何,这就是发生的事情:

就像我说的那样,这一行 - $('body').html() - 将整个HTML作为文本字符串抓取。 HTML中有什么内容?你的脚本标签。因此,当您更新整个页面的HTML时,您还会重新添加标签,这些标签会被下载,解析并再次执行,这是您更新页面的javascript代码所在的位置,然后将完全相同事情一遍又一遍又一遍。

修改

不要做你正在做的事情,这太可怕了。如果您需要更新文字special_cymbol,那么每次在页面上输出文字时,请按以下步骤操作:

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

然后你可以这样做:

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

答案 1 :(得分:1)

尝试使用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>