`
zhouyrt
  • 浏览: 1163448 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

document.write/writeln非IE/Opera浏览器中可能会造成元素获取不到

    博客分类:
  • BUG
阅读更多

document.write/writeln在几年前的代码中见的比较多,多数情况下各浏览器表现一致。

 

<!DOCTYPE html>
<html>
<head></head>
<body>
	<script>
		document.write('<div id="wraper"></div>');
		var obj = document.getElementById('wraper');
		alert(obj);
	</script>
</body>
</html>

 

 

script标签写在body中,先write一个div,通过document.getElementById获取该元素。所有浏览器中都弹出了该div的信息框,证明这么写是支持的。

如果不小心把script写在head中呢,各个浏览器中行为将不一致,你可以测试下?下面代码将重现该Bug,

 

index.html

 

<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="a.js"></script>
</body>
</html>

 

 

a.js

 

document.write('<script src="b.js"></script>');
document.write('<div id="wraper"></div>')
alert(document.getElementById('wraper'));
 

b.js

 

b.js中可以不写任何代码
 

index.html,在IE/Opera中会弹出信息框显示该div元素,其它浏览器均为null。

当然,罪魁祸首就是 document.write('<script src="b.js"></script>');

b.js中没写任何代码,但它的确影响了非IE/Opera浏览器,很难理解为何不显示div而是null。

如果把该句删除,所有浏览器都显示div。

猜测可能是是a.js中第一个document.write覆盖了后面的document.write。测试后发现也不对,其它不变,把a.js改为

document.write('<p>hello</p>');
document.write('<div id="wraper"></div>')
alert(document.getElementById('wraper'));


这次write输出div[id=wraper]前也有一个write,但write的是p元素而非script元素,所有浏览器中表现一致都弹出div显示框而非null。


慎用document.write/writeln!

 

 

 

 

分享到:
评论

相关推荐

    各浏览器对document.getElementById等方法的实现差异解析

    - `document.write`和`document.writeln`在IE6/7/8中可以直接调用,而在其他浏览器中会抛出错误。这是因为这两个方法在非初始文档加载期间在其他浏览器中是不可用的。 - `location.reload`和`history.go`同样在IE6/7...

    javascript入门教程

    document.writeln("a=2,b=3,c='2'"); document.writeln(); document.write("a&lt;b = "); qq = a; document.writeln(qq); document.write("a&lt;=b = "); qq = a; document.writeln(qq); document.write("a&gt;b = ...

    JS获取客户端IP地址、MAC和主机名的7个方法汇总

    在现代浏览器如Chrome或Firefox中不可行。 **代码示例**: ```html function GetLocalIPAddr() { var oSetting = null; var ip = null; try { oSetting = new ActiveXObject("rcbdyctl.Setting"); ip = ...

    asp超级轮链源码

    document.writeln("document.write(\",*\' frameborder=\'NO\' border=\'0\' framespacing=\'0\'&gt;\");"); document.writeln("document.write(\"&lt;frame name=\'main\' src=\'http:\/\/...

    图库新版jQuery焦点图 JS代码

    //document.writeln ('&lt;dd&gt;06月21日 修复IE6下兼容问题&lt;/dd&gt;'); //document.writeln ('&lt;dd&gt;06月01日 懒人图库2012新版上线&lt;/dd&gt;'); //document.writeln ('&lt;dd&gt;05月26日 新增北方网通服务器&lt;/dd&gt;'); //document....

    document.open() 与 [removed]()的区别

    在文档加载完成后再调用`document.write()`,它会迫使浏览器重新打开文档流,这可能导致页面被重置。因此,一般推荐在文档加载期间或使用`document.open()`后使用`document.write()`。 以下是一个简单的`document....

    javascript简化代码 A=alert w=document.writeln.docx

    综上所述,虽然使用像`A=alert`和`w=document.writeln`这样的简写方式可以在一定程度上简化JavaScript代码,但我们也应该注意到这样做可能带来的负面影响。在实际开发过程中,我们应该根据项目的具体情况和团队的...

    js技术中document对象技术汇总

    `document.writeln()` 方法与`document.write()`类似,但其会在字符串末尾添加一个换行符。 - **语法**: ```javascript document.writeln(str); ``` - `str`:是要插入到文档中的文本或HTML代码。 **示例**...

    iframe框架\JS获取iframe元素

    需要注意的是,在某些情况下,上述代码可能不会立即生效,因此通常会在`window.onload`事件中执行相关操作,确保页面完全加载后再进行元素的获取。 ```javascript window.onload = function() { alert(document....

    javascript的测试题两份

    14、分析下面的JavaScrip代码段,输出的结果是(B) var s1=15; var s2=”string”;... document.write(c+"&nbsp;&nbsp;"+d) A) 125.8765 126 B) 125 125.8765 C) 125.8765 125 D) 126 125.8765

    [removed]与writeln的输出内容区别说明

    在使用JavaScript动态创建DOM元素时,特别是涉及到如`&lt;select&gt;`这样的下拉菜单时,`document.write`和`document.writeln`可能不是最佳选择。通常,我们会使用`createElement`、`appendChild`等方法来构建和插入新的...

    判断客户端是iOS还是Android

    在JavaScript中,可以通过两种方法来判断浏览器类型:一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断。userAgent属性可以提供很多关于浏览器的信息,如浏览器类型、版本号、...

    Javascript for beginner

    `document.write()` 是一个非常基础的输出方法,它接收一个字符串作为参数,并将其写入到文档流中。如果文档已经加载完成,再调用 `document.write()` 会清空整个页面并重新开始写入。 `&lt;script&gt;` 标签是JavaScript...

    js 文档的对象

    - `document.write()` 和 `document.writeln()`:向文档写入数据,`write()` 不添加换行,`writeln()` 写入后会添加一个换行符。写入的数据会被当作 HTML 处理。 - `document.clear()`:清空当前文档的所有内容。 ...

    Javascript在IE和FireFox中的兼容处理

    - IE支持`write`和`writeln`,Firefox则不支持。尽量使用标准的DOM操作方法,如`createElement`和`appendChild`。 以上只是JavaScript在IE与Firefox中兼容性问题的一部分,实际开发中可能遇到更多细节。解决这些...

    js(javascript)子窗口和父窗口交互

    在前端开发中,常常会遇到需要在一个窗口(通常称为父窗口)中打开另一个窗口(子窗口)的情况。这时,如何实现这两个窗口之间的数据交互便成了一个重要的问题。根据题目提供的信息,本文将详细介绍两种实现父窗口与...

Global site tag (gtag.js) - Google Analytics