iFrame 跨域高度自适应问题解决

最新推荐文章于 2020-01-17 17:36:25 发布

xhgrid

最新推荐文章于 2020-01-17 17:36:25 发布

阅读量127

点赞数

分类专栏： Web前端文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/xhgrid/article/details/84290470

版权

Web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

需求是：A页面(例如：www.taobao.com) 要嵌入B(例如： www.alibaba.com)，因为不能确定B页面的高度，所以要求高度自适应。

具体代码：

iframe主页面 A.html
<div>

<iframe id="aFrame" scrolling='no' border=0 frameborder=0 width=100% height="400px" class="failure"

src="www.alibaba.com/B.html" runat="server"></iframe>

</div>

cross.js --cross放到父页面的域名下
复制代码
var inner = inner || {};
var getUrlValue = function (url) {
var url = (url !== undefined) ? url : window.location.href;
if (url.indexOf("#") > -1) {
var variable = url.split("#")[1];
} else {
var variable = url.split("?")[1];
}
if (variable === undefined) {
return {};
} else {
var value = {};
variable = variable.split("&");
for (var i = 0, m = variable.length; i < m; i++) {
value[variable[i].split("=")[0]] = variable[i].split("=")[1]; }
return value;
}
}
var mathor_url = getUrlValue()['mathor_url'];
if (!mathor_url) {
if (/alibaba.com/.test(window.location.href.match(/[^htps\/]*[^\/]+/g)[1])) {---------判断是否是阿里巴巴的域名
mathor_url = "www.taobao.com.cn/qiantao"; --------------要修改的A页面服务器地址（此地址是proxy放置地址的前段部分）
}else{
mathor_url="
www.taobao.com.cn/qiantao
";------------
要修改的A页面服务器地址
(可以是测试地址,或者是如果正式测试的都一样，则else可不要)
}
}
inner = {
iframe_el: null,
url: 'http://' + mathor_url,
aid: 1,
href: null,
time: null,
signA: false,
autoHeight: true,
getDocHeight: function () {
var height = (navigator.appName == "Microsoft Internet Explorer") ? document.body.scrollHeight + 20 : document.body.offsetHeight + 20;
return height;
},
postAction: function (u) {
var fd = this; clearInterval(this.time);
fd.iframe_el_new = document.createElement('iframe');
fd.iframe_el_new.height = 0;
fd.iframe_el_new.style.height = '0px';
fd.iframe_el_new.style.width = '0px';
fd.iframe_el_new.style.border = 'none';
fd.iframe_el_new.width = 0;
fd.iframe_el_new.frameborder = 0;
fd.iframe_el_new.border = 0;
fd.iframe_el_new.scrolling = 'no';
fd.iframe_el_new.src = fd.url + "/proxy.htm#aid=" + this.aid + "&" + u;
fd.iframe_el.parentNode.appendChild(fd.iframe_el_new);
fd.iframe_el.parentNode.removeChild(fd.iframe_el);
fd.iframe_el = fd.iframe_el_new;
this.aid++;
},
setHeight: function (height) {
if (height === undefined) {
height = this.getDocHeight();
}
this.postAction("action=setheight&height=" + height);
},
start: function () {
var fd = this;
fd.iframe_el = document.getElementById("aFrame"); -----更改ifram的名称
if (this.autoHeight) {
fd.old_height = 0;
var autoHeight = function () {
if (fd.old_height != inner.getDocHeight()) {
fd.old_height = inner.getDocHeight();
fd.setHeight();
}
}
setInterval(autoHeight, 200);
}
}
};

document.write('<iframe id="aFrame" style="width:0; height:0; border:none;" frameborder="0" scrolling="no" src="' + inner.url + '/proxy.htm#aid=0&action=setheight&height=' + inner.getDocHeight() + '"></iframe>');-----此处也要进行修改，拼接proxy.htm的位置，注意proxy.htm存放的位置
inner.start();
(function () {if (!!window.ActiveXObject && !window.XMLHttpRequest) {
var links = document.getElementsByTagName('a');
for (i = links.length - 1; i >= 0; i--) {
var clink = links[i];
if (clink.target == "_top") {
clink.onclick = (function () {
var chref = clink.href;
return function () {
if (window.top) {
window.top.location = chref;
}
}
})()
}
}
}

})()
复制代码

proxy.htm （代理页） --代理页面放到父页面的域名下
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var old_aid = null;
var action = function () {
try {
if (window.location.href.indexOf("#") == -1) return;
var aid = window.location.href.match(/(#|&)aid=(.*?)(&|$)/ig)[0].match(/[0-9]+/)[0];
var height = window.location.href.match(/(#|&)height=(.*?)(&|$)/ig)[0].match(/[0-9]+/)[0];
if (aid == null) return;
old_aid = aid;
if (-[1, ]) {
height = parseInt(height) + 20;
}
window.parent.parent.document.getElementById("aFrame").style.height = height + "px";
} catch (e) { }
};
action();
</script>
</body>
</html>
复制代码

最后将自适应的页面www.alibaba.com/B.html中添加引用cross.js脚本(放到</body>之前)

http://www.cnblogs.com/liushanshan/archive/2011/05/19/2051094.html

xhgrid

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iFrame 跨域高度自适应问题解决

需求是：A页面(例如：www.taobao.com) 要嵌入B(例如： www.alibaba.com)，因为不能确定B页面的高度，所以要求高度自适应。具体代码： iframe主页面 A.html cross.js --cross放到父页面的域名下复制代码var inner = inner || {}; var...
复制链接

扫一扫

专栏目录