利用location.hash实现跨域iframe自适应

跨域问题一直是Web开发中一个难以解决的问题，它主要是由于浏览器同源策略限制导致的。同源策略是浏览器的一种安全机制，其含义是，一个域下的脚本只能访问同一个域下的资源。本文将介绍如何利用location.hash属性来解决跨域iframe自适应高度的问题，同时通过这个方法，我们还可以解决其他相似的跨域JS操作问题。 让我们来了解什么是同源策略和跨域。同源策略要求，如果两个页面拥有相同的协议、域名和端口，那么这两个页面才被认为是同源的。当一个域下的页面试图访问另一个域下的资源时，就会出现跨域的问题。例如，当页面a.html（位于域***）尝试通过iframe加载b.html（位于域***）时，就会遇到跨域限制。 由于同源策略的限制，a.html中的JavaScript代码无法直接获取到b.html的尺寸信息，这就使得在b.html的尺寸动态变化时，无法及时调整a.html中的iframe的尺寸以自适应b.html。为了解决这个问题，我们可以引入一个同源的代理页面c.html，它将负责从b.html的hash中读取尺寸信息，然后将这些信息设置给a.html中的iframe。 具体实现方法如下： 1. 在a.html中嵌入一个隐藏的iframe，其src属性指向c.html，并设置其尺寸为0。 2. 在b.html中，使用JavaScript计算其自身的宽度和高度，然后将这些值编码到hash中，并通过改变c.html的src属性来更新这个hash值。 3. c.html中的JavaScript代码将解析b.html中传入的hash值，提取宽度和高度信息，并设置给a.html中的目标iframe，使iframe能够根据b.html的尺寸进行自适应。 这种利用location.hash来实现跨域通信的方法，可以有效解决同源策略带来的限制。通过改变一个iframe的src属性来传递消息（实际上是通过改变浏览器地址栏的hash值），另一个iframe或者同源页面可以监听这个地址的变化，并从中读取信息。 需要注意的是，hash值的改变不会触发浏览器的跳转，所以这是一种安全的方式，可以在不违反同源策略的情况下进行跨域数据交换。一旦c.html获得了尺寸信息，它就可以修改a.html中另一个iframe的尺寸，从而实现了跨域iframe的自适应。 除了解决跨域iframe自适应问题，同样的原理也可以应用于其他跨域交互场景。例如，跨域数据请求、跨域事件触发等。关键点在于利用hash值变化这一特性，通过中间代理页面进行数据的接收和传递。 关于“其他一些类似js跨域操作问题也可以按这个思路去解决”，可以理解为，凡是涉及跨域资源共享（CORS）的场景，都可以尝试使用类似的方法来解决。例如，服务器端设置正确的CORS策略，或者在客户端使用JSONP等技术，都是可以考虑的方案。 文章中提到的“如果不是跨域访问”，可以考虑直接通过父窗口访问子iframe的方式获取尺寸信息，或者使用其他一些不受CORS限制的跨域技术。在实际开发中，需要根据具体情况选择合适的方案，以实现不同域之间的有效沟通和数据交换。