HTML的iframe標籤妙用 - 在線執行前端代碼的網站原理是什麼？

在我本身的平常前端開發中，其實iframe標籤出現的次數並非不少。做爲一個很古老（瀏覽器兼容性很是好）的標籤，有必要去了解一下它的典型應用場景。

 

（圖片說明：全部瀏覽器都支持iframe，不管什麼版本）

 

在什麼狀況下使用iframe呢？其實iframe有不少奇技淫巧的用法，可是最重要的一個特色是：<iframe>提供了一個和瀏覽器當前窗口相隔離的沙箱環境，至關於網頁內部新開的另外一個窗口。<iframe>外部的css/javascript，不會影響到<iframe>裏面的樣式或DOM。同時，<iframe>內部的css/javascript也不會影響<iframe>外部的樣式和DOM。所以，iframe能夠用於引用站外的網頁。經常使用於CMS系統，富文本編輯器等場景。

 

咱們經常使用的在線執行前端代碼的網站，例如 http://jsfiddle.net/ , 以及新手經常使用的 http://www.w3school.com.cn/ 裏面的「親自試一試」功能，其實都是使用了<iframe>標籤來實現。接下來就以w3school來舉個例子。

 

咱們在左邊編輯頁面，點擊提交代碼以後，就能夠在右側查看到效果了。試想一下，右邊「查看結果」區域就是一個iframe，提供了一個隔離於當前網頁的環境。不然的話，咱們在左側設置了<p>標籤背景爲紅色，若是沒有iframe，那麼整個網頁上的p元素可能都會變成紅色。

 

咱們查看該網頁的源代碼其實能夠看出這個頁面的工做原理。我去掉了一些多餘的代碼和html標籤，最核心的部分以下：

執行的流程以下：

1. 用戶點擊了提交按鈕，執行submitTryIt函數

2. 在submitTryIt函數中，先獲取到編輯html區域（即用戶本身編輯的區域）的值，並賦值給隱藏的中轉區域

3. submitTryIt中執行表單提交操做（即submit函數），將隱藏的中轉區域裏面的內容（即用戶本身編輯的區域內容）傳到了後臺接口v.asp

4. 表單提交到v.asp這個連接以後，返回了什麼呢？其實，並無作任何處理，原封不動的返回了。以下圖：

5. 這個時候你必定奇怪，原封不動返回的內容，爲何會在「查看結果」區域（即iframe裏面）執行出效果來？重點來了，請注意<form>標籤上有個屬性target="i"，而<iframe>標籤上也有一個屬性叫作name="i"，他們兩個屬性都叫作字母「i」，可不是做者瞎寫的。這個的意思是說，將form表單提交，返回的結果提交到以target的值爲name的窗口中。關於form表單的target值，能夠參考這裏：http://www.w3school.com.cn/tags/att_form_target.asp 。這就解釋了爲何返回的內容能夠在iframe裏面展現出來了。因爲iframe的隔離性，你無論提交什麼代碼，都只能影響到iframe裏面的區域，不會影響到頁面上其餘部分。

 

本文的最後，順便提一個問題，既然iframe有這麼好的隔離性，若是我真的要和iframe裏面的內容作通訊或其餘交互，應該怎麼辦呢？有興趣的話你們調研一下吧～postmessage