document.writeln

本文探讨了使用document.writeln时遇到的问题,即为何只输出第一个选项,并提供了解决方案:通过在一个新窗口中写入所有选项来避免内容被覆盖。此外,还介绍了在document.write中正确输出<script>标签的方法。
(1)document.writeln问题
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
for (i=0;i<x.length;i++)
{

document.write(x.options[i].text)
document.write("<br />")

}
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()"
value="Output all options">
</form>
</body>
</html>
[color=red]Q:为什么只显示Apple?能在自画面上四个一起出现吗[/color]

[color=red]A: if(i=0)document.writeln调用与文档中的其他HTML元素使用的不是同一个document,自动打开一个新的document对象进行写入,从而覆盖初始窗口中的内容,但是新的窗口中没有 for (i=0;i<x.length;i++)
{

document.write(x.options[i].text)
document.write("<br />")

}代码,无法再次打开一个新的document对象进行写入,也就是说,一个窗口只能自动打开一个新的document,不可以是多个,从这个例子可以看出
[/color]
(2)这样做能全部出现
<html>
<head>
<script type="text/javascript">
function getOptions()
{
var x=document.getElementById("mySelect");
var iwin = window.open("", "_blank");
for (i=0;i<x.length;i++)
{

iwin.document.write(x.options[i].text)
iwin.document.write("<br />")

}
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
<br /><br />
<input type="button" onclick="getOptions()"
value="Output all options">
</form>
</body>
</html>

另外还有小的知识点,当在document.writeln中要输入</script>时候注意:
document.write("<scr"+"ipt src=add.jsp></scr"+"ipt>");
[color=red] 该段确认ing
eval("<scri" + "pt src=add.jsp></scri" + "pt>");


使用 document.write 输出 HTML 标签(尤其是 <script> 标签)的时候,需要将闭合标签进行转义,否则浏览器在匹配闭合标签时发生错误。这样写是没问题的:

document.write('<\/script>');
document.write('<\/body>');
document.write('<\/html>');


如果你的 document.write 是在一个 .js 文件中,则不需要这样做。

document.write("<script src=http://...><\/script>");
// 加上转义符就搞定了
[/color]

document.writeln("<div align=\"right\" id=\"so\"> <a href=\"http:\/\/www.amazon.cn\/channel\/book.asp?source=35655109\" target=\"_blank\">网易<\/a><\/div>")
javascript: document.writeln("<!doctype html>"); document.writeln("<html>"); document.writeln(""); document.writeln("<head>"); document.writeln(" <meta charset=\'utf-8\'>"); document.writeln(" <meta http-equiv=\'X-UA-Compatible\' content=\'IE=edge\'>"); document.writeln(" <meta name=\'viewport\' content=\'initial-scale=1.0, user-scalable=no, width=device-width\'>"); document.writeln(" <title>设置地图显示要素</title>"); document.writeln(" <link rel=\'stylesheet\' href=\'https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css\' />"); document.writeln(" <style>"); document.writeln(" html,"); document.writeln(" body,"); document.writeln(" #container {"); document.writeln(" width: 100%;"); document.writeln(" height: 100%;"); document.writeln(" }"); document.writeln(""); document.writeln(" #map-features .input-item {"); document.writeln(" height: 2rem;"); document.writeln(" }"); document.writeln(" </style>"); document.writeln("</head>"); document.writeln(""); document.writeln("<body>"); document.writeln(" <div id=\'container\'></div>"); document.writeln(" <div class=\'input-card\' style=\'width:19rem\'>"); document.writeln(" <h4>设置地图显示要素(Features)</h4>"); document.writeln(" <div id=\'map-features\'>"); document.writeln(" <div class=\'input-item\'>"); document.writeln(" <input type=\'checkbox\' name=\'mapStyle\' value=\'bg\' checked>"); document.writeln(" <span class=\'input-text\'>区域面(bg)</span>"); document.writeln(" </div>"); document.writeln(" <div class=\'input-item\'>"); document.writeln(" <input type=\'checkbox\' name=\'mapStyle\' value=\'road\' checked>"); document.writeln(" <span class=\'input-text\'>道路(road)</span>"); document.writeln(" </div>"); document.writeln(" <div class=\'input-item\'>"); document.writeln(" <input type=\'checkbox\' name=\'mapStyle\' value=\'building\' checked>"); document.writeln(" <span class=\'input-text\'>建筑物(building)<
最新发布
08-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值