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. PHP封装

       封装 把成员方法和成员属性封装到类中,隐藏属性和方法实现的细节,通过public.protected.private等限定类成员的访问权限,数据被保护在内部,只通过被授权的成员方法才可以操作,尽 ...

  2. Ajax跨域访问wcf服务中所遇到的问题总结。

    工具说明:vs2012,sql server 2008R2 1.首先,通过vs2012建立一个wcf服务项目,建立好之后.再新开一个vs2012 建立web项目,通过jQuery的ajax方法访问服务 ...

  3. knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页

    Knockoutjs 是一个微软前雇员开发的前端MVVM JS框架, 具体信息参考官网 http://knockoutjs.com/ Web API数据准备: 偷个懒数据结构和数据copy自官网实例  ...

  4. .NET正则表达式基础入门（三）

    括号 正则表达式中的括号能将多个字符或者表达式当做一组,即将他们看成一个整体.这样量词就可以修饰这一组表达式.阅读本章前,建议先下载我于CSDN上传的示例代码,下载无需分数,下载链接. 1.分组 假设 ...

  5. jQuery获取Select选中的Text和Value

    获取Select选中的Text和Value语法解释:$("#select_id").change(function(){//code...});   // 为Select添加事件, ...

  6. ul li设置横排，并除去li前的圆点

    效果预览:http://hovertree.com/texiao/css/ 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul& ...

  7. webapi filter过滤器中获得请求的方法详情(方法名,Attributes)

    public class GlobalActionFilter : ActionFilterAttribute { private string _requestId; public override ...

  8. CSS侧边栏，ng-click定义选中事件

    本篇小随笔,记录下侧边栏的写法和ng-click点击选中事件.因为这个工程不让引用jQuery.所以ng-click选中事件用了一个比较笨的方法实现的. 下面是HTML页面 按 Ctrl+C 复制代码 ...

  9. android studio 1.0 开发 ndk 调用 c++ so库

    一个没用过java和安卓的人使用android studio开发带c++ so库的安卓程序用例(以ndk的hello-jni为例),对于不熟悉java和安卓的人来说这个很花时间,希望通过这篇文章帮助跟 ...

  10. No.005：Longest Palindromic Substring

    问题: Given a string S, find the longest palindromic substring in S. You may assume that the maximum l ...