document.write()在IE和chrome处理方式有什么不同？

ren2881971 2012-05-23 06:08:57



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Javascript控制页面布局</title>

<script language="javascript">

function checkSex( stype){



	if(stype=="man"){

     document.getElementById("man").style.display="block";

     document.getElementById("miss").style.display="none";

		}

	if(stype=="miss"){

      document.getElementById("man").style.display="none";

      document.getElementById("miss").style.display="block";

		}

}

function confrimForm(){

	return confirm("是否确认提交数据？点【确定】提交，点【取消】放弃");

}

function getResult(){

	var sex1=document.getElementById("sex1").checked;

	var sex2=document.getElementById("sex2").checked;

	var yourmoney=document.getElementById("yourmoney").value;

	var yoursmoke=document.getElementById("yoursmoke").value;

	var yourdrink=document.getElementById("yourdrink").value;

	var yourbeautiful=document.getElementById("yourbeautiful").value;

	var yourbuy=document.getElementById("yourbuy").value;

	var result=0;

	if(sex1==true){

     result=yourmoney-yoursmoke-yourdrink;

		}

	if(sex2==true){

		result=yourmoney-yourbeautiful-yourbuy;

		}

	return result;

}

function outPrint( name,age,monkey,result){

    var str="您好"+name+"<br>"+"您现在"+age+"岁<br>您的月收入为"+monkey+"<br>"+

    "根据计算您的月结余为:"+result+"<br>谢谢";

    document.write(str);

    

}

function mainClick(){

	var confirm=confrimForm();

	if(confirm==true){

      var yourname=document.getElementById("yourname").value;

      var yourage=document.getElementById("yourage").value;

      var yourmonkey=document.getElementById("yourmoney").value;

      var yourresult=getResult();

      outPrint(yourname,yourage,yourmonkey,yourresult);

		}

}

</script>

</head>

<body>

<form name="form1">

性别：

<input type="radio" id="sex1" name="sex" value="先生" onclick="checkSex('man');"/>男 

<input type="radio" id="sex2" name="sex" value="女士" onclick="checkSex('miss');"/>女<br>

姓名：<br>

<input type="text" id="yourname" name="yourname" /><br/>

年龄:<br>

<input type="text" id="yourage" name="yourage" /><br/>

收入：<br>

<input type="text" id="yourmoney" name="yourmoney"/><br/>

<div id="man" style="display:none">

月抽烟花费：<br>

<input type="text" id="yoursmoke" name="yoursmoke"/><br/>

月喝酒花费：<br>

<input type="text" id="yourdrink" name="yourdrink" /><br/>

</div>

<div id="miss" style="display: none">

 月美容花费：<br/>

 <input type="text" id="yourbeautiful" name="yourbeautiful"/><br/>

 月购物花费：<br/>

 <input type="text" id="yourbuy" name="yourbuy"/><br/>

 </div>

<input type="submit" value="提交" onclick="mainClick();"/>

 <input type="reset" value="重填" /> 

</form>

<div id="info"></div>

</body>

</html>

以上的代码在IE会执行document.write() 在页面上显示文本内容。
但是Chrome：如果用断点测试的时候会显示文本内容。但会自动刷新页面使文本内容消失。
如果不用断点只是运行的话就会看到自动刷新的效果。
小弟想问下同样的document.write() 语句为什么在IE和chrome 不同。原理是什么？求前端大神指教？

...全文

602 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

乌镇程序员 2012-05-23

打赏
举报

DOM树加载完毕后再使用document.write()方法会创建新的文档并向文档流中输出内容。不过各浏览器的具体实现是不同的，比如下面的代码，除IE以外的浏览器都会执行alert('DEMO');这行代码，但IE很明显是创建了一个新的文档（查看源代码会发现源代码变成了write()方法输出的'DEMO'）。

如果你只是要输出错误信息，建议使用alert()弹出对话框，或者使用DOM方法更新文档内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function() {

	document.write('DEMO');

	alert('DEMO');

}

</script>

</head>



<body>

</body>

</html>

ren2881971 2012-05-23

打赏
举报

[Quote=引用 3 楼的回复:]

为什么别的人的问题有人回答我的怎么没人理睬啊？
[/Quote]

哈哈兄弟你什么问题啊？可以说来一起解决嘛。

ren2881971 2012-05-23

打赏
举报

[Quote=引用 2 楼的回复:]

两个问题
1. outPrint触发的document.write 是把页面清空了之后再写的值
2. form 触发submit之后,会刷新页面.

解决
把 document.write 改成 innerHTML 来显示
type="submit" 换成 type="button"

HTML code

<!DOCTYPE html PUBLIC "-//W3C//D……
[/Quote]

哈哈应该是form 中点击submit 刷新页面的事。

但是这位兄台你知道为什么在IE上就可以显示呢？

