關於Javascript與iframe的那些事兒

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

復制代碼 代碼如下:
<iframe id="testiframe" name="testiframe" src="childhtml" scrolling="no" frameborder=""></iframe>
<script>
windowonload = function () {
  /*
   *  下面兩種獲取節點內容的方式都可以
   *  由於 IE IE 不支持 contentDocument 屬性所以此處用了通用的
   *  windowframes["iframe Name"] or windowframes[index]
   */
  var d = windowframes["testiframe"]document;
  dgetElementsByTagName(h)[]innerHTML = pp;
  alert(dgetElementsByTagName(h)[]firstChilddata);
}
</script>

　　
注在請務必通過 windowonload 方法訪問 iframe 中的節點否則浏覽器會提示錯誤拒絕訪問在 IE Firefox Opera 下在DOMReady 時也可以訪問 iframe 中的節點
子頁面讀寫操作父頁面

復制代碼 代碼如下:
<script>
  parentdocumentgetElementsByTagName(h)[]innerHTML = pp;
  alert(parentdocumentgetElementsByTagName(h)[]firstChilddata);
</script>

　　
小結
• 測試通過 IE IE IE Firefox Firefox Firefox Chrome Opera Safari
• 查閱資料得出 documentgetElementById(‘id name)contentDocument 全等於 windowframes["iframe Name"]document
• 跨子域時需要在父頁面和子頁面 JS 中分別加上 documentdomain = xxxcom;
跨域操作 iframe 裡內容
當兩個網頁所在域不同時要實現數據的互相調用只能通過 JS 改變 location 對象的 hash 屬性的值來做到互相通信
父頁面

復制代碼 代碼如下:
<iframe id="testiframe" src="" scrolling="no" frameborder=""></iframe>
<input type="button" value="send" onclick="sendRequest()" />
<script>
function sendRequest() {
  documentgetElementById(testiframe)src += #a;
}
var interval = windowsetInterval(function(){
  if(locationhash) {
    alert(locationhash);
    windowclearInterval(interval);
  }
});
</script>

　　
子頁面

復制代碼 代碼如下:
<h>RRRRRR</h>
<script>
var url = ;
    oldHash = selflocationhash
    newHash
    interval = windowsetInterval(function(){
        newHash = selflocationhash;
        if(oldHash != selflocationhash) {
        documentgetElementsByTagName(h)[]innerHTML = pp;
        //alert(parentlocationhref); //去掉這個注釋浏覽器會提示無權限
        parentlocationhref = url + #b;
          windowclearInterval(interval);
        }
    });
</script>

　　
小結
• 經測試 IE IE IE Firefox Firefox Firefox Chrome Opera Safari 除 IE IE 外只要改變hash 就會記錄在浏覽器 history 中
• 我有試圖在子頁面用 parentlocationreplace 的方法來避免父頁面向服務器發送請求而進行跳轉這樣理論上浏覽器就不會記錄歷史但未能奏效
• 子頁面無權讀取父頁面的 url 但可以對父頁面的 url 進行寫操作所以跨域操作時要提前得知父頁面的url
由於前端解決跨域問題的局限性比較大所以最好用服務器端解決方案

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20053.html