最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
iframe框架自适应高度多种方法介绍
时间：2013-04-12 编辑：简简单单 来源：一聚教程网
HTML代码：
| 代码如下 | 复制代码 |
|
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" > |
|
Javascript代码：
| 代码如下 | 复制代码 |
|
|
|
代码二
在包含Iframe的页面：
| 代码如下 | 复制代码 |
然后在每个要在Iframe中显示的页面上，
| 代码如下 | 复制代码 |
然后在页面底部加入
| 代码如下 | 复制代码 |
|
|
|
同域下的iframe自适应高度
同域下父页面内的js能获取到iframe页面的高度，所以在iframe加载完后获取下高度就行了
| 代码如下 | 复制代码 |
如果是同一个域名下的不同子域，设置下document.domain就行了
IE6和IE7中的iframe没有contentDocument属性，而且如果iframe里的页面在同域下的不同子域,通过iframe.Document.documentElement.scrollHeight获取到的高度是错误的，所以还是建议用 iframe.contentwindow.document来获取高度（added at 2010-03-22）
2.跨域下的iframe自适应高度
跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度。需要一个页面来做代理。
方法如下：假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html。
我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度。
a.html中包含iframe:
| 代码如下 | 复制代码 |
在c.html中加入如下代码：
| 代码如下 | 复制代码 |
|
|
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31