iframe嵌套页面 跨域_跨域解决方案

点击上方蓝色“后端开发杂谈”关注我们, 专注于后端日常开发技术分享

上一篇文章跨域资源共享我们讲到了, 在跨域访问的时候出现的问题, 以及基于跨域共享的方案解决跨域的问题, 那么还有没有其他的技术手段解决跨域的问题呢, 本篇文章一一列举解决跨域问题的所使用的技术手段.

跨域通信的解决手段大致分为两类:

• 一类是 Hack. 比如通过 

  title

  , 

  navigation

   等对象传递信息. JSONP可以说是最优秀的Hack.
• 另一类是HTML5支持. 一个是 

  Access-Control-Allow-Origin

   响应头, 一个是 

  window.postMessage

设置 document.domain

• 原理: 相同主域名不同子域名下的页面, 可以设置 

  document.domain

   让它们同域
• 限制: 同域 document 提供的是 

  页面间的互操作

  , 需要载入iframe页面.
• 案例:

下面几个域名的页面都是可以通过 

document.domain

 跨域操作的: 

http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar

. 但只能以页面嵌套的方式进行页面互操作, 比如常见的 

iframe

 方式完成页面的嵌套.

// URL http://a.com/foolet ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar';
ifr.onload = function(){let ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementById("foo").innerHTML;
};
ifr.style.display = 'none';document.body.appendChild(ifr);
           

注意: 上述代码所在的URL是 

http://a.com/fo

o, 它对 

http://b.a.com/bar

 的DOM访问要求后者将 

document.domain

 往上设置一级, 代码如下:

// URL http://b.a.com/bardocument.domain = 'a.com'
           

注: 

document.domain

 只能从子域设置到主域, 往下设置以及往其他域名设置都是不允许的.

具有 src 属性的标签

• 原理: 所有具有 

  src

   属性的HTML标签都是可以跨域的, 包括  ,  .
• 限制: 需要创建一个DOM对象, 只能用于GET方法.

在 

document.body

 中 

append

 一个具有 

src

 属性的HTML标签, 

src

 属性值指向的 URL会以GET方法被访问, 该访问是可以跨域的.

注: 其实样式表的 

 标签也是可以跨域的, 只要有 

src或href

 的HTML标签都有跨域的能力.

不同的HTML标签发送HTTP请求的时机不同. 

 在更改 

src

 属性时就会发送请求, 而 `