实战iframe嵌套页面如何进行参数传递

大家好，欢迎来到IT知识分享网。

在开发中，偶尔会遇到需要在一个页面之中嵌套调用不同域名的项目进行展示，这时候就有一个问题，调用另外的项目的时候会需要一些参数，或者说是某些验证规则，但是我们的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.top
window.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完毕，希望对大家有用