html iframe 元素之间的调用
来源:互联网 发布:奇商网络 编辑:程序博客网 时间:2024/06/07 00:44
html iframe 元素之间的调用
一、简介
一般需要引入一个独立页面的时候,我们会使用iframe。在业务需要的时候,我们需要在父页面与iframe页面之间进行交互。交互的时候,我们就需要使
用到js或jquery对父页面或子页面中的相关元素进操作。
二、示例
1、页面结构如下:
父页面:
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 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 </script>44 </body>45 </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="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>
子页面二
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>
页面效果如下图所示:
0 0
- html iframe 元素之间的调用
- html中iframe的调用
- iframe父页面与子页面之间的元素获取与方法调用
- [Html&JS] 一个网页上,不同的子父窗口iframe之间如何相互调用
- iframe的父子层级之间的调用
- iframe之间的调用(备忘)
- 自适应 和 iframe 父子之间的调用
- iframe 窗口之间js函数的调用
- iframe页面和父页面之间元素查找的方法
- iframe父子页面之间页面元素的传递
- jquery寻找html页面iframe标签引入的页面元素
- 父页面操作iframe内的html元素
- [复习HTML]frame,iframe,frameset之间的关系与区别
- HTML frame,iframe,frameset之间的关系与区别
- html窗口与其iframe子窗口之间的方法操作
- 使用iframe的父子窗口之间的对象相互调用
- 关于iframe调用父窗口的元素和方法
- Iframe之间以及父窗体的函数调用、传值
- RecyclerView 实现省市区三级联动
- android Bitmap与string互转
- Linux 项目部署、系统常用命令、java环境安装、tomcat安装部署。
- matplotlib 作图基本配置
- prototype的本质
- html iframe 元素之间的调用
- c++作业5
- 顺时针打印矩阵
- Angular 1.X初识
- 进阶篇_STL中通用算法处理数据
- 模拟实现spring框架的IOC跟AOP功能
- java-IO流4(缓冲输出字节流)
- DP入门
- Linux01