2023-04-27 22:32:46 阅读( 1995)
谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe。
超级简单的方法,不用写什么就能判断出浏览器的高度和宽度。
下面两种方法选一个就行了。一个和iframe在同一个页面,另一个在test.html页面。
当心不要把它放在错误的地方
下面是其他两种方法:
Iframe代码,注意写ID。
iframe src='test.html' id='main' width='700' height='300' frameborder='0' scrolling='auto'/iframejquery代码:
//注意:以下代码是在test.html调用的。
$(window.parent.document).find('#main').load(function(){
var main=$(window.parent.document).find('#main');
var thisheight=$(document).height()+30;
main.height(thisheight);
});jquery代码:
//注意:下面的代码是在与iframe相同的页面上调用的。
$('#main').load(function(){
var mainheight=$(this).contents().find('body').height()+30;
$(this).height(mainheight);
});
第二种是有效的,但是要注意添加的JS要写在iframe下,在头部测试是无效的。
测试代码:
iframe id='mainframe' name='mainframe' marginwidth='0' marginheight='0' src='/Home/Activitylist'frameborder='0' width='100%' scrolling='no' height='100%'/iframe
script type='text/javascript'
//注意:以下代码与iframe在同一个页面调用,放在iframe下。
$('#mainframe').load(function () {
var mainheight=$(this).contents().find('body').height() + 30;
$(this).height(mainheight);
});
/script
猜你喜欢
Guessyoulike