一、Window之间JS通信

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

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

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

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

function say() {
alert('hello, second!');
}

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

new_window.say();

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

function hello() {
alert('hello, The first!');
}

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

window.opener.hello();

二、iframe之间JS通信

<script type="text/javascript">
function hello()
{
console.log('拾空网say hello!');
return '拾空网say hello!';
} function callChildren()
{
var state = window.frames["children"].document.readyState;
if (state == 'complete') {
children.window.say(); // 调用子页面里面的js方法
//parent.window.hello(); // 调用父页面方法
}
}
</script>
<div style="border:1px solid #F00">
<h3>test iframe connection</h3>
<input type='text' name="sex" value="male"/>
<input type="button" name="test_js" value="测试js调用" onClick="javascript:callChildren()" />
<iframe name="children" src="host/" width="100%" height="100%" scrolling="yes" frameborder="1"></iframe>
</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. stm32之通信

    本文提到的内容有以下几个方面: 通信概述 串口通信 I2C通信 CAN通信 SPI通信 I2S通信 USB通信 其他通信 一.通信概述 按照数据传送方式分: 串行通信(一条数据线.适合远距离传输.控制 ...

  2. Runtime.getRuntime()

    1转自:https://www.aliyun.com/jiaocheng/849282.html 那就首先说点Runtime类吧,他是一个与JVM运行时环境有关的类,这个类是Singleton的.我说 ...

  3. css属性学习

    CSS display 属性 display 属性规定元素应该生成的框的类型. none:此元素不会被显示. block:此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被 ...

  4. POJ-3187

    Backward Digit Sums Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7634   Accepted: 43 ...

  5. 面试题: 数据库 sql优化 sql练习题 有用 学生表,课程表,成绩表,教师表 练习

    什么是存储过程?有哪些优缺点? 什么是存储过程?有哪些优缺点? 存储过程就像我们编程语言中的函数一样,封装了我们的代码(PLSQL.T-SQL). 存储过程的优点: 能够将代码封装起来 保存在数据库之 ...

  6. .NET Framework 2.0安装问题

    在.NET Framework 2.0安装的时候,如果提示 system.deployment.dll失败,另一个程序正在使用此文件,进程无法访问.这种情况下,我们可能的解决方案是: 关闭掉杀毒软件在 ...

  7. 2-7 Flutter开发工具使用指南

    这里选择用哪个模拟器运行 Mac系统下可以通过这个Open IOS Siumlator打开IOS模拟器 debug用来调试的 可以创建新的模拟器 选择安卓模拟器的版本 这是sdk的配置 点开就是打开了 ...

  8. 优酷电视剧爬虫代码实现一:下载解析视频网站页面(4)补充: Java正则表达式Matcher.group(int group)相关类解析

    在Java正则表达式的相关类Matcher中,有如下几个方法: - int groupCount() - String group(int group) - int start(int group)  ...

  9. JavaScript中两个数组的拼接

    方法一:使用for循环 var arr = ['tom', 'jerry']; var arr2 = [1, 2]; for(var i=0; i<arr2.length; i++){ arr. ...

  10. C#中Obsolete特性

    一般在逼格比较高的程序员代码中常见此特性手法,他们因为某些原因不详注释掉原有的代码,用Obsolete [csharp] view plain copy class Program { static  ...