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. AGS中通过FeatureServer插入数据失败、插入数据在WMTS请求中无法显示以及version概念的讨论

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在多个项目中,当我方接口给其他部门人员使用时出现了插入数据失 ...

  2. 【JUC】JDK1.8源码分析之LockSupport（一）

    一.前言 最开始打算分析ReentrantLock,但是分析到最后,发现离不开LockSuport的支持,所以,索性就先开始分析LockSupport,因为它是锁中的基础,是一个提供锁机制的工具类,所 ...

  3. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  4. Debugging into .NET Core源代码的两种方式

    一.前言 .NET开源时间还不长,因为一直在做YOYOFx的关系,所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求,并且.NET Core平台与之前版本的变化太大,这也导 ...

  5. MySQL char与varchar的差异

    字符与字节的区别 一个字符由于所使用的字符集的不同,会并存储在一个或多个字节中,所以一个字符占用多少个字节取决于所使用的字符集 注意:char与varchar后面接的数据大小为存储的字符数,而不是字节 ...

  6. 优化MySchool数据库设计

    第一章 数据库的设计 1.E-R图中: 矩形:实体 椭圆:属性 菱形:关系 直线:连接实体,属性和关系 2.映射基数 一对多 多对一 多对多 3.范式: 第一范式:确保每列的原子性 第二范式:确保表中 ...

  7. 关系数据库SQL之可编程性存储过程

    前言 前面关系数据库SQL之可编程性函数(用户自定义函数)一文提到关系型数据库提供了可编程性的函数.存储过程.事务.触发器及游标,前文已介绍了函数,本文来介绍一下存储过程的创建.执行.删除.(还是以前 ...

  8. Composer根据Name显示与隐藏

    //主要设置 模型的显示与隐藏 private void TransmissionByData_AxSendSelectionChange(string domName, bool isVisible ...

  9. 机器学习 - ML

    CNCC - 2016 | 机器学习(原文链接) Machine Learning - ML,机器学习起源于人工智能,是AI的一个分支. 机器学习的理论基础:计算学习理论 - Computationa ...

  10. Asp.net 面向接口可扩展框架之使用“类型转化基础服务”测试四种Mapper(AutoMapper、EmitMapper、NLiteMapper及TinyMapper)

    Asp.net 面向接口可扩展框架的“类型转化基础服务”是我认为除了“核心容器”之外最为重要的组成部分 但是前面博文一出,争议很多,为此我再写一篇类型转化基础服务和各种Mapper结合的例子,顺便对各 ...