iframe 自适应大小实现代码

跨域页面自适应：解决主页面a.html与iframe页面b.html的尺寸同步问题

在互联网开发中，经常需要在不同域的页面中通过iframe进行内容的嵌入。当嵌入的页面尺寸不固定且会变化时，如何使主页面中的iframe自适应成为了一个技术挑战。尤其当两个页面属于不同域时，JavaScript的跨域访问限制成为了解决问题的难点。下面，我们将深入这个问题及其解决方案。

设想我们有一个场景，在

为了解决这个问题，我们引入了一个中间代理页面c.html，它与a.html属于同一域。这个页面负责获取b.html的尺寸信息，并通过URL的hash值传递这些信息。然后，c.html根据这些信息调整iframe在a.html中的尺寸。

以下是具体的实现步骤：

1. 在a.html中嵌入b.html的iframe。设置初始宽度和高度为0，以便于后续动态调整。

```html

```

2. 在b.html中编写JavaScript代码，计算页面的宽度和高度，并通过修改中间代理页面c.html的src属性的hash值来传递这些信息。

例如：

```javascript

var b_width = Math.max(document.documentElement.clientWidth, document.body.clientWidth);

var b_height = Math.max(document.documentElement.clientHeight, document.body.clientHeight);

var c_iframe = document.getElementById("c_iframe");

c_iframe.src = c_iframe.src+""+b_width+"|"+b_height; //

```

这段代码会将计算得到的宽度和高度添加到c.html页面的URL的hash值中。

3. 在c.html页面中，通过JavaScript获取URL的hash值，并根据这个值调整iframe在a.html中的尺寸。这样，即使b.html的尺寸发生变化，也能通过这种方法实时地调整iframe的尺寸。

例如：

```javascript

var b_iframe = parent.parent.document.getElementById("b_iframe");

var hash_url = window.location.hash;

var hash_width = hash_url.split("")[1].split("|")[0]+"px";

var hash_height = hash_url.split("")[1].split("|")[1]+"px";

b_iframe.style.width = hash_width;

b_iframe.style.height = hash_height;

```

通过这种方式，我们成功地解决了跨域iframe的自适应问题。这种解决方案利用了中间代理页面的特性，巧妙地绕过了浏览器的同源策略限制。在实际开发中，如果遇到类似的跨域操作问题，也可以参考这种思路进行解决。