父/子页面方法调用

父页面/子页面相互调用关系(三种情况):

 

1.父页面采用window.open()方式打开子页面

【父页面调用子页面】

var child = window.open(); // child为子页面对象

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

【子页面调用父页面】

window.opener.method(); // opener为父页面对象,method为父页面方法

 

2.父页面采用window.showModalDialog()方式打开子页面

【父页面调用子页面】

父页面只能取到子页面的返回对象

(父)var child = window.showModalDialog(url); // child为子页面关闭后返回给父页面的对象

(子)window.returnValue= obj; // obj为返回给父页面的对象

【子页面调用父页面】

window.dialogArguments.obj; // obj为父页面对象

window.dialogArguments.method(); // method为父页面方法

 

3.父页面潜入iframe方式(<iframe src="child.html" name="childFrame" width="100" height="100" />)

【父页面调用子页面】

childFrame.method(); // childFrame为iframe的name,method为子页面的方法

【子页面调用父页面】

window.parent.method(); // method为父页面方法

 

 

 

 

在jQuery中,通常情况下,页面方法不能直接被父页面调用,因为它们属于不同的DOM文档。但可以通过几种方式实现跨页面的交互。 一种常见的方法使用`window.postMessage`方法进行跨文档通信(Cross-document messaging)。这是一种在不同源之间安全传递信息的方式。父页面可以向页面发送消息,然后页面在接收到消息后可以执行相应的方法。 具体实现步骤如下: 1. 确保父页面页面的协议、域名和端口号相同,或者父页面有权向页面发送消息。 2.页面中设置一个消息监听函数,用于监听从父页面发送过来的消息,并根据消息内容执行相应的方法。 3.父页面中,使用`postMessage`方法页面发送消息。 示例代码如下: 页面(child.html): ```javascript // 设置消息监听器 window.addEventListener("message", receiveMessage, false); // 定义消息处理函数 function receiveMessage(event) { // 确保消息来源是可信的 if (event.origin !== "http://父页面地址") { return; } // 根据接收到的消息执行相应的方法 if (event.data.type === "callMethod") { // 调用页面方法 childMethod(event.data.payload); } } // 页面的一个方法示例 function childMethod(payload) { console.log("页面方法调用", payload); } ``` 父页面: ```javascript // 获取页面window对象 var childWindow = window.open("child.html"); // 定时向页面发送消息 setInterval(function() { childWindow.postMessage({ type: "callMethod", payload: { data: "来自父页面的消息" } }, "http://页面地址"); }, 2000); ``` 使用`postMessage`进行跨页面通信时,应确保通信的安全性,比如验证消息来源和内容的合法性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值