iframe同域跨域高度自适应的实现
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章收集大量的关于iframe同域跨域高度自适应的实现程序代码，下面我来给大家介绍介绍。...
|
本效果的实现需要父页面和子页面都需要作相应的设置
以下是具体的设置及代码
一、父层页面的设置
1、是父层的iframe引入
| 代码如下 |
复制代码 |
|
<iframe frameborder="0" scrolling="no" width="100%" src="iframe.html" id="paopaowang"></iframe>
|
2、父层要设计一个域名的变量 domain
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
document.domain = "aqy106.com";
</script>
|
二、包含的iframe的设置
在这个页面里，你需要给你的body或用一个容器将iframe中的所有元素包裹，然后添加一个个id
1.id="bodybox"
然后再添加以下的脚本代码，其中要注意的是 document.domain = “aqy106.com”; 这里的域名要设置成和父层一样的域名
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
document.domain = "aqy106.com";
function reSetHeight(h, scl) {
if (!top.document.getElementById("paopaowang")) return;
with (top.document.getElementById("paopaowang")) {
if (offsetHeight != h) {
style.height = h + 'px';
}
}
top.document.body.style.height = top.document.body.scrollHeight;
if (!scl) {
if (top.document.documentElement.scrollTop) top.document.documentElement.scrollTop = 0;
if (top.document.body.scrollTop) top.document.body.scrollTop = 0;
}
h=document.getElementById("bodybox").offsetHeight;
with (top.document.getElementById("paopaowang")) {
if (offsetHeight != h) {
style.height = h + 'px';
}
}
}
window.onload=function(){
reSetHeight(document.getElementById("bodybox").offsetHeight);
}
</script>
|
至此已全部完成，具体代码已很简单明了，可以自行修改和分析，各位具体可以尝试将代码放到同域或不同域中尝试。
但该脚本也有不完美的地方，就是如果iframe页面中有脚本进行操作，改变了iframe页面的高度，父层的页面的iframe的高度无法自动适应，也就只能实现浏览器初次载入能成功获取iframe的高度和加载高度，但在firame中的操作时父层无法实时的适应高度，所以还是有改进的地方的，以后将继续完善。
其它站长提供的方法
关键代码：
iframe主页面：main.html
| 代码如下 |
复制代码 |
|
<iframe id="iframeB" name="iframeB" src="www.b.com/B.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
|
iframe嵌套页面：B.html
| 代码如下 |
复制代码 |
|
<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
hashH = document.documentElement.scrollHeight; //获取自身高度
urlC = "www.a.com/A.html"; //设置iframeA的src
document.getElementById("iframeA").src=urlC+"#"+hashH; //将高度作为参数传递
}
window.onload=sethash;
</script>
|
中介页面：A.html
| 代码如下 |
复制代码 |
|
<script>
function pseth() {
var iObj = parent.parent.document.getElementById('iframeB');//A和main同域，所以可以访问节点
iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//访问自己的location对象获取hash值
iObj.style.height = iObjH.split("#")[1]+"px";//操作dom
}
pseth();
</script>
|
跨域方法
实现原理：比如现在有两个网站域名分别为A.com; B.com; A网站有个Iframe，需要把B网站放到该Iframe中，但是Iframe的高度 得先获取B网站的页面高度，然后根据所获取的高度来修改A网站Iframe的高度值。 1： 是要在B网站（即下属网站）获取自己的页面的高度， 2：B网站没权限修改A网站的高度，需要一个中间页面，该中间页面可以修改A网站的高度，so.这个中间页面必须与A网站在同一个域下。
A网站的关键代码：
| 代码如下 |
复制代码 |
|
<iframe id="iframepage" name="iframepage" frameborder="0" scrolling="no" width="100%" src="@ViewData["urlstr"]">
</iframe> //src是B网站的页面地址
|
B网站的关键代码：
在B网站下也加一个iframe,该iframe是为了导向A网站的中间页面，从而改掉A网站的Iframe高度。
| 代码如下 |
复制代码 |
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(function () {
hashH = document.documentElement.scrollHeight;
urlC = "http://www.:9001/Home/Agent"; //为A域名的中间页面，此处一定要用域名，不能用Ip
document.getElementById("MiddleIframe").src=urlC+"#"+hashH;
});
</script>
</head>
<body>
<div class="topTitle">
.....
</div>
@RenderBody()
<iframe id="MiddleIframe" name="MiddleIframe" src="http://www.:9001/Home/Agent" width="0" height="0" style="display: none;">
</iframe>
</body>
</html>
|
中间页面的关键代码：
该页面是在A域名下的一个文件，由上面的src知道我就是在A网站的HomeController下开了个Agent的方法
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
$(function () {
var iObj = parent.parent.document.getElementById('iframepage'); //找到该域下的iframe然后修改其值
iObjH = parent.parent.frames["iframepage"].frames["MiddleIframe"].location.hash;
iObj.style.height = iObjH.split("#")[1] + "px";
});
</script>
|
|
