在开发中，偶尔会遇到需要在一个页面之中嵌套调用不同域名的项目进行展示，这时候就有一个问题，调用另外的项目的时候会需要一些参数，或者说是某些验证规则，但是我们的url传参又是有限制的，很多时候并不能完整的传过去我们需要的所有数据，所以在这里讲一下如何进行iframe父页面对子页面的参数传递（通信）
父页面代码
1、html部分
<iframe src="https://xxx.xxx.xx" ref="Frame" scrolling="auto"></iframe>
2、方法
let Frame = this.$refs["Frame"]; //这里是过去DOM，我这里是vue获取方法，其他获取DOM请自行替换var obj = this.$store.state.token; //想要传的参数（我这里用的是vuex中保存的token）if (Frame.attachEvent) {//兼容浏览器判断Frame.attachEvent("onload", function() {let iframeWin = Frame.contentWindow;iframeWin.postMessage(obj, ‘https://xxxx.xx.xx’);//obj传递的参数 https://xxxx.xx.xx写成子页面的域名或者是ip});} else {Frame.onload = function() {let iframeWin = Frame.contentWindow;iframeWin.postMessage(obj, ‘https://xxxx.xx.xx’);};}
请注意如果是弹窗模式请在弹窗加载完成之后获取dom，否则获取不到，在vue中可以改为
this.$nextTick(() => {let Frame = this.$refs["Frame"];var obj = this.$store.state.token;if (Frame.attachEvent) {//兼容浏览器判断Frame.attachEvent("onload", function() {let iframeWin = Frame.contentWindow;iframeWin.postMessage(obj, ‘https://xxxx.xx.xx’);//obj传递的参数 https://xxxx.xx.xx写成子页面的域名或者是ip});} else {Frame.onload = function() {let iframeWin = Frame.contentWindow;iframeWin.postMessage(obj, ‘https://xxxx.xx.xx’);};}});
子页面代码
// event.data &&typeof event.data === 'string' 是用来判断是否是我需要传过来的参数//不明白的可以自行打印一下event.data//判断是否是嵌套页面 window.self !== window.topwindow.onmessage = function(event) {if (event.data &&typeof event.data === 'string' &&window.self !== window.top) {console.log(event.data) //这里是数据的处理逻辑}}
其中window.onmessage可以改成如下方式
window.addEventListener( 'message', (e) => {}),
ok完毕，希望对大家有用
