一、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. centos7 install pip

    1. 安装过程 yum -y install epel-release yum install python-pip pip install --upgrade pip

  2. C#闪动任务栏的方法

    用FlashWindowEx可以实现窗口的闪烁,结构如下: /// <summary> /// 闪烁窗口 /// </summary> /// <param name=& ...

  3. celery和supervisor配合使用,实现supervisor管理celery进程

    在这里我选择redis作为celery异步任务的中间人,系统选择CentOS6.5 64位.redis.celery和supervisor的安装参见官方文档. 安装完毕后: 1, 创建celery的实 ...

  4. 微信小程序之自定义组件与使用

    一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用. 组件导出的关键字是 exprot default 没有加default时,例如: export class Template ...

  5. 微软 Remote App

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://wangchunhai.blog.51cto.com/225186/201073 ...

  6. 利用memoize缓存到Redis出现多个参数同一个结果

    在为后端输出加入Redis缓存的过程中出现的问题. 在我利用Flask-restful架构的后端中,理所当然的利用装饰器marshal_with对我的返回数据进行格式化输出. 举个最简单的例子: fr ...

  7. 聊聊心跳机制及netty心跳实现

    我们在使用netty的时候会使用一个参数,ChannelOption.SO_KEEPALIVE为true, 设置好了之后再Linux系统才会对keepalive生效,但是linux里边需要配置几个参数 ...

  8. 安装wepack

    安装webpack之前要安装node.js 1.安装webpack运行 npm install webpack -g 和npm install webpack-cli -g npm install w ...

  9. HTTPRunner实践二——数据驱动

    基于文档http://cn.httprunner.org/advanced/data-driven/ 场景一:用例集+独立参数+参数列表 1.原始用例文件savePatient_01.yml - co ...

  10. 重启centOS丢失nginx.pid导致无法启动nginx的解决方法

    目录 找到nginx 找到nginx的配置文件 拼接命令,启动nginx Nginx指令拓展知识(中英对照): tags: centOS linux nginx categories: 服务器 找到n ...