代码之家 › 专栏 › 技术社区 › ShreevatsaR

document.write()与插入DOM节点:保留表单信息?

usability firefox javascript

6

ShreevatsaR · 技术社区 · 17 年前

考虑两个网页,其正文分别包含以下内容:

<body>
<script>
document.writeln('<textarea></textarea>')
</script>
</body>

和

<body>
<script>
var t = document.createElement('textarea');
document.body.appendChild(t);
</script>
</body>

(将它们视为更大事物的一部分,其中文本区域有由JavaScript生成,不能硬编码到页面中)。它们都产生了相同的输出,但前者被认为是“坏”的,而后者被认为是实现这一目标的“正确”方式。(对吗?)

另一方面,如果你在页面中键入内容,然后刷新它,或者去其他地方点击“上一步”,那么在前一种情况下,你在文本区域中键入的内容会被保留,而在后一种情况中,它会丢失。(至少在Firefox上。)

是否有一种方法可以使用后一种方法,并且仍然具有有用的功能,即即使用户意外点击刷新或通过后退按钮返回(至少在Firefox上),用户在表单中键入的内容也会被保存?

4 回复 | 直到 17 年前

1

5

Chase Seibert 17 年前

我相信document.write版本实际上破坏了页面上的现有内容。也就是说,body和script标签将不再存在。这就是为什么人们通常使用appendChild。

是否保留文本取决于浏览器。我也不敢打赌Firefox在未来的版本中不会改变它的行为。我建议在用户试图离开页面并且编辑字段中有未保存的内容时,实现一个警报对话框。通常,您会通过卸载事件来完成此操作。

2

4

Andy Hume 17 年前

document.write()只要在页面呈现时内联执行,就不会破坏页面内容。在线广告广泛使用document.write()在页面加载时动态地将广告写入页面。

但是,如果您在页面历史记录的稍后时间(在正文完全呈现后)执行document.write()方法,那么正如Chase所说,它将吹走现有正文并显示document.writes()的参数。

除此之外,我同意保存表单的行为确实非常特定于浏览器,在许多情况下你不应该依赖它。这是一个帮助用户的功能,而不是供开发人员了解或尝试使用的功能。

3

0

roborourke 17 年前

您是否可以添加一个钩子,用于将新的文本区域定位到其中?例如a<div>

<div id="addtextarea"></div>

var e = document.getElementByID('addtextarea');
e.innerHTML = '<textarea></textarea>';

然后,如果你需要记住内容,你可以使用innerHTML值来包含HTML,或者只使用textarea的文本节点值来提取文本。

4

0

DrDave 14 年前

通常,我更喜欢创建一个DOM元素并插入它——尤其是因为我可以将它插入到页面中我想要的位置(即使用object.apendChild或body.appendChild)。插入是在页面加载期间还是以后也没关系,所以我可以使用通用的插入函数,并在整个页面加载期间或之后的任何时候使用它。

但是,在加载过程中,如果要插入包含javascript的内容(即SCRIPT type=“text/javascvript”……/SCRIPT序列),则必须使用document.write才能执行脚本。

使用document.body.appendChild(插入对象)将正确添加在加载过程中的当前点插入,包括 SCRIPT标记序列,但它不会执行javascript。
如果你使用document.write(插入代码),代码将是在加载过程的当前点插入,以及任何嵌入 SCRIPT标签序列将在页面其余部分之前执行已加载。