關於Javascript與iframe的那些事兒_javascript技巧

嵌入 iframe 的頁面，父頁面與子頁面均可以很輕鬆的在同域或跨子域的情況下進行讀寫操作；在完全不同域的情況下，也可以透過更改 hash 的方式進行通信。下面我在九個不同（版本的）瀏覽器中對此進行資料傳輸與變更的兼容性測試。
同域或跨子域讀寫操作iframe 裡的內容
父頁讀寫操作子頁：

複製程式碼 程式碼如下:

<script><BR>window.onload = function () {<BR>  /*<BR>   *  以下兩種取得節點內容的方式都可以。 <BR>   *  由於IE6, IE7 不支援contentDocument 屬性，所以此處使用了通用的<BR>   *  window.frames["iframe Name"] or window.frames[index]<BR> = window.frames["test-iframe"].document;<BR>  d.getElementsByTagName('h1')[0].innerHTML = 'pp';<BR>  alert(d.getElementsByTagName('h1')[0 ].firstChild.data);<BR>}<BR></script>

註：在請務必透過window.onload 方法存取iframe 中的節點，否則瀏覽器會提示錯誤-拒絕存取。在 IE8, Firefox3.6, Opera11 下在DOMReady 時也可以存取 iframe 中的節點。
子頁讀寫操作父頁：

複製程式碼複製程式碼

程式碼🎜>
<script><BR>  parent.document.getElementsByTagName('h1')[0].innerHTML = 'pp';<BR>  alert(parent.document.getElementsByTagName('h1')[0]. firstChild.data);<BR></script>

小結：
•1 測試通過IE6, IE7, IE8, Firefox2. 0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
•2 查閱資料得出document.getElementById('id name').contentDocument 全等於window.frames["iframe Name"].document.
•3 跨子網域時，需要在父頁和子頁JS 分別加上document.domain = 'xxx.com';
跨網域操作iframe 裡內容
當兩個網頁所在域不同時,要實現數據的相互調用，只能透過JS 改變location 物件的hash 屬性的值來做到互相通信。
父親頁：

複製程式碼

代碼如下:

代碼如下:



代碼如下:

<script><BR>function sendRequest() {<BR>  document.getElementById('test-iframe').src = '#a'; <BR>}<BR>var interval = window.setInterval(function(){<BR>  if(location.hash) {</script>

    alert(location.hash);
  >  }},1000);

子頁：

複製程式碼


程式碼如下:

RRRRRR

<script><BR>var url = 'http://www. xxx.com/father.html';</script>

    oldHash = self.location.hash,    newHash,    interval = window.setInterval(function(>   🎜>        if(oldHash != self.location.hash) {        document.getElementsByTagName('h1')[0].in   document.getElementsByTagName('h1')[0].inino; ); / /去掉這個註釋，瀏覽器會提示無權限        parent.location.href = url '#b';         00);
小結：
•1 經測試IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari11, 6 , IE7 外只要改變hash 就會記錄在瀏覽器history 中。
•2 我有試圖在子頁面用 parent.location.replace 的方法來避免父頁面向伺服器發送請求而進行跳轉，這樣理論上瀏覽器就不會記錄歷史，但未能奏效。
•2 子頁無權讀取父頁的url, 但可以對父頁的url 進行寫入操作，所以跨域操作時，要提前得知父頁的url
由於前端解決跨域問題的限制比較大，所以最好用伺服器端解決方案