跨域方法之降域与postMessage

当我们的HTML页面中用iframe嵌套另一个页面时，在默认情况下浏览器出于安全考虑是不允许我们通过JS来操作iframe中的元素的。

我们可以通过以下方法来使JS能够操作iframe中的元素

降域

我们知道符合以下三条的URL才算是同源

• 端口相同
• 域名相同
• 协议相同

如果我们有一个页面为a.nameless.com/a.html，嵌套了一个src为b.nameless.com/b.html的iframe。

在这种情况下我们是无法操作iframe的元素的，很显然他们的域名不同。

但是我们可以通过降域的方法使他们域名相同。

document.domain = 'nameless.com'

在两个页面中分别写下如上代码，通过降域实现域名相同。

此时我们便可以通过JS来操控同源的iframe中的元素了。

postMessage

如果两个页面无法实现降域，比如a.nameless.com肯定是无法通过降域方法来和b.wuming.com来实现同源的。

此时我们可以通过postMessage方法来实现跨域

window.frames[0].postMessage(something,'*')
// 通过postMessage发送数据
// *表示任何域都可以接受这个数据

// 接受并处理数据
window.addEventListener('message',function(e){
  console.log(e.data)
})

代码如上