- 浏览: 13809 次
- 性别:
- 来自: 深圳
文章分类
最新评论
需求是: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
具体代码:
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
发表评论
-
How to Execute Javascript on Ajax return
2012-10-22 18:35 1087Ajax is a nice technology to de ... -
执行AJAX返回HTML片段中的JavaScript脚本
2012-10-22 18:34 788如果AJAX加载的数据是一 ... -
12种不宜使用的Javascript语法
2012-09-16 21:06 628这几天,我在读《Javascript语言精粹》。 这本书很 ... -
Self-updating scripts
2012-09-12 16:31 796Updates: Philip Tellis deployed ... -
前端相关PPT搜集
2012-09-12 16:23 995以下为本人搜集的关于前端一些质量比较好的原创PPT,不定期更 ... -
判断浏览器是否支持指定CSS属性和指定值
2012-09-12 16:06 1557现在css3出来了, 添加了许多新特性,但由于并未全部浏览器都 ... -
完美实现溢出文本省略
2012-09-12 16:02 620文本溢出展示省略号的需求经常都会用到,而对于新式的浏览器,这完 ... -
JS跨域访问操作iframe
2012-09-12 15:57 847很多人一直都有个想法,要是可以随心所欲的操作iframe就好了 ... -
Javascript定义类(class)的三种方法
2012-09-11 09:53 773将近20年前,Javascript诞生的时候,只是一种简单的网 ... -
【NodeCC】NodeJs开发的脚本压缩和combo工具
2012-09-10 23:04 905对于Web前端的开发而言,为了降低文件大小,js文件和css文 ... -
是时候使用JavaScript严谨模式(Strict Mode)提升团队开发效率
2012-09-10 23:00 904随着WebApp突飞猛进的发 ... -
HTML5中script的async属性异步加载JS
2012-09-10 16:59 1081HTML4.01为script标签定义了5个属性: cha ... -
前端学习资源
2012-09-03 10:15 734前端学习资源 1、http://www.javascrip ... -
一些不能订阅的前端学习资源
2012-09-03 10:14 572一些不能订阅的前端学习资源 1、http://friend ...
相关推荐
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
有个在线例子,访问地址:http://okiner.cn/demo/cross-domain/iframe.html,这是源码,方便下载
可以实现Iframe跨域自适应高度 main.htm和agent.htm文件放在www.a.com域内 iframe.htm放在www.b.com域内 这样就可以通过a.com域中的main.htm文件访问b.com域中的iframe.htm文件了
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
最近在做项目中,遇到一个问题,就是iframe高度的自适应问题,以下是解决办法
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
页面域关系: 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑,使js跨域访问受限,读取不到b.
前几天做公司和开心网合作项目的时候 碰到iframe 跨域自适应的问题刚开始很迷惑 开心网那边技术工程师给我发了一段这样子的代码。
采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器,控制id为...
iframe的高度需要根据子页面的实际高度来进行调整,但是如果子页面不在同一域中怎么办?这时候脚本没有办法获取到子页面的高度,存在JavaScript跨域的问题
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
iframe-resizer-master解决iframe高度自适应问题,跨域问题 iframe-resizer-master解决iframe高度自适应问题,跨域问题
Iframe自适应高度一直都备受关注,接下来为大家介绍下同域名下Iframe自适应高度的处理以及跨域时Iframe高度自适应,感兴趣的朋友可以参考下哈
无法进行跨域操作,使得问题比较棘手参考了一下网上的做法,引入了一个代理页面,或者叫做中介 agent.html,属于domainA然后,在domainB 中的other.html中,再使用iframe将agent.html进行嵌套 好了,现在情况是这样...