今天为iframe花了好多时间,最终只需用修改一行代码,真是很无语...不过这和自己对iframe相关的知识点不熟有关。
今天要改的地方是:iframe的事件onload在ie6下没有执行,所以ie6下无法进行高度调整,而iframe里是几个tab,每个tab高度都不一样,需用点击tan然后重新计算高度,并改变。
代码如下:
<div id="footer">
<iframe id="additional" name="additional" width="100%" src='test.php' frameBorder="0" scrolling="no" οnlοad="javascript:adjustIFrameHeight(this);">
</iframe>
</div>
父级页面js如下:
function adjustIFrameHeight(ifm) {
if (ifm != null && ifm.contentDocument != null) {
ifm.height = ifm.contentDocument.body.scrollHeight;
}
}
子级页面tab事件绑定js:
jQuery(function (footer) {
footer.use('ui-tabs', function () {
footer('#tab4').tabs({
isAutoPlay:false,
event:'click',
show:function () {
if (parent) {
parent.document.body.getElementsByTagName('iframe')[0].height = document.body.scrollHeight;
if (inited) {
parent.window.scrollTo(0, 99999);
}
}
}
});
var inited = true;
});
});
问题就出在这几行代码里面,但是自己用打印日志的方法判断js是否有执行,在ff、chrome、ie8这些都正常,但就是在ie6下面不行,连dom ready都没有。
因为是同域请求,所以关于跨域方面的问题可以排除。
一开始以为是页面的问题,子页面加载异常,所以把js文件和代码都放在页面最下面,但是还是没用。认为是父页面的onload事件在ie6下面失效,所以想修改方法,但是后面在子页面发现上面这段代码之后,我觉得是子页面的问题了。
这时我已经很接近成功了,但是我用打印日志的方法,所以我一直没把目标放在里面的具体代码里。自己只是在里面加just.log("test!");
下次应该换个方法,用alert();因为有时候一些函数库会莫名其妙失效,我现在也还弄明白为什么子页面的日志都无法打印,但是js代码明明都执行过了。
最终用alert();之后,终于把问题定位到
parent.document.body.getElementsByTagName('iframe')[0].height = document.body.scrollHeight;
使用alert(document.body.scrollHeight);发现,每次打印出来的高度都是不对的,在ie6下,在ff、chrome下都不一样。
alert(parent.document.body.getElementsByTagName,length);,发现打印的数字是6,也就是说父级的iframe有6个。
这怎么可能呢?明明就只有一个iframe啊。算了,别想那么多,直接换一个方法,修改如下:
function load(){
jQuery.use('ui-tabs', function () {
var inited = false;
jQuery('#tab4').tabs({
isAutoPlay:false,
event:'click',
show:function () {
if (parent) {
var ifrHeight=jQuery(document.body).height();
parent.document.getElementById('additional').height = ifrHeight;
if (inited) {
parent.window.scrollTo(0, 99999);
} else {
inited = true;
}
}
}
});
});
}
这时终于正常了。
其实只要自己早点使用alert()来判断,我可能早就找到问题了。所以,掌握多样调试方法,特别是对待前端,一定要灵活点。