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