document.write()在IE和chrome处理方式有什么不同？
<!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>
如果不用断点只是运行的话 就会看到自动刷新的效果。
小弟想问下同样的document.write() 语句 为什么在IE和chrome 不同。 原理是什么？ 求前端大神指教？
[解决办法]
两个问题
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>
[解决办法]
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>