htmliframe元素之间的调用_html/css_WEB-ITnose

html iframe 元素之间的调用
一、简介
　　一般需要引入一个独立页面的时候，我们会使用iframe。在业务需要的时候，我们需要在父页面与iframe页面之间进行交互。交互的时候，我们就需要使
用到js或jquery对父页面或子页面中的相关元素进操作。
二、示例
　　1、页面结构如下：

　　父页面：

 1   2   3       4           5          父页面  6        7        8        9          10          change iframe1 from js 11          change iframe1 from jquery 12         
13          14          15      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 height36   }37   var ifr = document.getElementById('t_sub2')38   ifr.onload = function() {39       var iDoc = ifr.contentDocument || ifr.document40       var height = calcPageHeight(iDoc)41       ifr.style.height = height + 'px'42   }43      44      45   

　　子页面一

 1   2   3       4           5          子页面一   6        7        8        9          10          change parent from js 11          change brother iframe from js 12          change parent iframe from jquery 13  14  32  33      34   

　　子页面二

 1   2   3       4           5          子页面二   6        7        8            9         test10                 11      12     function test(this_){13         window.parent.location.href="http://www.baidu.com";14     }15              16      17   

　　页面效果如下图所示：

查看更多关于htmliframe元素之间的调用_html/css_WEB-ITnose的详细内容...