关于iframe跨域传输

Michel_Rolle

发布于 2023-07-30 16:14:17

6740

发布于 2023-07-30 16:14:17

至于我为什么想写这篇文章是因为最近在项目中使用到了iframe，是的。生无可恋的又写上了一点js，可能是因为前端的人对单点登录啥的或者是页面跳转以及要和后端的逻辑处理起来不是很熟练吧。各大网站，包括淘宝，京东，这些大网站有很多自己的产品，至于前期是怎么样的不是很清楚，网易云至少是用的iframe。参考了一些博客，至于使用不使用iframe，我觉得能解决问题就好，而且如果考虑的多的话就考虑以后扩展以及拆分啥的，毕竟前端又不像后端这样。

因为要解决跨域问题。有很多方案，比如说iframe，jsonp(不过只支持get，对于一些铭感信息就不行了)

原本需求是登录在一个站点，而注册是另外一个站点。因为要实时反馈到iframe子页面，子页面在进行相应。

而在Windows对象下有个postMessage方法，是解决跨越问题的假设有两个不同源的页面，iframe.html和index.html 其中前者是后者的子页面。

<!-- index.html -->

<body>

  <h1>this is index</h1>

  <iframe src="./iframePage.html" id='iframe'></iframe>

</body>

<!-- iframePage -->

<body>

  <h1>this is iframePage</h1>

</body>

现在这两个是无法通信的，因为是不同的站点，所以这个时候就要用到postMessage

// idnex.html

//获取iframe元素,当然也可以使用其他的js框架
iFrame = document.getElementById('iframe')

//iframe加载完毕后再发送消息，否则子页面接收不到message
iFrame.onload = function(){

  //iframe加载完立即发送一条消息
  iFrame.contentWindow.postMessage('MessageFromIndex1','*');

}

我们知道postMessage是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息。

postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，因为没啥限制就设置为*，代表所有url都允许发送。

消息发送到iframePage.html，我们来接收message

// iframePage.html

//回调函数
function receiveMessageFromIndex ( event ) {
  console.log( 'receiveMessageFromIndex', event )
}

//监听message事件
window.addEventListener("message", receiveMessageFromIndex, false);

然后设置好回调函数，就可以了，data中或许还有其他的数值，所以在接受的时候判断一下。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-07-31，如有侵权请联系 cloudcommunity@tencent.com 删除

iframe