前奏

同源的iframe之间，可以通过window的属性进行传值。
- 如果页面A中，包含iframe页面B，A通过iframeB.contentWindow可以获取B页面window的属性值。
- 页面B可以通过window.parent获取A页面的window的属性值。

// ps 做此测试，需要将页面放置服务器，浏览器直接打开本地文件会报跨域错误
// 本地安装npm后，可在页面所在文件夹通过npx httpserver命令启动本地服务器
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    我是页面A
    <iframe src="./B.html"></iframe>
    <script type="text/javascript">
      var iframeB = document.getElementsByTagName('iframe')[0];
      
      iframeB.onload = function () {  // 通过onload事件，等页面加载完了才可以获取被加载页面的属性
        console.log(iframeB.contentWindow.x); // b-x
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    我是页面B
    <script type="text/javascript">
      window.x = 'b-x';
    </script>
  </body>
</html>

iframe如果和所在页面不同源，可以正常载入页面，但是通过iframe.contentWindow或window.parent获取属性值时，会报跨域错误

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    我是页面A
    <iframe src="http://localhost:8081/test1.html"></iframe>
    <script type="text/javascript">
      var iframeB = document.getElementsByTagName('iframe')[0];
      
      iframeB.onload = function () {
        console.log(iframeB.contentWindow); // 运行结果见下图
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    我是页面test1
    <script type="text/javascript">
      window.x = 'test1-x';
    </script>
  </body>
</html>

不同源页面之间，在同一窗口发生跳转时，可以共享window.name属性。
- 如页面A跳转到页面test1，但是没有打开新窗口，此时页面B将能获取到页面A中定义的window.name属性值。
- ps：只有name属性值可以共享，其他自定义属性值无法共享。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    我是页面A <br />
    <a href="http://localhost:8081/test1.html" target="_self">跳到页面B</a>
    <script type="text/javascript">
      window.name = 'a-x';  
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    我是页面test1
    <script type="text/javascript">
      console.log(window.name);
    </script>
  </body>
</html>

跨域 1 服务器中转

适用于ajax请求
服务器没有跨域的影响，因此可以通过此方法解决

跨域 2 iframe

对于根域名相同、二级域名不同的网站，可以通过iframe载入目标网站，通过iframe.contentWindow获取到目标网站的ajax工具对象或目标网站的xhr对象(xhr方式未验证，理论上可行)，然后再发起请求可以达到跨域的目的。
前提需要将不同源网站的domain都赋值相同的一级域名。一级域名需要是当前网站的一级域名。

扩展参考：https://blog.csdn.net/nlznlz/article/details/79506655

跨域 3

想要获取不同源的iframe的contentWindow值，可以将iframe的页面进行跳转，跳转到和父页面相同源的网站，iframe跳转时，通过window.name进行传值。最终父页面可以获取到同源子页面的contentWindow的值。

跨域 4

不同源页面通过postmessage和onmessage进行解决

跨域5

通过iframe + loaction 将iframe页面的数据，通过url传递给同源页面。

image.png

跨域6

后端配置Access-Control-Allow-Origin:* 或指定网站

总结

3 + 4
JSONP
服务器：中转；配置Access；
iframe：iframe+domain(子域名跨域)；iframe+window.name；iframe+url参数；iframe+postmessage/onmessage；

疑问2

可能会涉及到跨域的场景 ajax请求、iframe通过contentWindow获取子页面的值
解决跨域的方式
1 通过服务器代理请求目标网站
2 服务器设置access control allow origin
3 jsonp
4 ????

疑惑1

如何去掉options
cache-control是默认的吗？
-1. 服务器如何知晓返回的文件类型或语言和accept希望的不一致，从而返回406.

为什么刷新任何一个网站的时候，都没有304，而是200
tcp是可靠的连接，是否可以基于tcp直接传输数据，不经过http等协议
四次挥手如果是服务器发起流程是怎样
2.1 时间线的开始阶段是发生在TCP/IP断开连接之前发生的我这样理解有问题吗？
当HTML页面被下载下来后，就立马进入时间线流程了，但TCP/IP四次挥手是要等http请求结束后才会触发的因此时间线的开始要早于四次挥手
http一定是基于tcp？客户端cs架构一般用的什么协议？
post请求时，会在tcp第三次握手时，先将请求头传输到服务器，服务器返回100后，客户端继续请求，为什么浏览器看不到100？
验证网速特别慢时，是否会等图片加载结束后，才执行onload
how browser work
下图为什么没有406