关于前端:同源策略限制下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对象了。