iframe框架页面中弹出窗口如何使用JS回调?

发布网友发布时间：2022-04-23 13:18

共1个回答

热心网友时间：2022-04-20 12:23

<html>
<head>
<script type="text/javascript">
function parent_click(){
alert("来自父页面");
}
</script>
</head>
<body>
<input type="button" value="调用本页面函数" onclick="parent_click();" />
<input type="button" value="调用子页面函数" onclick='window.frames["childPage"].child_click();' />
<iframe id="childPage" name="childPage" src="inner.html" frameborder="0"></iframe>
</body>
</html>

调用子页方法，用函数传参

第二种方法：
使用MessengerJS

在需要通信的文档中(父窗口和iframe们), 都确保引入MessengerJS
每一个文档(document), 都需要自己的Messenger与其他文档通信. 即每一个window对象都对应着一个, 且仅有一个Messenger对象, 该Messenger对象会负责当前window的所有通信任务. 每个Messenger对象都需要唯一的名字, 这样它们才可以知道跟谁通信.
Js代码

// 父窗口中 - 初始化Messenger对象
var messenger = new Messenger('Parent');

// iframe中 - 初始化Messenger对象
var messenger = new Messenger('iframe1');

// 多个iframe, 使用不同的名字
var messenger = new Messenger('iframe2');
在发送消息前, 确保目标文档已经监听了消息事件.
Js代码

// iframe中 - 监听消息
// 回调函数按照监听的顺序执行
messenger.listen(function(msg){
alert("收到消息: " + msg);
});
父窗口想给iframe发消息, 它怎么知道iframe的存在呢? 添加一个消息对象吧.
Js代码

// 父窗口中 - 添加消息对象, 明确告诉父窗口iframe的window引用与名字
messenger.addTarget(iframe1.contentWindow, 'iframe1');

// 父窗口中 - 可以添加多个消息对象
messenger.addTarget(iframe2.contentWindow, 'iframe2');
一切ready, 发消息吧~ 发送消息有两种方式. (以父窗口向iframe发消息为例)
Js代码
// 父窗口中 - 向单个iframe发消息
messenger.targets['iframe1'].send(msg1);
messenger.targets['iframe2'].send(msg2);

// 父窗口中 - 向所有目标iframe广播消息
messenger.send(msg);