当DOM动态更新时,为什么html源不会改变 [英] Why would html source not change when the DOM is updated dynamically

查看:90
本文介绍了当DOM动态更新时,为什么html源不会改变的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我之前提过一个问题,并且对答案感到非常满意。

I had posted one question earlier jQuery inconsistency in setting readonly attribute in IE-8 and FF-3.5.8 and was quite happy with the answer.

但是我确实注意到,如果您动态地更新(任何??)DOM元素,然后查看源(使用浏览器的视图源),我发现更新的DOM元素属性保留其较旧的值(更新前)。但是,如果您使用Firebug / IE Developer工具栏,它将显示更新的DOM

But I did notice that if you update (any??) DOM elements dynamically, then view source (using browser's view source) I find the the updated DOM element attribute retains its older value(before update). However, if you use Firebug/IE Developer toolbar, it displays the updated DOM

示例: http://gutfullofbeer.net/readonly.html

FF3.5-查看页面来源:

FF3.5-View page Source:

<html>
  <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
    <script>
      $(function() {
        $('input.readonly').attr('readonly', true);//set input with CSS class readonly to readonly
      });
    </script>
  </head>
  <body>
    <input type='text' class='readonly' maxlength='20' value='Blort'>This one is read-only<br>
    <input type='text' maxlength='20' value='Fish'>This one is not read-only<br>

  </body>
</html>

这里第一个文本框设置为只读在jQuery的 document.ready 方法。用浏览器查看源代码会给出一个像

Here the first text box is set to readonly in jQuery's document.ready method. Viewing the source with browser would give a markup like

<input type='text' class='readonly' maxlength='20' value='Blort'>

,Firebug会给出类似

and Firebug will give something like

<input type="text" value="Blort" maxlength="20" class="readonly" readonly=""> 

IE8开发人员工具栏:

IE8 Developer toolbar:

< input class =readonlytype =textmaxLength =20readOnly =readonlyvalue =Blort/>

所以我猜测浏览器(IE8 / FF3.5)在DOM事件启动之前就会生成HTML源代码(在我的例子中是jQuery的 document.ready()

So my guess is that the browser (IE8/FF3.5) generates the html source much earlier before DOM events kick in (in my case it is jQuery's document.ready() )

有人可以告诉我现场发生的事情吗?

Can someone tell me whats happening behind the scene ?

推荐答案

视图源是下载到浏览器的源。内存中发生的事情不会在源代码中更新。

The view source is the source downloaded to the browser. What happens in memory doesn't get updated in the source.

这篇关于当DOM动态更新时,为什么html源不会改变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