javascript如何操作iframe簡單介紹

admin發表於2017-02-11
JavaScript
iframe現在依然有著大量的引用，非常的變數，有時候我們需要再父視窗或者子視窗進行相互的元素操作，不過和在同一視窗中的相互操作有所區別，下面就簡單介紹一下它們是如何相互訪問和操作其中的元素的。

一.同域之間的訪問:

下面是父視窗和子視窗中的靜態程式碼結構:

[HTML] 純文字檢視 複製程式碼
<body>
<div>螞蟻部落</div>
<iframe src="lianxi.html" id="theframe" name="theframe"></iframe>
</body>

以上是父視窗中的靜態程式碼結構。

[HTML] 純文字檢視 複製程式碼
<body>
<div>
<ul>
  <li>螞蟻部落</li>
  <li>只有奮鬥才有未來</li>
  <li>太陽出來</li>
</ul>
</div>
</body>

以上程式碼是子視窗中的靜態結構。

1.父視窗訪問子視窗中的內容:

由於IE8以下瀏覽器不支援contentDocument屬性，所以可以使用以下全相容的方式:

[JavaScript] 純文字檢視 複製程式碼
window.frames["frameName"].document;//使用ifame的name屬性值。
window.frames["frameIndex"].document;//使用當前iframe的索引值。

看一段例項程式碼:

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){
  var childrend=window.frames["theframe"].document;
  var len=childrend.getElementsByTagName("li").length;
  alert(len);
}

以上程式碼可以彈出子視窗中li元素的數量。

特別說明:請務必將程式碼包裹在window.onlaod=function(){}中。

2.子視窗訪問父視窗的內容:

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){
  var len;
  parent.document.getElementsByTagName("div");
  len=parent.document.getElementsByTagName("div").length;
  alert(len);
}

以上程式碼可以彈出父視窗div元素的數量。

如果是跨子域訪問需要分別在子頁面和父頁面中加上以下程式碼:

[JavaScript] 純文字檢視 複製程式碼
document.domain = "test.softwhy.com"

二.跨域操作iframe:

當兩個處於不同域名之下的網頁進行資料呼叫的話，需要通過js改變location物件的hash屬性值來實現。

父頁面:

[HTML] 純文字檢視 複製程式碼
<iframe id="test-iframe" src="http://www.yyy.com/child.html"></iframe>
<input type="button" value="send" />
<script type="text/javascript">
function sendRequest() {
  document.getElementById('test-iframe').src += '#a';
}
var interval = window.setInterval(function(){
  if(location.hash) {
    alert(location.hash);
    window.clearInterval(interval);
  }
},1000);
</script>

子頁面:

[HTML] 純文字檢視 複製程式碼
<script type="text/javascript">
var url = 'http://www.xxx.com/father.html';
    oldHash = self.location.hash,
    newHash,
    interval = window.setInterval(function(){
        newHash = self.location.hash;
        if(oldHash != self.location.hash) {
        document.getElementsByTagName('h1')[0].innerHTML = 'pp';
        //alert(parent.location.href); //去掉這個註釋，瀏覽器會提示無許可權
        parent.location.href = url + '#b';
          window.clearInterval(interval);
        }
    },500);
</script>

總結:

1.除IE6, IE7外只要改變hash 就會記錄在瀏覽器history中。

2.子頁面無權讀取父頁面的url, 但可以對父頁面的url進行寫操作，所以跨域操作時，要提前得知父頁面的url。

相關文章