JS操作iframe元素

本文轉載自查看原文 2019-12-28 21:18 1986 JavaScript學習

參考鏈接1：https://www.cnblogs.com/html55/p/10163631.html

參考鏈接2：https://www.runoob.com/jsref/dom-obj-frame.html

Frame 對象

Frame 對象代表一個 HTML 框架。

<frame>標簽定義了在框架中一個特定的窗口（框架）。

在 HTML 文檔中 <frame> 每出現一次，就會創建一個 Frame對象。

IFrame 對象

IFrame 對象代表一個 HTML 的內聯框架。

在 HTML 文檔中 <iframe> 每出現一次，一個 IFrame 對象就會被創建。

Frame/IFrame 對象屬性

屬性	描述	W3C
align	根據周圍的文字排列 iframe。	Yes
contentDocument	容納框架的內容的文檔。返回 frame/iframe 生成的文檔對象。	Yes
contentWindow	返回 frame/iframe 生成的 window 對象。	No
frameBorder	設置或返回是否顯示框架周圍的邊框。	Yes
height	設置或返回 iframe 的高度。	Yes
longDesc	設置或返回指向包含框架內容描述文檔的 URL。	Yes
marginHeight	設置或返回 iframe 的頂部和底部的頁空白。	Yes
marginWidth	設置或返回 frame/iframe 的左側和右側的頁空白。	Yes
name	設置或返回 frame/iframe 的名稱。	Yes
noResize	設置或返回框架是否可調整大小。	Yes
scrolling	設置或返回框架是否可擁有滾動條。	Yes
src	設置或返回應被加載到框架中的文檔的 URL。	Yes
width	設置或返回 iframe 的寬度。	Yes

onload 事件在frame或者iframe載入完成后被觸發。

實例：

1. demo1.html頁面中有個iframe元素，iframe元素的src是iframe1.html，怎么在demo1.html頁面中操作iframe1.html頁面

答曰：demo1.html中，js先找到iframe元素（比如命名為：oIframe），那么oIframe.contentWindow就是iframe1.html這個頁面的window，剩下了就是DOM操作的事情了。

舉例：要求：demo1.html頁面中有個按鈕，點擊按鈕，iframe1頁面某些文字改變顏色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是demo1.html</title>
 6     </head>
 7     <body>
 8          
 9         <input type="button" name="btn1" id="btn1" value="點擊按鈕控制iframe頁面" />
10         <br />
11         <iframe id="iframe1" src="iframe1.html" width="300" height="200"></iframe>
12         <script>
13             window.onload = function(){
14                 var oBtn1   = document.getElementById('btn1');
15                 //獲取iframe元素,oIframe.contentWindow就是iframe1.html頁面的window對象
16                 var oIframe = document.getElementById('iframe1');
17                 oBtn1.onclick = function() {
18                     //demo1.html頁面中的js控制了iframe1.html頁面的字體顏色
19                     oIframe.contentWindow.document.body.style.color = 'red';
20                 }
21             }
22         </script>
23          
24          
25     </body>
26 </html>

View Code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是iframe1.html</title>
 6     </head>
 7     <body>
 8         父級頁面要改變我的顏色
 9     </body>
10 </html>

View Code

注意：

谷歌瀏覽器對iframe要在服務器環境下執行。
oIframe.contentWindow.document可以簡寫為oIframe.contentDocument，但是前者所有瀏覽器都支持，后者IE6、IE7不支持

2. demo2.html頁面中有個iframe，地址是iframe2.html，怎么在iframe2.html頁面中操作demo2.html頁面中的元素

答曰：iframe2.html頁面的js中，window.parent就是demo2.html這個頁面的window，剩下的也就是具體怎么DOM操作的事情了

舉例：iframe2.html頁面中的按鈕，點擊一次，demo2.html頁面中某些文字變顏色

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是demo2.html</title>
 6     </head>
 7     <body>
 8          
 9         <div>有本事你改我的顏色啊！</div>
10         <iframe id="iframe2" src="iframe2.html" width="300" height="200"></iframe>
11          
12          
13          
14     </body>
15 </html>

View Code

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是iframe2.html</title>
 6     </head>
 7     <body>
 8         <input type="button" name="btn2" id="btn2" value="點擊按鈕控制demo2.html頁面" />
 9         <script>
10             window.onload = function(){
11                 var oBtn2   = document.getElementById('btn2');
12                 oBtn2.onclick = function() {
13                     //demo1.html頁面中的js控制了iframe1.html頁面的字體顏色
14                     var oDiv = window.parent.document.body.children[0]; 
15                     oDiv.style.color = 'red';
16                 }
17             }
18         </script>
19     </body>
20 </html>

View Code

注意：這里iframe2.html頁面中，window.parent就是他的父級的window，如果是demo2.html中iframe的src是demo3.html，demo3.html里iframe是iframe2.html呢？就是多層嵌套，怎么找到最頂層的頁面window對象呢？答曰：window.top即可！

3. 上面的案例中，都是demo頁面中固定好了的iframe，如果要動態加載iframe，該怎么用呢？

答：和其他元素標簽的DOM操作一樣，document.createElement即可。

舉例：要求demo3.html中，點擊按鈕，動態生成並加載iframe2.html（iframe2.html代碼就不用貼了，在上面案例中有）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是demo3.html</title>
 6     </head>
 7     <body>
 8         <h1>動態加載iframe</h1>
 9         <input type="button" name="btn3" id="btn3" value="點擊創建iframe" />
10         <script>
11             window.onload = function(){
12                 var oBtn3   = document.getElementById('btn3');
13                 oBtn3.onclick = function() {
14                      
15                     var oIframe = document.createElement('iframe');
16                     oIframe.src = 'iframe2.html?t=798';
17                     document.body.appendChild(oIframe);
18                      
19                     //oIframe就是指在demo3.html這個頁面中的iframe標簽所代表的DOM元素
20                     //oIframe.contentWindow是iframe2.html這個頁面的window對象
21                      
22                      
23                     //別人說，IE下只能用oIframe.attachEvent('onload',function(){...}) 我試了下，IE下也可以用下面的
24                     oIframe.onload = function(){
25                         alert(888);
26                     };
27                      
28                     //如果iframe頁面js中有window.onload，oIframe.contentWindow.onload是無效的（IE6-8下還是有效的），如果沒有，則可以。當然盡量別用這么亂
29                     oIframe.contentWindow.onload = function(){
30                         alert(999);
31                     }
32                      
33                      
34  
35                 }
36             }
37         </script>
38          
39          
40     </body>
41 </html>

View Code

4. 案例，如何防止自己頁面被其他人嵌套在iframe里？

答曰：在自己頁面，用window.top != window進行判斷，如果確實不等，說明被嵌套，則賦值window.top.location.href值。核心代碼如下：

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

View Code

免責聲明！

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

猜您在找 操作iframe父頁面、子頁面的元素和方法 js js獲取iframe中的元素獲取iframe的元素並進行操作 Jq如何獲取並操作iframe中的元素？ js 如何訪問跨域的iframe的元素 Js/Jquery獲取iframe中的元素 js判斷一個元素是否在iframe里面 Js/Jquery獲取iframe中的元素 Js/Jquery獲取iframe中的元素通過js操作html元素