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 作业
写回复
用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
  • 打赏
  • 举报
回复
高手现在在不在还不知啊,哎,都等了一天了

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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