javascript - document.write 的惊人行为

Question

在我的页面上，我正在使用 document.write 编写一个外部 JS 和一个 iframe，如下所示

document.write("<sc" + "ript src=\"http://d2hzts1b0z7hqh.cloudfront.net/arb.js\"></script>");
document.write("<iframe id='mytestframe'></iframe>");
document.close();
var frame = document.getElementById("mytestframe");
console.log(frame);

最后一个console.log 语句打印的frame 值为'null'。但是如果我注释掉第一行 document.write("<sc" + "ript src=\"http://d2hzts1b0z7hqh.cloudfront.net/arb.js\"></sc" + "ript>");日志语句打印一个节点实例。

谁能解释一下这种令人惊讶的行为背后的原因。

您可以使用 JSFiddle here .

Answer 1

您调用 getElementById 的时间过早，请延迟它直到加载事件发生，或者将其放在调用 document.write 的元素下方的不同脚本元素中。

以下对我来说效果很好:

document.write('Hello World');
document.write('<script src="http://d2hzts1b0z7hqh.cloudfront.net/arb.js"><\/script>');
document.write('<iframe id="mytestframe"><\/iframe>');
document.close();

// Delay looking for iframe until page is loaded
window.onload = function() {
  var frame = document.getElementById("mytestframe");
  console.log(frame);
};

请注意，您需要在脚本元素内的所有结束标记中引用“/”，因此 <\/在所有这些上(例如 <\/iframe> )，而不仅仅是 <\/script> .