html iframe 元素之間的調用

時間 2019-11-06

標籤 html iframe 元素之間調用欄目 HTML 简体版

原文原文鏈接

html iframe 元素之間的調用
1、簡介
　　通常須要引入一個獨立頁面的時候，咱們會使用iframe。在業務須要的時候，咱們須要在父頁面與iframe頁面之間進行交互。交互的時候，咱們就須要使
用到js或jquery對父頁面或子頁面中的相關元素進操做。
2、示例
　　一、頁面結構以下：javascript

　　父頁面：html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>父頁面</title>
 6     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
 7     </head> 
 8     <body> 
 9         <input id="username" name="username" value="zhangsan" />
10         <button onclick="getIframeEle();">change iframe1 from js</button>
11         <button onclick="getIframeEle2();">change iframe1 from jquery</button>
12         </br>
13         <iframe id="t_sub" name="myFrame"  src="./sub.html"> </iframe> 
14         <iframe id="t_sub2" name="myFrame2"  src="./sub2.html"> </iframe> 
15     <script type="text/javascript">
16     function getIframeEle(){ //經過js父頁面操做子頁面中的元素
17         var childdoc = document.getElementById("t_sub").contentWindow.document;
18         var childele = childdoc.getElementById("tname");
19         childele.value = "chang from parent" + new Date();
20         console.log(childele.value);  
21     }
22     function getIframeEle2(){//經過jquery父頁面操做子頁面中的元素
23         //console.log($(document.frames("t_sub").document)); 
24         var childele = $(document.getElementById('t_sub').contentWindow.document).find("#tname");
25         childele.val("jquery iframe");
26         console.log(childele.val());
27     }
28 
29 
30     // 計算頁面的實際高度，iframe自適應會用到
31   function calcPageHeight(doc) {
32       var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
33       var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
34       var height  = Math.max(cHeight, sHeight)
35       return height
36   }
37   var ifr = document.getElementById('t_sub2')
38   ifr.onload = function() {
39       var iDoc = ifr.contentDocument || ifr.document
40       var height = calcPageHeight(iDoc)
41       ifr.style.height = height + 'px'
42   }
43     </script>
44     </body>
45 </html>

　　子頁面一java

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>子頁面一</title> 
 6     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>
 7     </head> 
 8     <body> 
 9         <input id="tname" value="test" />
10         <button onclick="getParentEle();">change parent from js</button>
11         <button onclick="getBrothertEle2();">change brother iframe from js</button>
12         <button onclick="getParentEle2();">change parent iframe from jquery</button>
13 <script type="text/javascript">
14 <!--
15 function getParentEle(){//經過js獲取並操做父頁面的元素
16     var par_input =    parent.document.getElementById("username");
17     par_input.value = "change from iframe" + new Date();
18     console.log(par_input.value)
19 }    
20 function getParentEle2(){//經過jquery獲取並操做父頁面中的元素
21     var usernameELe = $('#username', parent.document);
22     usernameELe.val("change from child iframe ");
23     console.log(usernameELe.val());
24 }
25 function getBrothertEle2(){//經過js獲取並操做兄弟iframe中的元素
26     var parentDOM = parent.document.getElementById("t_sub2").contentWindow.document;;
27     var borele = parentDOM.getElementById('tname2');
28     borele.value = "change from brother iframe" + new Date();
29     console.log(borele.value)
30 }
31 //-->
32 </script>
33     </body>
34 </html>

　　子頁面二jquery

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5         <title>子頁面二</title> 
 6     </head> 
 7     <body> 
 8         <input id="tname2" value="test22" /> 
 9         <a href="javascript:void(0);" onclick="test(this);" >test</a>
10         <br/><br/><br/><br/><br/><br/><br/> 
11     <script type="text/javascript">
12     function test(this_){
13         window.parent.location.href="http://www.baidu.com";
14     }
15     </script>        
16     </body>
17 </html>