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. Anliven - 一碗毒鸡汤

    什么是你的核心动力,支撑着你持续前进? 什么是你的加速度,激发你全部的潜能和勇气? 你的核心动力应该来自于: 家人与朋友的信任.包容与期待 你本应承担的责任 对自己有所要求,有所期待,你本应更好 而你 ...

  2. react基础（1）

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  3. SQL Server时间粒度系列----第7节日历数据表详解

    本文目录列表: 1.时间粒度有关描述 2.时间维度有关功能函数3.日历数据表 4.日历数据表数据填充 5.总结语 6.参考清单列表   时间粒度有关描述   将该系列涉及到的时间粒度以及分钟以下的粒度 ...

  4. Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...

  5. 【转】App开放接口api安全性—Token签名sign的设计与实现

    前言 在app开放接口api的设计中,避免不了的就是安全性问题,因为大多数接口涉及到用户的个人信息以及一些敏感的数据,所以对这些接口需要进行身份的认证,那么这就需要用户提供一些信息,比如用户名密码等, ...

  6. xml html entity 列表

    Name Character Unicode code point (decimal) Standard Description quot " U+0022 (34) XML 1.0 dou ...

  7. C#基础知识四之override和new的区别

    override override是派生类用来重写基类方法的.调用的派生类方法,如需调用基类方法用base关键字 override不能重写非虚方法或静态方法. override重写必须用abstrac ...

  8. iOS开发之CocoaPods的安装与使用

    前言部分 iOS开发时,项目中会引用许多第三方库,CocoaPods(https://github.com/CocoaPods/CocoaPods) 可以用来方便的统一管理这些第三方库. 一.安装 由 ...

  9. 背水一战 Windows 10 (12) - 绘图: Shape, Path

    [源码下载] 背水一战 Windows 10 (12) - 绘图: Shape, Path 作者:webabcd 介绍背水一战 Windows 10 之 绘图 Shape - 图形 Path - 路径 ...

  10. IOS学习笔记之获取Plist文件读取数据

    @property(nonatomic,strong) NSArray *pic; //创建数组属性 @property(nonatomic,assign) int index; //创建索引属性 @ ...