js獲取iframe和父級之間元素，方法、屬，獲取iframe的高度自適應iframe高度

武文博KevinLM發表於2018-04-14
JS

1、在父頁面 獲取iframe子頁面的元素

（在同域的情況下 且在http://下測試，且最好在iframe onload載入完畢後 dosomething...）

js寫法

a、同過contentWindow獲取

也有用contentDocument 獲取的 但是contentWindow 相容各個瀏覽器，可取得子視窗的 window 物件。
contentDocument Firefox 支援，> ie8 的ie支援。可取得子視窗的 document 物件。

獲取方法

[html] view plain copy
  1. var frameWin=document.getElementById('iframe').contentWindow;    //window物件  
  2. var frameDoc=document.getElementById('iframeId').contentWindow.document  //document物件  
  3. var frameBody=document.getElementById('iframeId').contentWindow.document.body   //body物件  

還有iframe.contentDocument 方法 //但是ie 6,7不支援



b、通過frames[]陣列獲取

(但是必須在ifram框架載入完畢後獲取，iframe1是iframe的name屬性)

[html] view plain copy
  1. document.getElementById('iframId').onload=function(){  
  2.     var html= window.frames["name屬性"].document.getElementById('iframe中的元素的id').innerHTML;  
  3.     alert(html)  
  4. }  
  5.  如果要獲取iframe中的iframe  
  6. document.getElementById('iframId').onload=function(){  
  7.     var html= window.frames["name屬性"].frames["name屬性"].document.getElementById('iframe中的元素的id').innerHTML;  
  8.     alert(html)  
  9. }  

jq寫法：必須在iframe載入完畢以後才有效

[html] view plain copy
  1. a、$("#iframe的ID").contents().find("#iframe中的控制元件ID").click();//jquery 方法1 必須在iframe載入完後才有效  
  2. b、$("#iframe中的控制元件ID",document.frames("frame的name").document)//方法2 <span style="font-family: Arial, Helvetica, sans-serif;">必須在iframe載入完後才有效</span>  


=================================

2、在iframe中獲取父級頁面的id元素 

（在同域的情況下且在http://下測試，最好是 iframe記載完畢再dosomething）

js寫法：

獲取父級中的objid

[html] view plain copy
  1. var obj=window.parent.document.getElementById('objId')  
window.top 方法可以獲取父級的父級的....最頂層的元素物件

jq寫法：

[html] view plain copy
  1. $('#父級視窗的objId', window.parent.document).css('height':'height);  // window可省略不寫  
  2. 或者  
  3. $(window.parent.document).find("#objId").css('height':'height);   // window可省略不寫  
===================================

3、父級窗體訪問iframe中的屬性  

(經測試，在ie中最好用原生的onload事件，如果用jq的load把iframe載入完畢 有時候方法呼叫不到 多重新整理才有效果）

[html] view plain copy
  1. a、 用contentWindow方法   
  2. document.getElementById('iframe1').onload=function(){  
  3.          this.contentWindow.run();  
  4.  }  
  5. b、用iframes[]框架集陣列方法  
  6. document.getElementById('iframe1').onload=function(){  
  7.          frames["iframe1"].run();  
  8. }  

===================================

4、在iframe中訪問父級窗體的方法和屬性 //window 可以不寫

[html] view plain copy
  1. window.parent.attributeName;  // 訪問屬性attributeName是在父級視窗的屬性名  
  2. window.parent.Func();  // 訪問屬性Func()是在父級視窗的方法  

5、讓iframe自適應高度

[html] view plain copy
  1. $('#iframeId').load(function() { //方法1  
  2.     var iframeHeight = Math.min(iframe.contentWindow.window.document.documentElement.scrollHeight, iframe.contentWindow.window.document.body.scrollHeight);  
  3.     var h=$(this).contents().height();  
  4.     $(this).height(h+'px');   
  5. });  
  6.   
  7. $('#iframeId').load(function() { //方法2  
  8.     var iframeHeight=$(this).contents().height();  
  9.     $(this).height(iframeHeight+'px');   
  10. });  

6、iframe的onload的事件，

主流瀏覽器都支援 iframe.onload=function....
在ie下需要用attachEvent繫結事件

7、在iframe所引入的網址寫入防釣魚程式碼

if(window!=window.top){
window.top.location.href=window.location.href;
}

8、獲取iframe的高度

iframe.contentWindow.document.body.offsetHeight;

轉自：https://blog.csdn.net/kongjiea/article/details/38870399

相關文章