前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题
刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码
<body onload="javascript: setHeight();">
<script>
function setHeight(){
var dHeight = document.documentElement.scrollHeight;
var t = document.createElement("div");
t.innerHTML = '<iframe id="kxiframeagent"
src="http://xxxx.kaixin001.com/xxx/xxx.html#'+dHeight+'"
scrolling="yes" height="0px" width="0px"></iframe>';
document.documentElement.appendChild(t.firstChild);
}
</script>
我想着跨域如何解决啊!后来去网上搜索了一下子 恍然大悟
具体如下 我是复制过来了 大家重点理解一下子它的实现思路 ：
iframe跨域自适应
问题:
A域名下的页面a.htm中通过iframe嵌入B域名下的页面b.html,由于b.html的大小等是不可预知而且会变化的,所以需要 a.htm中的iframe自适应大小.
问题本质 :
js的跨域问题,因为要控制a.htm中iframe的大小就必须首先读取得到b.html的大小,A、B不属于同一个域,js的访问受限,读取不到b.html的大小.
解决方案:
首先前提是A，B是合作关系,b.html中能引入A提供的js
首先a.html中通过iframe引入了b.html
Html代码
1
.
<
iframe id
=
"
aIframe
"
height
=
"
0
"
width
=
"
0
"
2
. src
=
"
http://www.b.com/html/b.html
"
frameborder
=
"
no
"
border
=
"
0px
"
marginwidth
=
"
0
"
3
. marginheight
=
"
0
"
scrolling
=
"
no
"
allowtransparency
=
"
yes
"
><
/
iframe>
<
iframe id
=
"
aIframe
"
height
=
"
0
"
width
=
"
0
"
src
=
"
http://www.b.com/html/b.html
"
frameborder
=
"
no
"
border
=
"
0px
"
marginwidth
=
"
0
"
marginheight
=
"
0
"
scrolling
=
"
no
"
allowtransparency
=
"
yes
"
><
/
iframe>
B在b.html中引入了A提供的js文件
Html代码
1
.
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
src
=
"
http://www.a.com/js/a.js
"
><
/
script>
<
script language
=
"
javascript
"
type
=
"
text/javascript
"
src
=
"
http://www.a.com/js/a.js
"
><
/
script>
该js首先读取b.html的宽和高,然后创建一个iframe,src为和A同一个域的中间代理页面a_proxy.html,吧读取到的宽和高设置到src的hash里面
Html代码
1
.
<
iframe id
=
"
iframeProxy
"
height
=
"
0
"
width
=
"
0
"
src
=
"
http://www.a.com/html/a_proxy.html#width|height
"
style
=
"
display:none
"
><
/
iframe>
<
iframe id
=
"
iframeProxy
"
height
=
"
0
"
width
=
"
0
"
src
=
"
http://www.a.com/html/a_proxy.html#width|height
"
style
=
"
display:none
"
><
/
iframe>
a_proxy.html是A域下提供好的中间代理页面,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽和高.
Js代码
1
.
var
pParentFrame
=
parent.parent.document.getElementById(
"
aIframe
"
);
2
.
var
locationUrlHash
=
3
. parent.parent.frames[
"
aIframe
"
].frames[
"
iframeProxy
"
].location.hash;
4
. pParentFrame.style.width
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
0
]
+
"
px
"
;
5
. pParentFrame.style.height
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
1
]
+
"
px
"
;
var
pParentFrame
=
parent.parent.document.getElementById(
"
aIframe
"
);
var
locationUrlHash
=
parent.parent.frames[
"
aIframe
"
].frames[
"
iframeProxy
"
].location.hash;
pParentFrame.style.width
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
0
]
+
"
px
"
;
pParentFrame.style.height
=
locationUrlHash.split(
"
#
"
)[
1
].split(
"
|
"
)[
1
]
+
"
px
"
;
这样的话a.html中的iframe就自适应为b.html的宽和高了.
分享到：
相关推荐
这是关于iframe使用过程中出现的问题整理的解决方法，关于使用iframe不用单独写接口打通数据，直接把数据通过ifarme嵌套方法传递过去，使用简单方便。
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能，其中包括： 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
页面域关系： 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
有个在线例子，访问地址：http://okiner.cn/demo/cross-domain/iframe.html，这是源码，方便下载
iframe 跨域 自动适应高度；iframe 跨域 自动适应高度；
页面域关系： ...实现效果： ...js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b
介绍： 填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。
Iframe自适应高度一直都备受关注，接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应，感兴趣的朋友可以参考下哈
有个在线例子，访问地址：http://okiner.cn/demo/cross-domain/iframe.html，这是源码，方便下载
随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用 户操作带来不便。于是自动调整iframe的高度就成为本文的重点。 采用JavaScript...
最近在做项目中，遇到一个问题，就是iframe高度的自适应问题，以下是解决办法
iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题