1:目前需求需要在页面中嵌入一个外部页面,同时页面实现跨域通信。
1:思路是利用postMessage来实现交互。
2:使用window.addEventLister去接收消息
3:利用iframe的window去发送消息,(但是这里获取iframe的window时 会存在跨域的问题,所以采用了nginx代理,本来是解决跨域,却报跨域错误,后来又莫名其妙的好了,对了,我把sonarlint给关掉了,不知道和这个是否有关系,但是的确很奇怪。同时我又去了解了一个document.domain.可以用来解决相同域名不同端口之间的跨域,和有公共上级域名的情况)
可以参考:
https://blog.csdn.net/huzhenv5/article/details/104884760
4:otherWindow.postMessage(message, targetOrigin);
targetOrigin:指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI。
2:代码实现(Vue)
nginx配置中
location /balabala/ {
proxy_pass https://www.jianshu.com/
}
//接收消息
window.addEventListener('message',getMessage);
const getMessage=(e:MessageEvent)=>{
console.log(e);
}
//发送消息
const iframe = ref(null);
iframe.contentWindow.postMessage({code:'submit'},location.href);
3:问题分析
1:
unexpected token o in JSON at position 1
出现这个问题的原因是刚开始没有使用代理,无法获取到iframe的content.window
【信息由网络或者个人提供,如有涉及版权请联系COOY资源网邮箱处理】
© 版权声明
本平台(www.cooy.cn)的一切软件、教程及内容信息仅限用于学习和研究,付费仅为收集整理归类费用;
不得将上述内容用于商业或者非法用途,否则一切后果用户自行承担负责。本平台资源、内容、信息均来自来自用户上传,版权争议及其他问题与本平台无关。
您必须在下载后的24个小时之内从您的电脑或手机中彻底删除上述下载内容,如果您喜欢该程序或内容,请支持正版以获取更好的服务。我们非常重视版权问题,如有侵权请发送邮件至下方邮件(655465@qq.com),敬请谅解!
如发现违法违规内容,请联系下方邮箱举报,我们收到后将会第一时间处理。
THE END
暂无评论内容