javascript-document.write的替代方法是什么?

在教程中,我学会了使用document.write。现在我了解到,很多人对此并不满意。 我尝试了document.write,但实际上它已将其发送到打印机。

那么我应该使用哪些替代方案,为什么不使用document.write? w3schools和MDN都使用document.write

DarkLightA asked 2019-10-09T15:32:02Z
10个解决方案
68 votes

替换HTML的原因是由于JavaScript函数无效:document.write()

它绝对是“错误的形式”。 仅当您在页面加载时使用它时,它才适用于网页。 如果在运行时使用它,它将用输入替换整个文档。 而且,如果您将其应用为严格的XHTML结构,那么它甚至不是有效的代码。


问题:

document.write()写入文档流。 在已关闭(或已加载)的文档上调用document.write()将自动调用document.write(),这将清除该文档。

-来自MDN的报价

document.write()有两个伴郎I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>。加载HTML文档时,该文档为“打开”状态。 文档加载完成后,文档已“关闭”。 此时使用I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>将删除整个(关闭的)HTML文档,并用新的(打开的)文档替换。 这意味着您的网页已擦除自身,并开始从头开始编写新页面。

我相信I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>也会导致浏览器的性能下降(如果我错了,请纠正我)。


一个例子:

此示例在页面加载后将输出写入HTML文档。 观看I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>的邪恶力量,当您按下“灭”按钮时,将清除整个文档:

I am an ordinary HTML page. 
I am innocent, and purely for informational purposes. 
Please do not 
<input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/>
 me!
<p id="output1"></p>


替代方案:

  • I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>这是一个很好的选择,但是必须将此属性附加到要放置文本的元素上。

示例:I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>

  • W3C建议使用I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>

示例:I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>

注意:已知这会导致某些性能下降(慢于I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>)。 我建议改用.innerHTML


带有I am an ordinary HTML page. I am innocent, and purely for informational purposes. Please do not <input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/> me! <p id="output1"></p>的示例:

I am an ordinary HTML page. 
I am innocent, and purely for informational purposes. 
Please do not 
<input type="button" onclick="document.getElementById('output1').innerHTML = 'There was an error exterminating this page. Please replace <code>.innerHTML</code> with <code>document.write()</code> to complete extermination.';" value="exterminate"/>
 me!
<p id="output1"></p>

God is good answered 2019-10-09T15:34:56Z
22 votes

这是应该就地替换document.write的代码:

document.write=function(s){
    var scripts = document.getElementsByTagName('script');
    var lastScript = scripts[scripts.length-1];
    lastScript.insertAdjacentHTML("beforebegin", s);
}
Adrian Kalbarczyk answered 2019-10-09T15:35:28Z
12 votes

作为document.write的推荐替代方法,您可以使用DOM操作直接查询节点并将元素添加到DOM。

Darin Dimitrov answered 2019-10-09T15:32:14Z
9 votes

只是在此处说一点便是,尽管由于性能方面的考虑(同步DOM注入和评估),人们不赞成使用document.write,但是如果您使用document.write按需注入脚本标签,也没有实际的1:1替代方案。

有很多很好的方法可以避免这样做(例如,像RequireJS这样的脚本加载器来管理您的依赖链),但是它们更具侵入性,因此最好在整个站点/应用程序中使用。

James M. Greene answered 2019-10-09T15:36:09Z
7 votes

问题取决于您实际要做什么。

通常,可以使用someElement.innerHTML或更好的document.createElementsomeElement.appendChild,而不是document.write

您还可以考虑使用类似jQuery的库并在其中使用修改功能:[http://api.jquery.com/category/manipulation/]

Wolph answered 2019-10-09T15:36:56Z
5 votes

这可能是最正确,直接的替代方法:insertAdjacentHTML。

Justin Summerlin answered 2019-10-09T15:37:27Z
3 votes

尝试使用getElementById()或getElementsByName()访问特定元素,然后使用innerHTML属性:

<html>
    <body>
        <div id="myDiv1"></div>
        <div id="myDiv2"></div>
    </body>

    <script type="text/javascript">
        var myDiv1 = document.getElementById("myDiv1");
        var myDiv2 = document.getElementById("myDiv2");

        myDiv1.innerHTML = "<b>Content of 1st DIV</b>";
        myDiv2.innerHTML = "<i>Content of second DIV element</i>";
    </script>
</html>
answered 2019-10-09T15:37:58Z
2 votes

我看不到document.write的问题。例如,如果您在onload事件触发之前正在使用它(例如,大概是从结构化数据中构建元素),则它是合适的工具。 使用body或在构建DOM后显式将节点添加到DOM没有性能优势。 我只是用一个旧脚本对它进行了三种不同的测试,该脚本曾经用于安排4个调制解调器组中24/7服务的传入调制解调器呼叫。

到完成时,此脚本将创建3000多个DOM节点,主要是表单元。 在运行Vista的Firefox上使用7年的旧PC上,使用来自本地12kb源文件的onload和三个1px GIF(可重复使用约2000次),此练习只需不到2秒。 该页面会弹出,显示完整的状态,可以处理事件。

使用onload并不是直接的替代方法,因为浏览器会关闭脚本需要保持打开状态的标签,并且最终需要花费两倍的时间来创建一个变形的页面。 将所有片段写入字符串,然后将其传递给body会花费更长的时间,但是至少您可以按设计获得页面。 其他选项(例如一次手动重新构建一个节点的DOM)太荒谬了,我什至不去。

有时需要使用onload。 它是JavaScript中最古老的方法之一,这一事实并不是要反对它,而是要支持它-它是经过高度优化的代码,可以准确地实现其意图并自诞生以来就一直在这样做。

很高兴知道还有其他可供选择的后加载方法,但是必须理解,这些方法完全旨在用于不同的目的。 即在创建DOM并为其分配内存后修改DOM。 如果您的脚本旨在编写HTML,而浏览器首先从中创建DOM,则使用这些方法本质上会占用更多资源。

只需编写它,然后让浏览器和解释器完成工作即可。 那就是他们的目的。

PS:我刚刚在body标签中使用onload参数进行了测试,即使在这一点上,文档仍然是opendocument.write()可以正常工作。 另外,最新版本的Firefox中的各种方法之间也没有明显的性能差异。 当然,硬件/软件堆栈中的某处可能会进行大量缓存,但这确实是要点-让机器完成工作。 不过,这在廉价智能手机上可能会有所作为。 干杯!

bebopalooblog answered 2019-10-09T15:39:25Z
1 votes

document.currentScript.insertAdjacentHTML('beforebegin', 'this is the document.write alternative');

[https://developer.mozilla.org/zh-CN/docs/Web/API/Document/currentScript][https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML]

Sorin answered 2019-10-09T15:40:04Z
-2 votes

我不确定这是否会正常工作,但我想到了

var docwrite = function(doc) {               
    document.write(doc);          
};

这为我解决了错误消息的问题。

Mlee answered 2019-10-09T15:40:52Z
translate from https://stackoverflow.com:/questions/4537963/what-are-alternatives-to-document-write