Question

当我在Chrome（第2版）中运行它时，它不会返回字符串，但它可以在Firefox（第3版）中运行。这是为什么？

<html>
<head>
<script type="text/javascript">
function disp_prompt() {
    var name=prompt("Please enter your name","Harry Potter");
    if (name!=null && name!="") {
        document.write("Hello " + name + "! How are you today?");
    }
}
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body>
</html>

Answer 1

要将内容附加到文档，您只应在＆lt; script＆gt; -block解析阶段调用document.write()。

如果在某个地方（例如在事件处理程序中）执行了document.write的调用，则无法进行解析，因此该字符串'foo'无处可去。 / p>

根据original JavaScript reference应该发生的事情是：

事件处理程序在原始文档关闭后执行，因此如果您没有在事件处理程序中显式发出document.open方法，则write方法会隐式打开mimeType text / html的新文档。

也就是说，它假设你犯了一个错误并打算这样做：

document.open('text/html');
document.write(html);

用新内容替换整个文档。您还会注意到，因为您没有通过致电：

完成此操作

document.close();

...在Firefox中，“加载”悸动仍然是动画，期望有更多内容写入文档（但它永远不会出现）。

在这种情况下，您document.write()字符串：

Hello bobince! How are you today?

显然不是有效的HTML文档。 Chrome（和Safari，其行为相同）试图将其解析为HTML文档，但由于它是文档元素（＆lt; html＆gt;）之外的非空白文本内容而失败，这是不允许的。如果在名称输入中添加了一些标记：

Hello <em>bobince</em>! How are you today?

你会看到＆lt; em＆gt;之外的所有内容元素被丢弃。 Firefox和IE设法将他们的“修复任何元素之外的文本”破坏HTML规则以保存您，但Chrome不会。

如果您想要document.write()新文档，则应确保它确实是一份完整的文档：

<html><head><title>Greetings</title><body><p>Hello bobince! How are you today?</p></body></html>

或者，如果你想document.write()一个文本字符串，理论上你应该调用：

document.open('text/plain');

在write（）之前

。但请注意，Chrome或Safari不支持mimetype参数;他们总是将你写的内容视为HTML。

无论如何，您可能不想使用此方法。如果要添加（或更改）现有页面，通常应使用DOM方法，例如在状态输出div上设置文本，或使用innerHTML替换正文内容。

在一些地方需要

document.write()（特别是当你从头开始创建一个新的窗口或框架时），但是否则它通常是错误的，应该被怀疑地看待。

Answer 2

不要使用document.write。如果你改成

if (name != null && name != "") {
    document.getElementById('foo').innerHTML = "Hello " + name + "! How are you today?";
}

<body>
<input ...

<div id='foo'> </div>
</body>

document.write有很奇怪的行为。您希望将文本写入哪里？

Answer 3

只需在写入调用中添加一些段落标记：

<html>
<head>
<script type="text/javascript">

function disp_prompt() {
    var name = window.prompt("Please enter your name", "Harry Potter");
    if (name) {
        window.document.write("<p>Hello " + name + "! How are you today?<\/p>");
    }
}
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body>
</html>

Answer 4

参加聚会有点晚，但我在 Chrome DevTools 中看到了与 document.write() 相关的违规行为，并附有链接。毋庸置疑，这是一本有趣的书。

这是关于什么的？

从 Chrome v55 开始，Chrome 将在极少数情况下开始阻止 document.write()。你可以在这里阅读：

https://developers.google.com/web/updates/2016/08/removing-document-write

这应该仅对使用 2G 蜂窝网络连接的用户生效，可能还有其他类型的连接速度较慢的用户。以下是相关文章的摘录：

<块引用>

考虑到这些数据，Chrome 从 55 版开始介入当我们通过以下方式检测到这种已知不良模式时代表所有用户更改在 Chrome 中处理 document.write() 的方式（请参阅 Chrome 地位）。特别是 Chrome 不会执行元素当满足以下所有条件时，通过 document.write() 注入遇见：

用户的连接速度很慢，特别是当用户使用 2G 时。（将来，更改可能会扩展到其他用户慢速连接，例如慢速 3G 或慢速 WiFi。）
document.write() 位于顶级文档中。干预不适用于 iframe 中的 document.written 脚本，因为它们不要阻止主页面的呈现。
document.write() 中的脚本是解析器阻塞的。具有“async”或“defer”属性的脚本仍将执行。
脚本不在同一站点上托管。换句话说，Chrome 不会干预具有匹配 eTLD+1 的脚本（例如脚本托管在 js.example.org 上，插入到 www.example.org）。
该脚本尚未在浏览器 HTTP 缓存中。缓存中的脚本不会导致网络延迟并且仍会执行。
页面请求不是重新加载。如果用户触发重新加载，Chrome 将不会干预，并将执行页面正常。

第三方片段有时使用 document.write() 来加载脚本。幸运的是，大多数第三方提供异步加载替代方案，允许第三方脚本加载而不阻塞页面上其余内容的显示。

因此，如果您的 document.write() 满足所有 6 个条件，Chrome 就会阻止它。当它发生时，您应该能够在 DevTools 中看到该消息。

OP 的问题

要解决 OP 的问题，要使用 document.write()，您必须先使用 document.open("text/html")。完成写入文档后，您需要使用 document.close()。如果您只想编写纯文本，请使用 document.open("text/plain")。但是，我最近在某处读到 Chrome 忽略了 mimetype 并强制使用 text/html。

<html>
<head>
<script type="text/javascript">
function disp_prompt() {
    var name=prompt("Please enter your name","Harry Potter");
    if (name!=null && name!="") {
        document.open("text/plain");
        document.write("Hello " + name + "! How are you today?");
        document.close();
    }
}
</script>
</head>
<body>

<input type="button" onclick="disp_prompt()" value="Display a prompt box" />

</body>
</html>

--或--

您可以修改您编写的文本以包含正确的 HTML，如下所示：

document.write('<html><head></head><body>Hello ' + name + '! How are you today?</body></html>');

在所有情况下都不要忘记添加 document.open() 和 document.close()。

为什么chrome不运行这个javascript

4 个答案: