html中子界面與父界面相互操作或傳值


一、在使用iframe的頁面,要操作這個iframe里面的DOM元素可以用:

contentWindow、contentDocument(測試的時候chrom瀏覽器,要在服務器環境下)

  contentWindow:非W3C標准,雖然不是標准的一部分,但各個主流瀏覽器都支持;  返回 frame/iframe 生成的 window 對象。可直接操作子界面中的方法與變量

  子界面:

//子界面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>子頁面</title>
</head>
<body>
<input type=button value="調用父頁面中的parentSay()函數" onclick="callParent()">//點擊按鈕執行函數
<script type="text/javascript">
    var ss = 5;//子界面中的變量
    function childSay()
    {
        alert("我是子頁面的say方法");
    }
    function callParent() {
        parent.parentSay();//執行父界面中的函數
    }
</script>
</body>
</html>

  父界面:

//父界面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>父頁面</title>
</head>
<body>
<input type=button value="調用子頁面中的函數childSay函數" onclick="callChild()">//點擊按鈕執行函數
<iframe id="myFrame" src="four.html"></iframe>
<script type="text/javascript">
    function parentSay() {
        alert("我是父頁面中的方法");
    }

    function callChild() {
        var child = document.getElementById("myFrame").contentWindow;//獲取id為myFrame的iframe的對象
        child.childSay();//執行子界面中的函數
        alert(child.ss);//獲取子界面的變量自己用
    }
</script>
</body>
</html>

1.先獲取iframe里面的window對象,再通過這個對象,獲取到里面的DOM元素

例子:

var ifr = document.getElementById("iframe");

ifr.contentWindow.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

ifr.contentWindow 這里,返回的是iframe的window對象,所以后面可以接着調用document方法,再接着調用getElementByTagName。那么就可以對iframe里面的元素進行操作了。 

二、在iframe本頁面,要操作這個iframe的父頁面的DOM元素(即嵌套這個iframe的頁面)可以用:

window.parent、window.top(這里的TOP是獲取的頂層,即有多層嵌套iframe的時候使用)

 

var ifr = document.getElementByTagName("iframe");

ifr.parent.document.getElementById("XXXXX")

<iframe src="a.html" id=""></iframe>

  

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

(在同域的情況下 且在http://下測試,且最好在iframe onload加載完畢后 dosomething...)

js寫法

a、通過contentWindow獲取

也有用contentDocument 獲取的 但是contentWindow 兼容各個瀏覽器,可取得子窗口的 window 對象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 對象。

獲取方法

 
  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屬性)

 

 
  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加載完畢以后才有效

 
  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

 

 
  1. var obj=window.parent.document.getElementById('objId')  

window.top 方法可以獲取父級的父級的....最頂層的元素對象

jq寫法:

 
  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加載完畢 有時候方法調用不到 多刷新才有效果)

 

 
  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 可以不寫

 

 
  1. window.parent.attributeName;  // 訪問屬性attributeName是在父級窗口的屬性名  
  2. window.parent.Func();  // 訪問屬性Func()是在父級窗口的方法  

 

5、讓iframe自適應高度

 
  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;
 
 

1.window.self

    對當前窗口自身的引用;self,window.self,window三者是等價的

2.window.top

     對頂層窗口的引用,如果本身就是頂層窗口,則返回本身

3.window.parent

     對父窗口的引用,如果沒有父窗口,則返回本身

 
 
 
 
 
 
 
 
 
 
 
 

contentDocument:

W3C的標准告訴我們,可以通過Dom對象的contentDocument屬性來返回文檔對象。
doc= document.getElementById('J_mainframe' ).contentDocument
IE6,IE7都不支持,IE8開始支持,需要如此訪問 document.frames['J_mainframe'].document;

注意:由於安全原因,文檔的內容只能通過同一個域名下的另外一個文檔訪問。

所有主要瀏覽器都支持 contentDocument 屬性

注意:如果指定了 !DOCTYPE, Internet Explorer 8 及更高版本支持 contentDocument 屬性,其他IE版本請使用 contentWindow 屬性。

            contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 對象。

例1:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
function changeStyle(){
    var x=document.getElementById("myframe");
    var y=(x.contentWindow || x.contentDocument);
    if (y.document)y=y.document;
    y.body.style.backgroundColor="#0000ff";
}
</script>
</head>
<body>
    
<iframe id="myframe" src="demo_iframe.htm">
<p>你的瀏覽器不支持iframes。</p>
</iframe>
<br><br>
<input type="button" onclick="changeStyle()" value="修改背景顏色">

</body>
</html>

  例2:

<html>
<head>
<script type="text/javascript">
function getText()
{
var x=document.getElementById("frame1").contentDocument;
alert(x.getElementsByTagName("h3")[0].childNodes[0].nodeValue);
}
</script>
</head>
<body>

<iframe src="/example/hdom/frame_a.html" id="frame1" ></iframe>
<br /><br />
<input type="button" onclick="getText()" value="Get text" />

</body>
</html>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM