iframe内嵌网页通知父页面事件
实现iframe内嵌网页通知父页面事件的前提条件如下：
-
同源策略（Same-Origin Policy）：父页面和子页面必须遵守浏览器的同源策略。同源策略要求网页只能访问和与其加载的网页来自同一个域名、协议和端口号。只有当父页面和子页面具有相同的域名、协议和端口号时，才可实现跨页面通信。
-
iframe设置：在父页面中，必须正确设置和加载iframe元素以嵌入子页面。确保iframe元素的src属性指向子页面的URL，并设置合适的宽度和高度以适应子页面的内容。
-
合作通信机制：父页面和子页面必须协调使用一种通信机制来实现跨页面通信。常见的通信机制包括：
a) 全局函数或对象：父页面在全局作用域中定义一个用于接收子页面通知的全局函数或对象。子页面可以通过JavaScript获取对父页面的引用，并调用父页面的函数或对象来通知事件的发生。
b) postMessage API：父页面和子页面可以使用postMessage API来跨页面通信。postMessage允许页面在没有同源限制的情况下相互通信，通过使用postMessage发送和接收消息来实现事件通知。
c) 第三方库或框架：使用第三方库或框架来处理页面间通信，如jQuery、Vue.js、React等。这些库或框架提供了更高级和方便的方法来处理跨页面通信，使得实现父子页面间事件通知更加简洁和可维护。
确保满足以上前提条件，才能在iframe内嵌网页中通知父页面事件。
下面通过postMessage方法来实现。
首先，在iframe内嵌的网页中，需要定义一个事件，当需要通知父页面时触发该事件。例如，在点击按钮时触发事件：
// 在iframe内嵌的网页中
<button onclick="notifyParent()">通知父页面</button>
<script>
function notifyParent() {
// 通知父页面
window.parent.postMessage('message', '*');
}
</script>
然后，在父页面中，可以通过监听message事件来接收来自iframe内嵌网页的通知：
// 在父页面中
window.addEventListener('message', function(event) {
// 接收来自iframe内嵌网页的通知
if (event.origin === 'http://example.com') { // 根据需要设置合适的origin
console.log('收到来自iframe内嵌网页的通知:', event.data);
}
});
在上述代码中，通过调用postMessage方法可以向父页面发送消息。第一个参数是要发送的消息，可以是任何类型的数据。第二个参数是目标窗口的源(origin)，即父页面的地址。在父页面中，通过监听message事件，可以获取来自iframe内嵌网页的消息。可以通过event.data获取消息内容，event.origin获取消息的源(origin)。
请注意，为了安全起见，应该根据需要设置合适的origin，以防止非法网站发送恶意消息。
原文地址：https://blog.csdn.net/qq_44848480/article/details/143671618
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！