? js對iframe內外(父子)頁面進行操作 - 慕軻博客-建立自己的個人自媒體博客

心情碎語:等雨停的時候往往雨不會停,等人來的時候往往人不會來。

您的位置:慕軻博客 >特效代碼> js對iframe內外(父子)頁面進行操作

js對iframe內外(父子)頁面進行操作

怎么對iframe進行操作,1.在iframe里面控制iframe外面的js代碼。2.在父框架對子iframe進行操作。

獲取iframe里的內容

主要的兩個API就是contentWindow,和contentDocument iframe.contentWindow, 獲取iframe的window對象 iframe.contentDocument, 獲取iframe的document對象 這兩個API只是DOM節點提供的方式(即getELement系列對象)

 var iframe = document.getElementById("iframe1"); var iwindow = iframe.contentWindow; var idoc = iwindow.document; console.log("window",iwindow);//獲取iframe的window對象 console.log("document",idoc); //獲取iframe的document console.log("html",idoc.documentElement);//獲取iframe的html console.log("head",idoc.head); //獲取head console.log("body",idoc.body); //獲取body 

另外更簡單的方式是,結合Name屬性,通過window提供的frames獲取.

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <script type="text/javascript"> console.log(window.frames['ifr1'].window); console.dir(document.getElementById("ifr1").contentWindow); </script> 

其實window.frames[‘ifr1’]返回的就是window對象,即

window.frames['ifr1']===window 

這里就看你想用哪一種方式獲取window對象,兩者都行,不過本人更傾向于第二種使用frames[xxx].因為,字母少啊喂~ 然后,你就可以操控iframe里面的DOM內容。

在iframe中獲取父級內容

同理,在同域下,父頁面可以獲取子iframe的內容,那么子iframe同樣也能操作父頁面內容。在iframe中,可以通過在window上掛載的幾個API進行獲取.

window.parent 獲取上一級的window對象,如果還是iframe則是該iframe的window對象 window.top 獲取最頂級容器的window對象,即,就是你打開頁面的文檔 window.self 返回自身window的引用。可以理解 window===window.self(腦殘) 

來個栗子~ 

ok, 獲取了之后,我們就可以進行相關操作了。 在同域的iframe中,我們可以巧妙的使用iframe的黑科技來實現一些trick.

iframe的輪詢

話說在很久很久以前,我們實現異步發送請求是使用iframe實現的~! 怎么可能!!! 真的史料為證(自行google), 那時候為了不跳轉頁面,提交表單時是使用iframe提交的。現在,前端發展尼瑪真快,websocket,SSE,ajax等,逆天skill的出現,顛覆了iframe, 現在基本上只能活在IE8,9的瀏覽器內了。 但是,寶寶以為這樣就可以不用了解iframe了,而現實就是這么殘酷,我們目前還需要兼容IE8+。所以,iframe 實現長輪詢和長連接的trick 我們還是需要涉獵滴。

iframe長輪詢

如果寫過ajax的童鞋,應該知道,長輪詢就是在ajax的readyState = 4的時,再次執行原函數即可。 這里使用iframe也是一樣,異步創建iframe,然后reload, 和后臺協商好, 看后臺哥哥們將返回的信息放在,然后獲取里面信息即可. 這里是直接放在body里.

