iframe 自适应大小实现代码

所属分类: 网页制作 / HTML/Xhtml 阅读数: 2135
收藏 0 赞 0 分享
页面域关系:

主页面a.html所属域A:www.jb51.net
被iframe的页面b.html所属域B:www.jb51.cn,假设地址:http://www.jb51.cn/b.html

实现效果:

A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小.

问题本质:

js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.html的高度和宽度.

解决方案:

引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.jb51.net/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.

代码如下:

a.html代码

首先a.html中通过iframe引入了b.html
<iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.jb51.cn/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe>

b.html代码

复制代码
代码如下:

<script type=”text/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; //https://www.jb51.net/c.html#width|height”
}
</script>
<!–js读取b.html的宽和高,把读取到的宽和高设置到和a.html在同一个域的中间代理页面车c.html的src的hash里面–>
<iframe id=”c_iframe” height=”0″ width=”0″ src=”https://www.jb51.net/c.html” style=”display:none” ></iframe>

c.html代码

复制代码
代码如下:

<script type=”text/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;
</script>

a.html中的iframe就可以自适应为b.html的宽和高了.

其他一些类似js跨域操作问题也可以按这个思路去解决
更多精彩内容其他人还在看

html悬浮框架的设置使用示例(iframe加载html)

这篇文章主要介绍了html悬浮框架的设置使用示例(iframe加载html),需要的朋友可以参考下
收藏 0 赞 0 分享

html多媒体应用之网页中插入flash动画、插入音乐

这篇文章主要介绍了html中多媒体的应用之网页中插入Flash动画、插入音乐,需要的朋友可以参考下
收藏 0 赞 0 分享

html网页插入图片、加入地图索引示例讲解

这篇文章主要介绍了html网页插入图片、加入地图索引示例讲解,需要的朋友可以参考下
收藏 0 赞 0 分享

html无序列表标签和有序列表标签使用示例

这篇文章主要介绍了html无序列表标签和有序列表标签使用示例,需要的朋友可以参考下
收藏 0 赞 0 分享

html body标签详解与html常用的控制标记

这篇文章主要介绍了html body标签详解与html常用的控制标记 ,需要的朋友可以参考下
收藏 0 赞 0 分享

html文档基本结构(制作网页基础知识)

这篇文章主要介绍了html文档基本结构,也就是制作网页的基础知识,明白这些才可以做更好的网页,需要的朋友可以参考下
收藏 0 赞 0 分享

a标签怎么去下划线以及实现点击前和点击后不变色

a标签在网页中经常会用到,其默认有下划线和点击前和点击后变色,现在的需求是如何让其不带下划线,以及点击不变色,下面有个不错的教程,大家可以参考下
收藏 0 赞 0 分享

使用iframe实现提交表单不刷新页面

正常情况下,当你向服务器发送数据的时候,你的浏览器将会打开ACTION页面,并且不会重回到当前页面。但是有的时候,我们因为各种各样的要求,而不希望浏览器在提交数据的时候去刷新当前的页面或者转向到新的页面
收藏 0 赞 0 分享

在页面中调用搜索引擎以调用百度为例

在自己的页面中调用google、百度这样强大的搜索引擎想必很酷,经搜索还真有,下面是调用百度的一个代码段
收藏 0 赞 0 分享

form的默认提交方式修改方法

html的默认提交方式为get而不是post,如果想变成post必须修改,不知道的朋友可以了解下本文
收藏 0 赞 0 分享
查看更多