weq0113 2012-05-23

打赏
举报

为什么别的人的问题有人回答我的怎么没人理睬啊？

001007009 2012-05-23

打赏
举报

两个问题
1. outPrint触发的document.write 是把页面清空了之后再写的值
2. form 触发submit之后,会刷新页面.

解决
把 document.write 改成 innerHTML 来显示
type="submit" 换成 type="button"



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<title>Javascript控制页面布局</title>

<script language="javascript">

function checkSex( stype){



    if(stype=="man"){

     document.getElementById("man").style.display="block";

     document.getElementById("miss").style.display="none";

        }

    if(stype=="miss"){

      document.getElementById("man").style.display="none";

      document.getElementById("miss").style.display="block";

        }

}

function confrimForm(){

    return confirm("是否确认提交数据？点【确定】提交，点【取消】放弃");

}

function getResult(){

    var sex1=document.getElementById("sex1").checked;

    var sex2=document.getElementById("sex2").checked;

    var yourmoney=document.getElementById("yourmoney").value;

    var yoursmoke=document.getElementById("yoursmoke").value;

    var yourdrink=document.getElementById("yourdrink").value;

    var yourbeautiful=document.getElementById("yourbeautiful").value;

    var yourbuy=document.getElementById("yourbuy").value;

    var result=0;

    if(sex1==true){

     result=yourmoney-yoursmoke-yourdrink;

        }

    if(sex2==true){

        result=yourmoney-yourbeautiful-yourbuy;

        }

    return result;

}

function outPrint( name,age,monkey,result){

    var str="您好"+name+"<br>"+"您现在"+age+"岁<br>您的月收入为"+monkey+"<br>"+

    "根据计算您的月结余为:"+result+"<br>谢谢";

   // document.write(str);

    document.getElementById('info').innerHTML = str;

    document.getElementById('form').style.display = 'none'

}

function mainClick(){

    var confirm=confrimForm();

    if(confirm==true){

      var yourname=document.getElementById("yourname").value;

      var yourage=document.getElementById("yourage").value;

      var yourmonkey=document.getElementById("yourmoney").value;

      var yourresult=getResult();

      outPrint(yourname,yourage,yourmonkey,yourresult);

        }

}

</script>

</head>

<body>



<form name="form1" id="form">

性别：

<input type="radio" id="sex1" name="sex" value="先生" onclick="checkSex('man');"/>男 

<input type="radio" id="sex2" name="sex" value="女士" onclick="checkSex('miss');"/>女<br>

姓名：<br>

<input type="text" id="yourname" name="yourname" /><br/>

年龄:<br>

<input type="text" id="yourage" name="yourage" /><br/>

收入：<br>

<input type="text" id="yourmoney" name="yourmoney"/><br/>

<div id="man" style="display:none">

月抽烟花费：<br>

<input type="text" id="yoursmoke" name="yoursmoke"/><br/>

月喝酒花费：<br>

<input type="text" id="yourdrink" name="yourdrink" /><br/>

</div>

<div id="miss" style="display: none">

 月美容花费：<br/>

 <input type="text" id="yourbeautiful" name="yourbeautiful"/><br/>

 月购物花费：<br/>

 <input type="text" id="yourbuy" name="yourbuy"/><br/>

 </div>

<input type="button" value="提交" onclick="mainClick();"/>

 <input type="reset" value="重填" /> 

</form>

<div id="info"></div>

</body>

</html>

weq0113 2012-05-23

打赏
举报

高手现在在不在还不知啊,哎，都等了一天了

原文地址：document.write的用处! document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器

document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲染新的页面。 --（重写页面问题！

最近遇到一个document.write("<script type='text/javascript' src='test.js'></script>")在ie浏览器不生效的问题，可用document.createElement("script");解决 var s = document.createElement("script"); s.type = "text/javascript"; s.src = "test.js"; document.getElemen

简介将输出流写入到网页的能力就是document.write，还有open() close() writeln()。方法都是接受一个字符串参数，即要写入到输出流中的文本。wirte原样写入，writeln在字符串末尾添加换行符。页面被加载过程中，可以使用这两个方法向页面中动态添加内容。用法...

可能很多朋友都遇到过这样的情况，那就是使用document.write()函数向网页中写内容的时候，会把文档中的原来的内容给清空，这一点对于初学者来说算是一个困扰，下面就介绍一下为什么会出现这种情况，当然也就知道如何避免此种情况的发生了。　　先看一段代码实例: <!DOCTYPE html> <html> <head> <met...

JavaScript

87,997

社区成员

224,709

社区内容

发帖

与我相关
我的任务
分享

确定

社区描述
Web 开发 JavaScript

社区管理员

加入社区

获取链接或二维码

近7日
近30日
至今

加载中
查看更多榜单
社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章