var iframeCon = docuemnt.querySelector('#container'),
		text; //傳遞的信息 var iframe = document.createElement('iframe'),
		iframe.id = "frame",
		iframe.style = "display:none;",
		iframe.name="polling",
		iframe.src="target.html";
	iframeCon.appendChild(iframe);
	iframe.onload= function(){ var iloc = iframe.contentWindow.location,
			idoc  = iframe.contentDocument;
		setTimeout(function(){
			text = idoc.getElementsByTagName('body')[0].textContent; console.log(text);
			iloca.reload(); //刷新頁面,再次獲取信息,并且會觸發onload函數 },2000);
	} 

這樣就可以實現ajax的長輪詢的效果。 當然,這里只是使用reload進行獲取,你也可以添加iframe和刪除iframe的方式,進行發送信息,這些都是根據具體場景應用的。另外在iframe中還可以實現異步加載js文件,不過,iframe和主頁是共享連接池的,所以還是很蛋疼的,現在基本上都被XHR和hard calllback取締了,這里也不過多介紹了。

1.js在iframe子頁面操作父頁面元素代碼:

window.parent.document.getElementByIdx_x("父頁面元素id");

2.js在父頁面獲取iframe子頁面元素代碼如下:

window.frames["iframe_ID"].document.getElementByIdx_x("子頁面元素id");

3. jquery在iframe子頁面獲取父頁面元素代碼如下:

$("#objid",parent.document)

4. jquery在父頁面獲取iframe子頁面的元素

$("#objid",document.frames('iframename').document)

5.在iframe中調用父頁面中定義的方法和變量:

window.parent.window.parentMethod();
window.parent.window.parentValue;

6.在父頁面操作iframe子頁面的方法和變量

window.frames["iframe_ID"].window.childMethod();
window.frames["iframe_ID"].window.childValue;

一、同域下父子頁面的通信

父頁面parent.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("parent.html");
        }
        function callChild(){
            myFrame.window.say();
            myFrame.window.document.getElementById("button").value="調用結束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="調用child.html中的函數say()" onclick="callChild()"/>
    <iframe name="myFrame" src="http://caibaojian.com/child.html"></iframe>
</body>
</html>

子頁面child.html

<html>
<head>
    <script type="text/javascript">
        function say(){
            alert("child.html");
        }
        function callParent(){
            parent.say();
            parent.window.document.getElementById("button").value="調用結束";
        }
    </script>
</head>
<body>
    <input id="button" type="button" value="調用parent.html中的say()函數" onclick="callParent()"/>
</body>
</html>

注意事項

要確保在iframe加載完成后再進行操作,如果iframe還未加載完成就開始調用里面的方法或變量,會產生錯誤。判斷iframe是否加載完成有兩種方法:

1. iframe上用onload事件

2. 用document.readyState=="complete"來判斷

二、跨域父子頁面通信方法

如果iframe所鏈接的是外部頁面,因為安全機制就不能使用同域名下的通信方式了。

1.父頁面向子頁面傳遞數據

實現的技巧是利用location對象的hash值,通過它傳遞通信數據。在父頁面設置iframe的src后面多加個data字符串,然后在子頁面中通過某種方式能即時的獲取到這兒的data就可以了,例如:

1.1 在子頁面中通過setInterval方法設置定時器,監聽location.href的變化即可獲得上面的data信息

1.2. 然后子頁面根據這個data信息進行相應的邏輯處理

2.子頁面向父頁面傳遞數據

實現技巧就是利用一個代理iframe,它嵌入到子頁面中,并且和父頁面必須保持是同域,然后通過它充分利用上面第一種通信方式的實現原理就把子頁面的數據傳遞給代理iframe,然后由于代理的iframe和主頁面是同域的,所以主頁面就可以利用同域的方式獲取到這些數據。使用 window.top或者window.parent.parent獲取瀏覽器最頂層window對象的引用。

---

轉載請注明本文標題和鏈接:《js對iframe內外(父子)頁面進行操作

發表評論

38 + 93 =
路人甲 表情
Ctrl+Enter快速提交

網友評論(3)

文章不錯支持一下吧
今日新鮮事 2個月前 (12-21) 回復
給力!謝謝分享!
跨境電商之家 2個月前 (12-19) 回復
文章不錯非常喜歡
熱搜榜 3個月前 (12-06) 回復
福彩3d图谜总汇 股票行情大盘走势今日大盘行情 东莞配资公司 股票配资排名丿选 灵菲配资 海南橡胶股票 股票涨跌原理是什么 乐清期货配资 友钱网 芝麻策略 股票融资方式 投资理财平台-选择中欧钱滚滚 上证指数是什么意思上指涨跌又是什么意思 牛掌柜配资 大盘股票指数 浙江股权交易中心娃哈哈股价 融正配资