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

发布于 2024-07-10 02:48:48 字数 642 浏览 8 评论 0原文

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

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

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

(将它们视为更大内容的一部分,其中文本区域必须从 JavaScript 生成,并且不能硬编码到页面中)。 它们都产生相同的输出,但前者被认为是“坏”的,而后者被认为是“正确”的。 (对吗?)

另一方面,如果您在页面中输入某些内容,然后刷新它,或者转到其他地方并单击“后退”,那么在前一种情况下,您在文本区域中输入的内容将被保留,而在后一种情况下丢失了。 (至少在 Firefox 上。)

有没有一种方法可以使用后一种方法,并且仍然具有有用的功能,即使用户不小心点击刷新或通过“后退”按钮返回,用户在表单中输入的内容也会被保存(至少在火狐)?

Consider two web pages with the following in their body respectively:

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

and

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

(think of them as part of something larger, where the textareas have to be generated from JavaScript and can't be hard-coded into the page). They both produce the same output, but the former is considered "bad", while the latter is considered the "right" way to do it. (Right?)

On the other hand, if you type something in the page and then either refresh it, or go somewhere else and hit Back, then in the former case, what you typed in the textarea is preserved, while in the later it is lost. (At least on Firefox.)

Is there a way to use the latter method and still have the useful feature that what the user has typed into a form is saved even if they accidentally hit refresh or come back via the Back button (at least on Firefox)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

痞味浪人 2024-07-17 02:48:48

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

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

I believe the document.write version actually blows away an existing content on the page. Ie, the body and script tags will no longer be there. That is why people usually use appendChild.

Keeping the text or not is very browser specific. I wouldn't bet that Firefox would not change it's behavior on that in a future version, either. I would suggest implementing an alert dialog when the user trys to navigate away from the page and there is unsaved content in edit fields. Usually you would do this with an unload event.

ゝ偶尔ゞ 2024-07-17 02:48:48

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

但是,如果您在页面历史记录中稍后执行 document.write() 方法(在正文完全渲染之后),那么正如 Chase 所说,它将清除现有正文并显示 document.write() 的参数。

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

document.write() won't blow away the page content as long as it is executed inline as the page is rendered. Online advertising makes extensive use of document.write() to dynamically write adverts into the page as it loads.

If however, you executed the document.write() method at a later time in the page history (after the body is completely rendered) then as Chase says, it would blow away the existing body and display the argument to document.write().

Other than that I agree that the preserving forms behaviour is really pretty browser specific, and not something you should rely on in many cases. It's a feature there to help the user rather than something for developers to be aware of or attempt to utilize.

滥情空心 2024-07-17 02:48:48

您是否可以添加一个可用于将新文本区域定位到的挂钩? 例如。 一个

;

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

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

然后,如果您需要记住内容,您可以采用 innerHTML 值来包含 HTML,或者仅采用文本区域的文本节点值来提取文本。

Would it be possible for you to add a hook which you could use to target the new textarea into? eg. a <div>

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

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

Then if you needed to remember the contents you could take either the innerHTML value to include the HTML or just the text node value of the textarea to extract the text.

锦上情书 2024-07-17 02:48:48

通常,我更喜欢创建一个 DOM 元素并将其插入 - 特别是因为我可以将其准确插入到页面中我想要的位置(即使用 object.appendChild 或 body.appendChild)。 插入是在页面加载期间还是之后也并不重要,因此我可以使用通用插入函数,并在整个页面加载期间或之后随时使用它。

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

  • 使用 document.body.appendChild(theInsertionObject) 将正确添加
    加载过程中当前点的插入,包括
    SCRIPT 标记序列,但它不会执行 javascript。

  • 如果您使用 document.write(theInsertionCode),代码将为
    插入在加载过程中的当前点,以及任何嵌入的
    SCRIPT 标记序列将在页面的其余部分之前执行
    已加载。

Normally, I prefer to create a DOM element and insert it - especially since I can insert it exactly where I want in the page (i.e. use object.appendChild or body.appendChild). It also does not matter if the insertion is during page load or later so I can use a generalized insertion function and use it any time, during or after the full page load.

However, during the load process, if you are inserting content which includes javascript (i.e. a SCRIPT type="text/javascvript"......./SCRIPT sequence), you MUST use document.write in order to have the script execute.

  • Using document.body.appendChild(theInsertionObject) will properly add
    the insertion at the current point in the load process including the
    SCRIPT tag sequence, but it will NOT execute the javascript.

  • If you use document.write(theInsertionCode), the code will be
    inserted at the current point in the load process, and any embedded
    SCRIPT tag sequence will be executed before the remainder of the page
    is loaded.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文