<!doctype html>

 <html>

  <head>

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

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

   <style>

     *{padding:0;margin:0}

     #box{width:450px;height:200px;border:2px solid red;margin:30px auto;}

     #box iframe{width:100%;height:100%;}

   </style>

  </head>

  <body>

     <div id="box">

         <iframe src="children.html" id="iframebox" frameborder="0" scrolling="yes"></iframe>

     </div>

     <div id="pmsg"></div>

     <div id="pmsg1"></div>

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

     <script type="text/javascript">

         /*

             iframe中父子页面之间的数据传递

         */

         //javascript版本

         window.onload = function(){

             //父页面调用子页面的元素和事件

             //var iframebox = document.getElementById("iframebox");

             //var cwinDom = iframebox.contentWindow;//获取的是window，而不是domcument对象

             //cwinDom.document.getElementById("regbox").innerHTML = "皮皮，已经登录了。。。";  //需要在服务器中访问，否则会抛跨域异常

             //var json = {msg:"皮皮，已经邮寄一份礼物给你了，注意查收"};

             //cwinDom.getMsg(json);

         }

         function msg(msg){

             document.getElementById("pmsg1").innerHTML = msg;

         }

         //jQuery版本

         window.onload = function(){

             var $frame = $("#iframebox").contents();

             $frame.find("#regbox").html("皮皮，已经登录了。。。");

             var json = {msg:"皮皮，已经邮寄一份礼物给你了，注意查收"};

             $("#iframebox")[0].contentWindow.getMsg(json);

         }

     </script>

  </body>

 </html>
 <!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>Document</title>

  </head>

  <body style="overflow:auto;">

     <div id="regbox">登陆、注册</div>

     <div id="msg"></div>

     <script type="text/javascript">

         function getMsg(params){

             alert(99);

             document.getElementById("msg").innerHTML = params.msg+'<br/>收到了,谢谢';

             //调用父页面的元素和事件

             parent.document.getElementById("pmsg").innerHTML = "礼物已收到了,谢谢";

             parent.msg("调用了下父页面的事件");

             //jQuery

             $(parent.document).find("pmsg").html("礼物已收到了,谢谢");

         }

     </script>

  </body>

 </html>

iframe父子页面之间相互调用元素和函数的更多相关文章

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

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

  2. Angular获取dom元素，以及父子组建之间相互传值

    1.使用原生js代码获取dom元素 在ts文件中有一个ngOnInit()的方法,这个方式是指在模块加载完毕之后并不是dom加载完毕,也就是说如果你的dom元素中使用的angular的指令,然后想在这 ...

  3. Java-web-多个独立项目之间相互调用实践

    本篇文章只涉及到应用层面,没有涉及到什么底层原理之类的,我目前的实力还没有达到那个级别.如果是大神级别的人看到这篇文章,请跳过. 项目框架也已经是搭建好了的,springboot版本为1.5,数据库操 ...

  4. synchronized修饰的方法之间相互调用

    1:synchronized修饰的方法之间相互调用,执行结果为There hello  ..因为两个方法(main,hello)的synchronized形成了互斥锁.  所以当main方法执行完之后 ...

  5. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

  6. js和vue方法的相互调用（iframe父子页面的方法相互调用）。

    项目是前后端不分离的,模板引擎使用的JSP. 但是使用了Vue+ElementUI,这里列举一些常用的调用方式,有时候可能. 在js里调用vue方法 我们需要把方法注册到vue对象之外的页面,所以对与 ...

  7. iframe父子页面js之间的调用

    父级页面:mian.html 子页面1:top.html 子页面2:index.html 页面关系 <div onclick="_top()">调用contentTop ...

  8. jQuery iframe之间相互调用

    ,子iframe内调用父类函数方法: window.parent.func(); ,子Iframe中获取父界面的元素: $("#xx", window.parent.documen ...

  9. iframe父子页面调用小结

     子页面调用父页面 $('#Id', window.parent.document); //调用父页面元素 window.parent.func1(); //调用父页面方法  (子页面同理,需将js方 ...

随机推荐

  1. util包下的Date与sql包下的Date之间的转换

    Java中的时间类型 java.sql包下给出三个与数据库相关的日期时间类型,分别是: Date:表示日期,只有年月日,没有时分秒.会丢失时间: Time:表示时间,只有时分秒,没有年月日.会丢失日期 ...

  2. Android 通过Java代码生成创建界面。动态生成View，动态设置View属性。addRules详解

    废话不多说,本文将会层层深入给大家讲解如何动态的生成一个完整的界面. 本文内容: Java代码中动态生成View Java代码中动态设置View的位置,以及其他的属性 LayoutParams详解 一 ...

  3. Loadrunner的自定义监控器

    Loadrunner的自定义监控器 可以使用lr_user_data_point()来实现自定义监控,下面是一个小例子: double showsomething(); Action(){ doubl ...

  4. a与a:link、a:visited、a:hover、a:active

    原文地址http://www.cnblogs.com/exmyth/p/3226654.html a与a:link.a:visited.a:hover.a:active   起因: a与a:link的 ...

  5. hdu2546 01背包

    http://acm.split.hdu.edu.cn/showproblem.php?pid=2546 01背包问题,首先拿出5元买最贵的东西,那接下来就是背包容量m-5,物品数量n-1 的01背包 ...

  6. css3 总结03

    box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间. <ul id="box"> <li>a</li> <li> ...

  7. 快消品销售管理系统,PDA销售管理系统,销售拜访PDA,进销存管理PDA系统 移动扫描打印开单POS

    各种ERP软件的移动订单及移动车销解决方案是针对各个需要快速.便捷的,通过智能PDA移动智能终端设备实现销售订单下达及快速车销的应用解决方案.通过将移动订单及移动车销集成到ERP的移动解决方案,可以帮 ...

  8. Thymeleaf模板引擎使用

    Thymeleaf模板引擎使用 什么是Thymeleaf Thymeleaf是一个Java库.它是一个XML / XHTML / HTML5模板引擎,能够在模板文件上应用一组转换,将程序产生的数据或者 ...

  9. 【面经】用递归方法对二叉树进行层次遍历 && 二叉树深度

    void PrintNodeAtLevel(BiTree T,int level) { // 空树或层级不合理 ) return; == level) { cout << T->da ...

  10. 后缀数组 POJ 3693 Maximum repetition substring

    题目链接 题意:给定一个字符串,求重复次数最多的连续重复子串. 分析:(论文上的分析)先穷举长度 L,然后求长度为 L 的子串最多能连续出现几次.首先连续出现 1 次是肯定可以的,所以这里只考虑至少 ...