关于前端:同源策略限制下Dom查询的正确打开方式

1.postMessage
window.postMessage() 是 HTML5 的一个接口，专一实现不同窗口不同页面的跨域通信。
为了演示不便，咱们将 hosts 改一下：127.0.0.1 crossDomain.com，当初拜访域名 crossDomain.com 就等于拜访 127.0.0.1。
这里是 http://localhost:9099/#/crossDomain，发消息方

 <div>
    <button @click="postMessage"> 给 http://crossDomain.com:9099 发消息 </button>
    <iframe name="crossDomainIframe" src="http://crossdomain.com:9099"></iframe>
  </div>
</template>

<script> export default {mounted () {window.addEventListener('message', (e) => {
      // 这里肯定要对起源做校验
      if (e.origin === 'http://crossdomain.com:9099') {
        // 来自 http://crossdomain.com:9099 的后果回复
        console.log(e.data)
      }
    })
  },
  methods: {
    // 向 http://crossdomain.com:9099 发消息
    postMessage () {const iframe = window.frames['crossDomainIframe']
      iframe.postMessage('我是[http://localhost:9099], 麻烦你查一下你那边有没有 id 为 app 的 Dom', 'http://crossdomain.com:9099')
    }
  }
} </script>

这里是 http://crossdomain.com:9099，接管音讯方

<template>
  <div>
    我是 http://crossdomain.com:9099
  </div>
</template>

<script> export default {mounted () {window.addEventListener('message', (e) => {
      // 这里肯定要对起源做校验
      if (e.origin === 'http://localhost:9099') {
        // http://localhost:9099 发来的信息
        console.log(e.data)
        // e.source 能够是回信的对象，其实就是 http://localhost:9099 窗口对象 (window) 的援用
        // e.origin 能够作为 targetOrigin
        e.source.postMessage(` 我是[http://crossdomain.com:9099]，我晓得了兄弟，这就是你想晓得的后果：${document.getElementById('app') ? '有 id 为 app 的 Dom' : '没有 id 为 app 的 Dom'}`, e.origin);
      }
    })
  }
} </script>

后果能够看到：

2.document.domain
这种形式只适宜主域名雷同，但子域名不同的 iframe 跨域。
比方主域名是 http://crossdomain.com:9099，子域名是 http://child.crossdomain.com:9099，这种状况下给两个页面指定一下 document.domain 即 document.domain = crossdomain.com 就能够拜访各自的 window 对象了。