關於我和document.write那點不得不說的事

時間 2019-11-16

標籤關於 document.write document write 那點不得不說简体版

原文原文鏈接

一直用document.write()方法向瀏覽器中顯示數據用，把它當作Alert()使用，看來這樣用有些大材小用了，下面說說它的主要用處。 javascript

document.write()方法能夠用在兩個方面：html

1.頁面載入過程當中，用腳本加入新的頁面內容。java

2.用延時腳本建立本窗口或新窗口的內容。瀏覽器

該方法須要一個字符串參數，它是寫到窗口或框架中的HTML內容。這些字符串參數能夠是變量或值爲字符串的表達式，寫入的內容經常包括HTML標記語言。以下面代碼，教務系統框架載入子頁框架

 1 <!--將框架放入單元格中-->
 2 <span style="font-size:18px;">                    
 3     <td class="index-table-middle-center" valign="top" id="content-container">  
 4         <div id="loading">  
 5             //加載效果圖標  
 6             <img src="images/loading.gif" alt="loading" border="0" />  
 7         </div>  
 8         <script type="text/javascript">  
 9             //調用JS的OutputIFrame函數，造成框架  
10             Index.OutputIframe();  
11         </script>  
12     </td>
13 </span>

1 <span style="font-size:18px;">//輸出框架  
2     Index.OutputIframe = function () {  
3         var scrolling = $.isIE6 == true ? 'yes' : 'auto';  
4         document.write('<iframe id="content" width="100%" height="100%" class="hide" marginwidth="0" marginheight="0" frameborder="0" scrolling="' + scrolling + '" onload="$(\'#loading\').hide();$(this).show();" src=""></iframe>');  
5     };
6 </span>

在載入頁面後，瀏覽器輸出流自動關閉。在此以後，任何一個對當前頁面進行操做的document.write()方法將打開—個新的輸出流，它將清除當前頁面內容(包括源文檔的任何變量或值)。所以，假如但願用腳本生成的HTML替換當前頁面，就必須把HTML內容鏈接起來賦給一個變量，使用一個document.write()方法完成寫操做。ide

關於document.write()方法還有一點要說明的是它的相關方法document.close()。腳本向窗口(無論是本窗口或其餘窗口)寫完內容後，必須關閉輸出流。在延時腳本的最後一個document.write()方法後面，必須確保含有document.close()方法，不這樣作就不能顯示圖像和表單。而且，任何後面調用的document.write()方法只會把內容追加到頁面後，而不會清除現有內容來寫入新值。函數

爲了演示document.write()方法，咱們提供了同一個應用程序的兩個版本。一個向包含腳本的文檔中寫內容，另—個向—個單獨的窗口寫內容。

示例1建立一個按鈕，它爲文檔組合新的HTML內容，包括新文檔標題的HTML標記和標記的顏色屬性。this

示例中有一個讀者所不熟悉的操做符+＝，它把其右側的字符串加到其左側的變量中，這個變量用來存放字符串，這個操做符能很方便地把幾個單獨的語句組合成—個長字符串。使用組合在newContent變量中的內容document.write()語句能夠把全部新內容寫到文檔中，徹底清除示例1中的內容。 spa

而後須要調用document.close()語句關閉輸出流。當載入該文檔並單擊按鈕時，能夠注意到瀏覽器標題欄中的文檔標題所以而改變。當回到原始文檔並再次單擊該按鈕時，能夠看到動態寫入的第二個頁面的載入速度甚至比重載原始文檔還要快。

示例1 在當前窗口使用document.write()。code

 1 <html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Same Doc</title>  
 2   
 3 <script language="JavaScript">  
 4   //從新寫入函數  
 5   function RepeatWrite(){  
 6     // 保存寫入的內容  
 7     var newContent = "<html><head><title>A New Doc</title></head>"  
 8     newContent += "<body bgcolor='aqua'><h1>This document is brand new.</h1>"  
 9     newContent += "Click the Back button to see original document."  
10     newContent += "</body></html>"  
11     // 寫入新的內容  
12     document.write(newContent);  
13     document.close();  
14   }  
15     
16 </script>  
17 </head>  
18 <body>  
19   <form>  
20     <!--單擊按鈕調用寫入函數-->  
21     <input type="button" value="Replace Content" onClick="RepeatWrite()">  
22   </form>  
23 </body>  
24 </html>

示例2中，狀況有點複雜，由於腳本建立了一個子窗口，整個腳本生成的文檔都將寫入該窗口中。爲了使新窗口的引用在兩個函數中保持激活狀態，咱們將newWindow變量聲明爲全局變量。

頁面載入時，onLoad事件處理調用makeNewWindow()函數，該函數生成一個空的子窗口。另外，咱們在window.open()方法的第三個參數中加入一個屬性，使子窗口的狀態欄可見。

頁面上的按鈕調用subWrite()方法，它執行的第一個任務是檢查子窗口的closed屬性。假如關閉了引用窗口，該屬性（只在較新的瀏覽器版本中存在）返回true。若是是這種狀況（假如用戶手動關閉窗口），該函數再次調用makeNewWindow()函數來從新打開那個窗口。

窗口打開後，新的內容做爲字符串變量組合在一塊兒。與示例1同樣，一次性寫入內容（雖然對單獨的窗口沒有必要），接下來調用close()方法。可是注意一個重要的區別：write() 和 close()方法都明顯地指定了子窗口。

 1 <html xmlns="http://www.w3.org/1999/xhtml"><title>Writing to Subwindow</title>  
 2 <script language="JavaScript">  
 3   //生命一個全局變量  
 4   var newWindow;  
 5   //打開一個新的窗口  
 6   function makeNewWindow(){  
 7     newWindow = window.open("","","status,height=200,width=300")  
 8   }  
 9   //判斷新窗口是否關閉，若是關閉從新打開  
10   function subWrite(){  
11     // make new window if someone has closed it  
12     if(newWindow.closed){  
13       makeNewWindow()  
14     }  
15     // 是新窗口得到焦點  
16     newWindow.focus()  
17     //保存寫入內容  
18     var newContent = "<html><head><title>A New Doc</title></head>"  
19     newContent += "<body bgcolor='coral'><h1>This document is brand new.</h1>"  
20     newContent += "</body></html>"  
21     // 將HTML代碼寫入新窗口中  
22     newWindow.document.write(newContent)  
23     newWindow.document.close()    // close layout stream  
24   }  
25 </script>  
26 </head>  
27   
28 <body onLoad="makeNewWindow()">  
29   <form>  
30     <input type="button" value="Write to Subwindow" onClick="subWrite()">  
31   </form>  
32 </body>  
33 </html>

總結:

　　最近在寫一個靜態資源加載器, 其中有用到document.write, 在經歷過一翻折騰後, 發現document.write仍是有點內容的,因此決定折騰點東西記錄下,同時也算是給本身積累點東西.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。