iframe全跨域高度自适应解决方案
作者:陈成 来源:经典论坛 时间:2008-12-21 16:16:00
看到这个需求的时候就在暗爽,又可以搞定一个知识点了。哈哈,一天的奋斗之后,果然有所收获,而且经过怿飞的指点,在跨域问题解决上还有所突破(不通过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发生即可
标签:iframe,跨域,自适应,框架
0
投稿
猜你喜欢
SQL Server常用存储过程及示例
2024-01-18 18:45:41
MySQL数据库的双向加密方式
2009-11-18 11:07:00
Python命令行参数解析模块getopt使用实例
2021-02-20 08:53:48
Mysql的服务无法启动的1067错误解决
2012-01-05 19:31:56
Python3如何使用range函数替代xrange函数
2022-08-25 06:09:59
JavaScript实现网页计算器功能
2024-04-17 10:03:41
《JavaScript语言精粹》译者序及样章试读
2009-04-03 11:38:00
正确的PHP匹配UTF-8中文的正则表达式
2024-04-10 10:56:36
SqlServer异常处理常用步骤
2024-01-26 01:56:32
Oracle 8x监控sysdba角色用户登陆情况
2024-01-19 08:56:43
python使用matplotlib库生成随机漫步图
2021-03-01 15:11:37
由浅到深了解JavaScript类
2008-06-16 13:20:00
使用Python编写一个在Linux下实现截图分享的脚本的教程
2022-04-23 13:23:11
python的exec、eval使用分析
2022-05-26 18:38:25
使用SQL Server 2008管理非结构化数据
2009-01-08 15:28:00
python logging 日志轮转文件不删除问题的解决方法
2023-07-06 20:04:30
Python 怎么定义计算N的阶乘的函数
2021-04-12 01:44:04
Python实现通讯录功能
2022-06-28 22:33:26
比较一下看看自己掌握了多少SQL快捷键
2009-01-04 14:04:00
Python3实现捕获Ctrl+C终止信号
2021-10-17 14:03:55