前端开发，面试笔试题学习---通信/原理02

1、跨域方面：iframe/cookie

cookie:cookie式服务器写入浏览器的一小段信息。只有同源的网页才能共享。但是两个网页一级域名相同。只是二级域名不同浏览器允许通过设置document.domain共享cookie。

举例来说，A网页是http://w1.example.com/a.html ，B网页是http://w2.example.com/b.html，那么域名相那么只要设置相同的document.domain，两个网页就可以共享cookie。

document.domain = 'example.com';

现在A网页通过一个脚本设置一个cookie

document.cookie = "test1=hello";

B网页就可以读到这个cookie

var allCookie = document.cookie;

注意：这种方式只适用于cookie和iframe窗口，localstorage和indexDB无法这种效果规避同源策略，而要使用postmessageAPI。

另外：服务器可以在设置cookie的时候，指定cookie所属域名为以及域名，例如：example.com。

Set-Cookie: key=value; domain=.example.com; path=/

这样的话二级三级域名不用做任何设置就可以直接读取这个cookie。

iframe:

如果两个页面不同源，就无法拿到对方的dom。最典型的例子就是iframe和window.open打开的窗口。他们与父窗口无法通信。

例如：父窗口运行下面的命令，如果iframe不是同源就会报错。

document.getElementById("myIFrame").contentWindow.document
// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

上面命令中，父窗口想要获取子窗口的DOM，因为跨源导致错误。

反之亦然，子窗口获取主窗口的 DOM也会出错。

window.parent.document.body
// 报错

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节的domain属性就可以规避同源政策。拿到DOM。