html iframe 元素之间的调用
一、简介
　　一般需要引入一个独立页面的时候，我们会使用iframe。在业务需要的时候，我们需要在父页面与iframe页面之间进行交互。交互的时候，我们就需要使

用到js或jquery对父页面或子页面中的相关元素进操作。
二、示例
　　1、页面结构如下：

　　父页面：

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>父页面</title>

     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>

     </head>

     <body>

         <input id="username" name="username" value="zhangsan" />

         <button onclick="getIframeEle();">change iframe1 from js</button>

         <button onclick="getIframeEle2();">change iframe1 from jquery</button>

         </br>

         <iframe id="t_sub" name="myFrame"  src="./sub.html"> </iframe>

         <iframe id="t_sub2" name="myFrame2"  src="./sub2.html"> </iframe>

     <script type="text/javascript">

     function getIframeEle(){ //通过js父页面操作子页面中的元素

         var childdoc = document.getElementById("t_sub").contentWindow.document;

         var childele = childdoc.getElementById("tname");

         childele.value = "chang from parent" + new Date();

         console.log(childele.value);

     }

     function getIframeEle2(){//通过jquery父页面操作子页面中的元素

         //console.log($(document.frames("t_sub").document));

         var childele = $(document.getElementById('t_sub').contentWindow.document).find("#tname");

         childele.val("jquery iframe");

         console.log(childele.val());

     }

     // 计算页面的实际高度，iframe自适应会用到

   function calcPageHeight(doc) {

       var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)

       var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)

       var height  = Math.max(cHeight, sHeight)

       return height

   }

   var ifr = document.getElementById('t_sub2')

   ifr.onload = function() {

       var iDoc = ifr.contentDocument || ifr.document

       var height = calcPageHeight(iDoc)

       ifr.style.height = height + 'px'

   }

     </script>

     </body>

 </html>

　　子页面一

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>子页面一</title>

     <script  type="text/javascript"   src="jquery-1.8.3.min.js"></script>

     </head>

     <body>

         <input id="tname" value="test" />

         <button onclick="getParentEle();">change parent from js</button>

         <button onclick="getBrothertEle2();">change brother iframe from js</button>

         <button onclick="getParentEle2();">change parent iframe from jquery</button>

 <script type="text/javascript">

 <!--

 function getParentEle(){//通过js获取并操作父页面的元素

     var par_input =    parent.document.getElementById("username");

     par_input.value = "change from iframe" + new Date();

     console.log(par_input.value)

 }

 function getParentEle2(){//通过jquery获取并操作父页面中的元素

     var usernameELe = $('#username', parent.document);

     usernameELe.val("change from child iframe ");

     console.log(usernameELe.val());

 }

 function getBrothertEle2(){//通过js获取并操作兄弟iframe中的元素

     var parentDOM = parent.document.getElementById("t_sub2").contentWindow.document;;

     var borele = parentDOM.getElementById('tname2');

     borele.value = "change from brother iframe" + new Date();

     console.log(borele.value)

 }

 //-->

 </script>

     </body>

 </html>

　　子页面二

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>子页面二</title>

     </head>

     <body>

         <input id="tname2" value="test22" />

         <a href="javascript:void(0);" onclick="test(this);" >test</a>

         <br/><br/><br/><br/><br/><br/><br/>

     <script type="text/javascript">

     function test(this_){

         window.parent.location.href="http://www.baidu.com";

     }

     </script>

     </body>

 </html>

　　页面效果如下图所示：

　　

html iframe 元素之间的调用的更多相关文章

  1. JS备忘--子父页面获取元素属性、显示时间，iframe之间互相调用函数

    //页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...

  2. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  3. frameset，iframe框架之间如何互相调用变量、函数

    以往一直在编写的都是前台的UI,很少使用到frameset.iframe,对其了解也是十分有限,只是知道其可以为其当前页面引入html文件成为当前页的一部分,但是这两天在做后台UI界面的时候,发现这样 ...

  4. 笔记：javascript操作iframe内的DOM元素，及调用iframe内的方法

    iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...

  5. iframe于iframe页面之间的函数相互调用

    因为iframe页面于包括父页面在内的其他页面通讯有跨域问题,所以只有在服务器环境下或者火狐浏览器下才能测试. 在iframe页面调用父页面的函数采用parent,例子:在父页面有一个say()函数, ...

  6. React兄弟、父子元素之间的通信

    React兄弟.父子元素之间的通信 React元素之间的通信主要由下面几种方式 1. Redux 2. EventEmitter 3. 通过props进行通信(需要有嵌套关系) 子元素到父元素 父子元 ...

  7. iframe元素的学习(笔记)

    什么是iframe:iframe元素即内联框架,iframe是内联的并且承前启后,对于外围的页面,iframe是一个普通的元素,对于iframe里面的内容,又是一个五脏俱全的页面.重下面的写法可以看出 ...

  8. iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

    HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素. 提示和注释: 提示:您可以把需要的文本 ...

  9. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

随机推荐

  1. Node.js Express 路由文件分类

    前言 基于上一篇Web Api Controller分类,在MVC中我们通常要按自己的业务来划分Controller层, 好处多多,那么Express框架作为Node.js的一款MVC框架,那么自然也 ...

  2. jQuery-1.9.1源码分析系列（五） 回调对象

    jQuery.Callbacks()提供的回调函数队列管理本来是延时回调处理的一部分,但是后面将其独立出来作为一个模块.jQuery就是这样,各个模块间的代码耦合度是处理的比较好的,值得学习.虽然是从 ...

  3. 打造Orm经典,创CRUD新时代,Orm的反攻战

    让我们开启数据库无Linq.零sql时代(续) 第一部分 MQL qq群:225656797 demo下载: 点此下载(既然下载,就支持该文,关注我的博客) Moon.Orm 5.0 (MQL版) 版 ...

  4. 重构sql server的sys.sp_helptext存储

    本文目录列表: 1.sys.sp_helptext存储的功能和效果 2.重构sys.sp_helptext存储(命名为dbo.usp_helptext)提供直观的效果 3.sys.sp_helptex ...

  5. .NET开源高性能Socket通信中间件Helios介绍及演示

    一:Helios是什么 Helios是一套高性能的Socket通信中间件,使用C#编写.Helios的开发受到Netty的启发,使用非阻塞的事件驱动模型架构来实现高并发高吞吐量.Helios为我们大大 ...

  6. 9.Configure One-to-One（配置一对一关系）【Code-First系列】

    现在,开始学习怎么配置一对一的关系,众所周知,一对一的关系是:一个表中的主键,在另外一个表中,同时是主键和外键[实际上是一对零或者一对一]. 请注意:一对一的关系,在MS SQL Server中,技术 ...

  7. ActiveX（一）第一个简单的Demo

    说道ActiveX,我的第一直觉就是Flash,利用ActiveX.我们可以创建丰富的可交互式应用程序.同时.利用ActiveX特性.我们可以实现Js 与 ActiveX 的无缝连接(包括数据共享.和 ...

  8. Android开发之重力传感器

    重力传感器与方向传感器的开发步骤类似,只要理清了期中的x,y,z的值之后就可以根据他们的变化来进行编程了,首先来看一副图 假设当地的重力加速度值为g 当手机正面朝上的时候,z的值为q,反面朝上的时候, ...

  9. 《c# 从入门经典》 (第6版) - c# 简介

    1,.NET Framework:是开发平台,包含两大部分: ①庞大的代码库(类库),可以在客户语言(C#,VB)中来使用这些代码 ②Common Language Runtime,负责管理应用程序的 ...

  10. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...