实测iframe自适应高度的两种方法

 2025-01-15  阅读 583  评论 5  点赞 416

摘要:方案一 $(window.parent.document).find("#myiframe").load(function(){ var main = $(window.parent.document).find("#myiframe"); var thisheight = $(document).height()+30; main.height(thisheight); }); 方案二拖拽窗口iframe也可以自适应高度 function changeFrameHei

方案一

<iframe name="myiframe" id="myiframe" src="#" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript" language="javascript">
	$(window.parent.document).find("#myiframe").load(function(){
		var main = $(window.parent.document).find("#myiframe");
		var thisheight = $(document).height()+30;
		main.height(thisheight);
	});
</script>

方案二

拖拽窗口iframe也可以自适应高度


<iframe name="myiframe" id="myiframe" src="#" frameborder="0" scrolling="no"></iframe>
<script type="text/javascript" language="javascript">
	function changeFrameHeight(){
		var ifm= document.getElementById("myiframe");
		ifm.height=document.documentElement.clientHeight-56;
	}
	window.onresize=function(){ changeFrameHeight();}
	$(function(){changeFrameHeight();});
</script>


实测iframe自适应高度的两种方法-第1张-知识笔记-LS'Blog-保定PHP程序员老宋个人博客

评论列表:

  •   haliluya
     发布于 2025-01-14 15:44:52回复该评论
  • 不错,学习了!
  •   weihang666
     发布于 2025-01-14 21:44:52回复该评论
  • 非常棒谢谢了!
  •   hahaha1
     发布于 2025-01-15 03:44:52回复该评论
  • 感谢分享!
显示更多评论

发表评论:

管理员

承接各种程序开发,外贸网站代运营,外贸网站建设等项目
  • 内容2471
  • 积分67616
  • 金币91666

Copyright © 2024 LS'Blog-保定PHP程序员老宋个人博客 Inc. 保留所有权利。 Powered by LS'blog 3.0.3

页面耗时0.0277秒, 内存占用2.01 MB, 访问数据库28次

冀ICP备19034377号