html iframe 元素之间的调用

时间：2021-12-24 00:07:12

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 元素之间的调用

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. React兄弟、父子元素之间的通信

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

  6. iframe元素的学习&lpar;笔记&rpar;

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

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

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

  8. jquery&sol;js iframe 元素操作

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

  9. Java特性之多态父类与子类之间的调用

    问题描述: Java三大特性,封装.继承.多态,一直没搞懂其中多态是什么,最近研究了一下,关于父类和子类之间的调用.下面是一个测试类,源代码如下: package com.test; public c ...

随机推荐

  1. 解析window&period;open链接的参数

    ); var arr = new Array(); arr = str.split("&"); ){ ; i<arr.length; i++){ ){ ); if(p ...

  2. 第十六篇、MBprogressHUD的使用和获取当前的控制器

    简介: 在开发应用的时候,为了更好的增加用户的体验,常常在客户端向服务端请求数据的时候,在适当的地方加上非模态HUD,让用户可以可以知道当前的进度,稍作等待. MBProgressHUD 第三方框架G ...

  3. js 中如何通过提示框跳转页面

    通过提示框跳转页面 <!doctype html> <html lang="en"> <head> <meta charset=&quot ...

  4. InstallShield Basic MSI工程常见问题解答&lbrack;转&rsqb;

    1.  问题描述:采用何种安装模式?实现方法:如果对用户界面等自定义要求不高的话,建议用Basic Msi Project,否则用InstallScript MSI Project. 2.  问题描述 ...

  5. java学会需要掌握的知识&lpar;来源网上。。&rpar;

    Java就业指导 2016-03-22 骆昊 程序人生 点击上方"程序人生"关注我们 想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些 ...

  6. BZOJ 2693&colon; jzptab&lpar; 莫比乌斯反演 &rpar;

    速度居然#2...目测是因为我没用long long.. 求∑ lcm(i, j) (1 <= i <= n, 1 <= j <= m) 化简之后就只须求f(x) = x∑u( ...

  7. django 项目中遇到的问题（持续更新中）

    问题1:in include 'provide the namespace argument to include() instead 描述:在最外层的urls.py 添加项目的urls后报错,错误显 ...

  8. 机器学习基石：02 Learning to Answer Yes&sol;No

    Perceptron Learning Algorithm 感知器算法, 本质是二元线性分类算法,即用一条线/一个面/一个超平面将1,2维/3维/4维及以上数据集根据标签的不同一分为二. 算法确定后, ...

  9. 《java入门第一季》之TreeSet存储自定义对象并保证排序和唯一

    上一篇用一个简单的例子,介绍了treeset集合存储的内部过程,这里再完善其存储自定义对象保证唯一. 需求:A:  * 自然排序,按照年龄从小到大排序  *         B:  * 成员变量值都相 ...

  10. &lbrack;hosts&rsqb;在hosts中屏蔽一级域名和二级域名的写法

    一级域名,如baidu: 0.0.0.0 baidu.com 二级域名 如有道公开课 0.0.0.0 ke.youdao.com 不带协议名,不带www. 用127.0.0.1也可以.

相关文章