一、Window之间JS通信

在开发项目过程中,由于要引入第三方在线编辑器,所以需要另外一个窗口(window),而且要求打开的window要与原来的窗口进行js通信,那么如何实现呢?

1、在原窗口创建新打开window的一个对象:

  1. var new_window;
  2. var url = 'http:://second.com';
  3. new_window = window.open(url, 'new_window');

新窗口里有一个say()方法:

  1. function say() {
  2. alert('hello, second!');
  3. }

2、使用对象调用新窗口里的say()方法:

  1. new_window.say();

那么,如何在新窗口中调用原来窗口的方法呢???假设在原窗口有一个hello()方法:

  1. function hello() {
  2. alert('hello, The first!');
  3. }

新窗口可以使用window.opener调用原窗口的方法哦!如下所示:

  1. window.opener.hello();

二、iframe之间JS通信

  1. <script type="text/javascript">
  2. function hello()
  3. {
  4. console.log('拾空网say hello!');
  5. return '拾空网say hello!';
  6. }
  7.  
  8. function callChildren()
  9. {
  10. var state = window.frames["children"].document.readyState;
  11. if (state == 'complete') {
  12. children.window.say(); // 调用子页面里面的js方法
  13. //parent.window.hello(); // 调用父页面方法
  14. }
  15. }
  16. </script>
  17. <div style="border:1px solid #F00">
  18. <h3>test iframe connection</h3>
  19. <input type='text' name="sex" value="male"/>
  20. <input type="button" name="test_js" value="测试js调用" onClick="javascript:callChildren()" />
  21. <iframe name="children" src="host/" width="100%" height="100%" scrolling="yes" frameborder="1"></iframe>
  22. </div>

window之间、iframe之间的JS通信的更多相关文章

  1. JS观察者设计模式:实现iframe之间快捷通信

    观察者设计模式又称订阅发布模式,在JS中我们习惯叫做广播模式,当多个对象监听一个通道时,只要发布者向该通道发布命令,订阅者都可以收到该命令,然后执行响应的逻辑.今天我们要实现的就是通过观察者设计模式, ...

  2. 父窗口,子窗口之间的JS"通信"方法

    今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...

  3. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  4. javascript 中contentWindow和 frames和iframe之间通信

    iframe父子兄弟之间通过jquery传值(contentWindow && parent),iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) ...

  5. JS备忘--子父页面获取元素属性、显示时间,iframe之间互相调用函数

    //页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...

  6. 主页面、iframe之间调用以及传值

    主页面.iframe之间的调用和传值,无非就是两个交互形式: 主页面与子页面的交互 子页面之间的交互 接下来要讲的是四种交互传值的方式:利用postMessage方法传值.DOM操作传值.URL方式传 ...

  7. iframe之间操作记录

    1.watch.js (function ($) { $.fn.watch = function (callback) { return this.each(function () { //缓存以前的 ...

  8. 父窗口与iFrame之间调用方法和元素

    父窗口与iFrame之间调用方法和元素 父窗口调用子窗口: 调用元素 js格式: var obj=document.getElementById("iframe的name").co ...

  9. js Iframe与父级页面通信及IE9-兼容性

    一. postMessage window.postMessage()方法安全地启用Window对象之间的跨源通信:例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间. 二.语 ...

随机推荐

  1. java的桥接模式

    http://blog.csdn.net/jason0539/article/details/22568865 http://www.cnblogs.com/V1haoge/p/6497919.htm ...

  2. 序列联配(alignment)和数据库搜索方法简介

    根据一个打分系统,怎么样排对起来打分能够最大.就认为历史上应该是这样子的. 数据同源搜索软件Fasta和Blast 是目前功能最全,使用最广的同源性数据库搜索软件包.他们在Needleman的动态算法 ...

  3. 锐捷认证的一些问题&解决方法

    scau锐捷校园网各种无法吐槽,认证有时候自己掉线了麻痹都打到boss了给我掉线,收费也坑爹,连铁通都比不上. 1.锐捷认证客户端已停止工作: 貌似是毒霸的问题,把金山毒霸关掉再试 2.获取ip地址信 ...

  4. Thinkpad 拆光驱更换光驱硬盘支架、拆光驱面板 T400 T440

    拆光驱.硬盘装支架的环节就不多说了.主要说下拆光驱面板. 先拿细物(区别针.回形针),捅这个洞,就能把光驱仓打开弹出来后,反过来,这里有个卡扣放大看,按住这卡扣,然后往外掰,把面板掰出来 掰出来的面板 ...

  5. 从零开始Spring项目

    Spring Boot是什么 SpringBoot是伴随着Spring4.0诞生的: 从字面理解,Boot是引导的意思,SpringBoot帮助开发者快速搭建Spring框架: SpringBoot帮 ...

  6. 使用 Addr2line 将函数地址解析为函数名

    用 Addr2line 将函数地址解析为函数名 原文链接:http://www.ibm.com/developerworks/cn/linux/l-graphvis/ Addr2line 工具(它是标 ...

  7. yzm10与战地信使 yzm10原创系列

    yzm10与战地信使 M国与R国正进行着激烈的鏖战,此时的yzm10从R国窃取了最高军事机密,这份情报将是此次战役的转折点,如果M国得到了这份情报,就能够取得这次战争的胜利.yzm10当然是站在M国这 ...

  8. NSMutableAttributedString及NSMutableParagraphStyle的使用

    一.在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较 ...

  9. codevs 1993草地排水

    1993 草地排水

  10. 洛谷P3327 [SDOI2015]约数个数和(莫比乌斯反演)

    传送门 公式太长了……我就直接抄一下这位大佬好了……实在懒得打了 首先据说$d(ij)$有个性质$$d(ij)=\sum_{x|i}\sum_{y|j}[gcd(x,y)=1]$$ 我们所求的答案为$ ...