iframe全跨域高度自适应解决方案
作者:陈成 来源:经典论坛 发布时间:2008-12-21 16:16:00
标签:iframe,跨域,自适应,框架
看到这个需求的时候就在暗爽,又可以搞定一个知识点了。哈哈,一天的奋斗之后,果然有所收获,而且经过怿飞的指点,在跨域问题解决上还有所突破(不通过hash)。
看Demo,兼容IE,FF,Safari。
方案说明:
需求是:A页面(taobao.com)要嵌入B页面(alibaba.com),因为不能确定B页面的高度,所以要求高度自适应。
解决方法:简单来说就是在B页面里创建一个和A同域的iframe C,让C和A之间可以通讯,以把B的高度传过去。
那么怎么传过去呢?以前的方法是在C里改变parent.parent(即A)的location.hash,但是改hash会生成浏览器历史记录,点后退前进按钮用户体验不佳。我们试了下在A页面直接取frames[ b ].frames[c].location.hash,居然可以取到。
剩下的就简单了,在A里设置iframe B装载完成后获取C的hash,然后通过hash设置iframe B的高度。
具体代码:
A页面:(基于YUI)
/**
* 待iframe载入后执行函数
*
* @param {Element} el
* @param {Function} func
*/
var onIframeLoad = function(el, func) {
var cb = function() {
try {
func.call(this);
} catch (e) {}
}
if (TB.bom.isIE) {
el.onreadystatechange = function(){
if (el.readyState == 'complete') {
setTimeout(cb, 0);
el.onreadystatechange = null;
}
}
} else {
el.onload = function() {
setTimeout(cb, 0);
el.onload = null;
}
}
};
/**
* 跨域iframe高度自适应封装
*
* @param {String} name
*/
var crossDomainIframe = function(name) {
var iframe = YAHOO.util.Dom.get(name);
var xclient = 'xclient';
onIframeLoad(iframe, function(){
try {
var h = frames[name].frames[xclient].location.hash.substring(1);
if (h == '') {
var func = arguments.callee;
setTimeout(function(){ func(); }, 20);
return;
}
iframe.style.height = h+'px';
} catch (e) {}
});
};
// 执行
crossDomainIframe('frame_content');
B页面:
(function(){
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function adjust() {
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
try {
if (document.getElementById('xclient')) {
var divEl = document.getElementById('xclient').parentNode;
console.log(document.getElementById('xclient').parentNode);
divEl.parentNode.removeChild(divEl);
}
var el = document.createElement('div');
el.innerHTML = '';
document.body.appendChild(el);
} catch(e) {}
}
addLoadEvent(adjust);
})();
C页面:空页面,有个文件避免404发生即可
0
投稿
猜你喜欢
- 呃,看到这个标题,我们可以首先将IE系浏览器无视了。我承认,我是有极简主义倾向的,我希望能够使用最少的代码和图片做更多的事情。虽然CSS3仅
- 本文介绍了linux下如何备份与恢复mysql数据库。数据库备份是非常重要的。如果定期做好备份,这样就可以在发生系统崩溃时恢复数据到最后一次
- 如何 在Access中选择指定日期前的记录?我知道,在Access中不能使用DateDiff,那么我们怎样才能选择指定日期前的若干记录呢?虽
- 原文:Five quick JavaScript tips真是五个很quick的小提示:1.只在<form>元素上使用submi
- 八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:你知道世界上第一份reset.css在哪么?*&nb
- 之前写过的组织结构和组织体系都太抽象了,读到标签系统我才有那种“略懂”的感觉。哈哈…书上提到的标签包括:导航情境式链接:常见的“更多”这种用
- 使用jmail组件发送邮件:Function JMail(Send_From,Send_To,Send_Subject,Send_
- 描述微软开发的两个动态库存在后门允许用户查看ASP文件源程序和下载整个网站详细随IIS和Frontpage Extention server
- 我们网站的静态资源(css、js和背景图片)和web应用程序是分开部署的,几乎所有的静态资源都部署在同一个应用下。最开始的网站
- 在《数据库原理》里面,对聚簇索引的解释是:聚簇索引的顺序就是数据的物理存储顺序,而对非聚簇索引的解释是:索引顺序与数据物理排列顺序无关。正式
- Douglas Crockford是JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《J
- 两个文章,放在一块了。第二个比较强。====================================================
- 数学函数 1.绝对值 S:select abs(-1) value O:select abs(-1) value from dual 2.取
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输
- 我一般看书喜欢做笔记,这份笔记不知道是什么时候看的什么书做的,也忘了是否是摘自其他地方,总之一份汇总,应该适合初学者,对于Javascrip
- 从PJBlog 2.7开始,验证码的功能就很好很强大了,但是同时也给手工输入带来了不小的麻烦——经常输错。之前我写了一个《自己写的一个PJB
- 近段时间由于修改一个ASP程序(有SQL注入漏洞),在网上找了很多相关的一些防范办法,都不近人意,所以我将现在网上的一些方法综合改良了一下,
- 之前在豆瓣上听到有友邻在抱怨卓越的配送速度慢得跟蜗牛一样,超过配送时间期限几天还没送到,当时不太相信,因为此前在卓越网上购买的物品基本上是在
- 昨天打包下载了一个服务器整站,拿到这个*.mdb的文件后,却不知道怎么用,百度了一下,才知道是一种木马打包的形式文件,不能用WINrar来解
- 1、修改MD5算法重的4个常数,这是最捷径的作法,其特点是加密后的数据和加密前非常类似,但是不会被破解 2、多次加密,对MD5加密过的数据进