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

⋅配置flex与java通过BlazeDS实现通信的问题。为什么不显示BlazeDS ⋅怎么控制href中title在页面中显示的位置 ⋅为什么我正常运行代码跟我打断点以后运行的代码结果不一样呢？ (多线程ReentrantLock问题） 更多帖子 关注私信空间博客 ren2881971 本版专家分：0 结帖率 77.78%



<!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');"/>男&nbsp;

<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 不同。原理是什么？求前端大神指教？

0 2012-05-23 18:08:57

回复数 6 只看楼主引用举报楼主

weq0113 本版专家分：21: 高手现在在不在还不知啊,哎，都等了一天了

0 2012-05-23 18:15:56

只看TA 引用举报 #1 得分 0

⋅一个坑。。。 ⋅无理由，散分。 ⋅太不给力了 更多帖子 关注私信空间博客 城市研究GISer 本版专家分：55914 金牌 2012年5月总版技术专家分月排行榜第一 银牌 2012年6月总版技术专家分月排行榜第二 红花 2012年6月 Web 开发大版内专家分月排行榜第一 2012年5月 Web 开发大版内专家分月排行榜第一 黄花 2012年7月 Web 开发大版内专家分月排行榜第二

两个问题
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');"/>男&nbsp;

<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>

1 2012-05-23 19:22:48

只看TA 引用举报 #2 得分 30

weq0113 本版专家分：21: 为什么别的人的问题有人回答我的怎么没人理睬啊？

0 2012-05-23 19:25:06

只看TA 引用举报 #3 得分 0

⋅配置flex与java通过BlazeDS实现通信的问题。为什么不显示BlazeDS ⋅怎么控制href中title在页面中显示的位置 ⋅为什么我正常运行代码跟我打断点以后运行的代码结果不一样呢？ (多线程ReentrantLock问题） 更多帖子 关注私信空间博客 ren2881971 本版专家分：0: 引用 2 楼  的回复:
两个问题
1. outPrint触发的document.write 是把页面清空了之后再写的值
2. form 触发submit之后,会刷新页面.

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

HTML code

<!DOCTYPE html PUBLIC "-//W3C//D……

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

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

0 2012-05-23 20:50:44

只看TA 引用举报 #4    得分 0

⋅配置flex与java通过BlazeDS实现通信的问题。为什么不显示BlazeDS ⋅怎么控制href中title在页面中显示的位置 ⋅为什么我正常运行代码跟我打断点以后运行的代码结果不一样呢？ (多线程ReentrantLock问题） 更多帖子 关注私信空间博客 ren2881971 本版专家分：0: 引用 3 楼的回复:
为什么别的人的问题有人回答我的怎么没人理睬啊？

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

0 2012-05-23 20:51:28

只看TA 引用举报 #5 得分 0

⋅【新手求助】CentOS6编译GCC4.9.0内存不足的问题 ⋅[已答复]左侧菜单“我的空间”链接地址可以改一下了 ⋅[已处理]帖子列表缓存失效了？ 更多帖子 关注私信空间博客 乌镇程序员 本版专家分：34910 红花 2008年7月硬件使用大版内专家分月排行榜第一 黄花 2012年6月 Web 开发大版内专家分月排行榜第二 2012年5月 Web 开发大版内专家分月排行榜第二 2011年5月 PHP大版内专家分月排行榜第二 2008年9月硬件使用大版内专家分月排行榜第二 蓝花 2012年7月 Web 开发大版内专家分月排行榜第三 2011年8月 PHP大版内专家分月排行榜第三 2011年8月 Web 开发大版内专家分月排行榜第三 2011年7月 PHP大版内专家分月排行榜第三 2011年4月 Web 开发大版内专家分月排行榜第三 2008年9月 Windows专区大版内专家分月排行榜第三

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>

0 2012-05-23 22:10:31

只看TA 引用举报 #6 得分 10

document.write()在IE和chrome处理方式有什么不同？ [问题点数：40分，结帖人ren2881971]