在同域的情况下,我们可与通过js代码来获得iframe对应的页面的高度,同时将高度传给父页面即可,若跨域则会报错,
document.getElementById(id).contentWindow
获得子页面的高度会后。父页面的就可以显示页面的实际高度和内容。
parent.window
跨域的特点:网页的协议(Protocol), 你的host(是否相同)就是指url的首部。
强调的是:url首部必须一样,比如:二级域名或者IP地址,都算是跨域.
其实跨域的高度自适应原理并不难,其中需要一个
代理页面
的来协调一下的数据的传输工作。
在子页面中建一个代理页面是第一步。在父页面中嵌套子页面,在子页面中嵌套一个与父页面的同域的代理的页面,因为父页面和代理页面是同域的,所以他们之间可以很容易实现通信。
子页面会定时将自己页面的高度赋值与代理页面的URL后,代理页面拿到自身URL的数据并传递给父页面,父页面改变子页面所在的iframe高度,进而达到iframe的高度自适应。
注意:
当然,要做到跨域高度自适应还有一个前提,你必须能操作子页面,也就是说子页面也是你能控制的,若是想把baidu.com作为子页面而达到高度自适应这个就无法实现了。
在子页面中添加代码:
* midway 页面高度自适应代码
* 在父页面iframe的src地址后加上midway_url作为线索
* 一可实现功能,二亦是实现动态加载js,实现此功能的通用
* midway_url 为需要嵌入目标页面实现功能的js地址
;
(
function
(
)
{
var
str_midway_url
=
"midway_url"
;
var
midway_reg
=
new
RegExp
(
str_midway_url
+
"=([^&]*)(&|$)"
)
;
var
midway_res
=
window
.
location
.
search
.
match
(
midway_reg
)
;
var
cookies
=
document
.
cookie
;
var
offset
=
cookies
.
indexOf
(
str_midway_url
)
;
var
midway_url
=
''
;
if
(
midway_res
)
{
midway_url
=
unescape
(
midway_res
[
1
]
)
;
document
.
cookie
=
str_midway_url
+
"="
+
midway_url
;
}
else
if
(
offset
!=
-
1
)
{
offset
+=
str_midway_url
.
length
+
1
;
var
end
=
cookies
.
indexOf
(
";"
,
offset
)
;
end
=
(
end
!=
-
1
)
?
end
:
cookies
.
length
;
midway_url
=
cookies
.
substring
(
offset
,
end
)
;
if
(
midway_url
)
{
var
dom_script
=
document
.
createElement
(
"script"
)
;
dom_script
.
src
=
midway_url
;
document
.
body
.
appendChild
(
dom_script
)
;
}
)
(
)
;
父元素父页面通过iframe标签引入子页面, 在子页面的URL后加上额外的一个参数
midway_url
。在子页面的js中加入以上代码,其核心代码为一个判断语句:若url或者cookie中存在此参数,则继续下一步,若不存在则不再继续。
一般的关于iframe的代码中,都是在子页面中通过iframe直接引入代理页面,会有以下弊端:
-
代码冗余。若是直接访问子页面,则子页面的代理页面便成了冗余代码。
-
缺乏灵活性。若是子页面还会被其他其他页面所访问,则再无法实现自适应功能。
通过URL参数将minway.js传至给子页面,子页面从此判断自己是否被引用了。子页面创建
某些页面因为某些关系需要自我刷新,使得URL中的参数丢失,故将midway_url存入cookie中持久化保存。
被引入子页面的midway.js代码