vue 项目监听iframe传过来的信息

vue 项目监听

window.addEventListener('message', this.handleMessage)
// 获取iframe传过来的信息
handleMessage (event) {
 // event表示iframe传过来的信息
 // console.log(event)
}

iframe页面传递

 sendMessage(content){
             window.parent.postMessage({
             content
            }, '*'); // * 通配符 匹配所有地址; content 表示传递过去嵌套iframe页面的数据
        },
Vue3监听IFrame地址的变化,通常需要利用`IntersectionObserver`API或者事件代理技术。由于IFrame是嵌入到当前页面的另一个域下的文档,直接操作其内容可能会受限,特别是对于跨域情况。 以下是一个简单的示例,展示了如何使用`IntersectionObserver`来观察IFrame是否进入视口,然后触发地址改变的处理: ```javascript <template> <div> <iframe ref="iframeRef" :src="iframeSrc" @load="handleIframeLoad"></iframe> </div> </template> <script setup> import { ref, onMounted } from &#39;vue&#39;; const iframeRef = ref(null); let lastSrc; onMounted(() => { // 初始化观察者 const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { // 当IFrame进入视图时,检查地址变化并更新监听 if (lastSrc !== iframeRef.value.src) { handleAddressChange(iframeRef.value.src); } lastSrc = iframeRef.value.src; } }); // 添加观察 observer.observe(iframeRef.value); // 初始化地址 handleAddressChange(iframeRef.value.src); // 可能需要添加此行 }); function handleAddressChange(newSrc) { // 处理新地址,比如更新组件状态或触发其他业务逻辑 console.log(&#39;IFrame address changed:&#39;, newSrc); } function handleIframeLoad() { // 针对IFrame load事件,可以在此处初始化观察者 } </script> ``` 请注意,这只是一个基本示例,实际应用中还需要考虑浏览器兼容性和安全性问题,例如跨域请求。如果需要在内部通信(父子组件间),可能需要借助postMessage API。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值