javascript中父、子页面间调用

本文详细介绍了在网页开发中,父页面如何调用子页面以及子页面如何响应父页面调用的三种常见方式:使用window.open()、嵌入frame式调用和使用window.showModalDialog()。并提供了每种方式下的父子页面间交互示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

父页面调用子页面,目前我知道有三种,以后知道了再补充

第一种:采用window.open(),打开一个新窗口

第二种:采用嵌入frame式调用,比如:

      <iframe src="/**.jsp" width="100%" height=100% name="mapFrame"></iframe>

第三种:采用window.showModalDialog(),打开一个新窗口

       showModalDialog('/window.jsp', window,'dialogHeight:300px;dialogWidth:600px;status=off');

对第一情况,父子页面间的处理:

      父页面调用子页面

           子页面用window.open打开,调用方法为

            var aa = window.open();

            aa. child ();//child ()为子页面的方法

      子页面调用父页面

             window.opener . parent ()  // window.opener 实际上就是通过window.open打开的窗体的父窗体。

对第二情况,父子页面间的处理:

      父页面调用子页面

            mapFrame. child ();//mapFrame为父页面中frame的name值,child()子页面中方法

      子页面调用父页面

            Window.parent. parent ()

对第三情况,父子页面间的处理:

      父页面不能调用 子页面的方法

      子页面调用父页面

             window.dialogArguments. parent ();

JavaScript中,如果页面想要调用页面(通常是指嵌套在`<iframe>`、`window.open()`或者`document.domain`设置相同的域下的其他HTML文档)的方法,可以使用以下几种方法: 1. **通过`postMessage` API**: 页面可以通过`window.postMessage()`向页面发送消息,然后在页面的`window.onmessage`事件处理函数中接收并响应。例如: ```javascript // 页面 window.parent.postMessage({ action: 'callMethod', data: 'methodToCall' }, '*'); // 页面 (假设有个名为`handleMessage`的方法) window.addEventListener('message', function(e) { if (e.origin === 'http://parent.com') { // 检查来源 if (e.data.action === 'callMethod') { handleMethod(e.data.data); } } }); function handleMethod(methodName) { // 执行页面的方法 } ``` 2. **全局变量或命名空**: 如果页面允许,页面可以在其窗口作用域下设置全局变量,然后在页面中访问。但这不是推荐的做法,因为会增加污染。 3. **iframe通信**: 对于同源的`<iframe>`, 可以利用`contentWindow`属性直接访问到页面的`window`对象来调用方法,但这同样有安全限制。 4. **使用Web Workers**: Web Workers提供了一种异步计算的方式,但是它们并不能直接调用页面的方法,需要通过事件通信。 在所有这些情况下,注意遵守跨域规则以及安全性考虑。同时,尽量避免对页面的行为有过多的控制,以保持良好的模块化和分离原则。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值