全面理解document.write()

Airy 發布于2019-08-01 16:09 / 2756人閱讀

摘要：標準定義和用法文檔節點的方法用于寫入文檔內容，可以傳多個參數，寫入的字符串會按解析。在異步引入的和或事件的回調函數中運行，運行完后，最好手動關閉文檔寫入。寫入的標簽中的內容會正常運行。

W3C 標準

WHATWG: write()

定義和用法

文檔節點的write()方法用于寫入文檔內容，可以傳多個參數，寫入的字符串會按HTML解析。

語法：document.write()

參數：字符串，可以傳多個字符串參數

返回值：undefined

注意事項

如果document.write()在DOMContentLoaded或load事件的回調函數中，當文檔加載完成，
則會先清空文檔（自動調用document.open()），再把參數寫入body內容的開頭。

在異步引入的js和DOMContentLoaded或load事件的回調函數中運行document.write()，
運行完后，最好手動關閉文檔寫入（document.close()）。

示例代碼

在head中運行document.write()，則參數寫在body內容的開頭。



    


    write()




    


    test
    write()

在body中運行document.write()，則參數寫在運行的script標簽后面



    
    content




    
    test
    content

同步引用外部js，參數也是寫在運行的script標簽后面

// syncWrite.js
document.write("test
");

content

test

content

異步引用外部js，必須先運行document.open()清空文檔，然后才能運行document.write()，參數寫在body內容的開頭。
如果不先運行document.open()，直接運行document.write()，則無效且Chrome有如下提示：

// asyncWrite.js
document.open();
document.write("test");
document.close();

test

如果document.write()在DOMContentLoaded或load事件的回調函數中，則不管是在head中，body中，同步的js中，異步的js中，
都會先清空文檔（自動調用document.open()），然后運行document.write()，參數寫在body內容的開頭

test

document.write()也能寫入含有script標簽的字符串，但是需要轉義。寫入的script標簽中的內容會正常運行。


");



");


test

document.write()可以傳入多個參數。

multiArgument

test

參考資料

https://segmentfault.com/a/11...

http://web.jobbole.com/83288/

https://developer.mozilla.org...

GPU云服務器云服務器 document.write 全面理解全面分析全面變革

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50326.html

全面理解document.write()

摘要：標準定義和用法文檔節點的方法用于寫入文檔內容，可以傳多個參數，寫入的字符串會按解析。在異步引入的和或事件的回調函數中運行，運行完后，最好手動關閉文檔寫入。寫入的標簽中的內容會正常運行。 W3C 標準 WHATWG: write() 定義和用法文檔節點的write()方法用于寫入文檔內容，可以傳多個參數，寫入的字符串會按HTML解析。語法：document.write() 參數：字...

imingyu 2019-08-21 11:26 評論0 收藏0
為什么要避免使用 "document.write()"

摘要：每當解析器遇到腳本時，它必須停止并執行它，然后才能繼續解析。如果腳本動態地注入另一個腳本，解析器將被迫等待更長時間才能下載資源，這可能會導致一個或多個網絡往返并延遲首次渲染頁面的時間，導致頁面無法加載或花費的時間長于用戶放棄。本文是技術圈 google 瀏覽器前端新特性播報的推送，歡迎大家加入為什么要避免使用 document.write() 最近我們發現如果我們在頁面中使用了d...

xiangzhihong 2019-08-26 11:26 評論0 收藏0
一步步搭建物聯網系統——無處不在的Javascript

摘要：于是我們需要在的同一文件夾下創建一個文件，在里面寫著同時我們的還需要告訴我們的瀏覽器代碼在哪里從數學出發讓我們回到第一章講述的小明的問題，從實際問題下手編程，更容易學會編程。無處不在的Javascript Javascript現在已經無處不在了，也許你正打開的某個網站，他便可能是node.js+json+javascript+mustache.js完成的，雖然你還沒理解上面那些是什...

tylin 2019-08-22 10:55 評論0 收藏0
如何優雅高效地插入百度廣告

摘要：什么是百度廣告最近跟百度廣告打了會交道，如果您正在或者即將和百度廣告打交道，那太好了，本文一定會讓您不虛此行。插入到新聞信息流將百度廣告插入到新聞信息流，這是很普遍的做法。總結對于百度廣告在不同環境中的投放，有不同的處理方式。什么是百度廣告最近跟百度廣告打了會交道，如果您正在或者即將和百度廣告打交道，那太好了，本文一定會讓您不虛此行。百度廣告，即百度聯盟廣告，在這里進行注冊后，...

ISherry 2019-08-19 18:09 評論0 收藏0
JavaScript構造器理解

摘要：類類的概念應該是面向對象語言的一個特色，但是并不像，等高級語言那樣擁有正式的類，而是多數通過構造器以及原型方式來仿造實現。因此，出現了構造函數方式，它的關鍵在于構造器概念的引入。于是，這就產生了構造函數原型法的類構造方法。類 Class 類的概念應該是面向對象語言的一個特色，但是JavaScript并不像Java，C++等高級語言那樣擁有正式的類，而是多數通過構造器以及原型方式...

PiscesYE 2019-08-21 10:30 評論0 收藏0