首页 > 分享 > iframe 自适应高度的问题(jquery控制)

iframe 自适应高度的问题(jquery控制)

最新推荐文章于 2024-09-29 16:33:00 发布

stephen_liubg 于 2012-10-18 14:51:32 发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

为了解决iframe 自适应高高度的问题 已花了我不少时间,在网上找了好几种方法,可每种都有问题,在参考同事的方法后终于解决了所有问题,现在就把代码写出来和大家分享下,同时避免以后忘记。代码如下:

主页面代码:

<html>

<head>

<meta content="text/html; charset=utf-8" />

<title>iframe自适应高度</title>

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

$(function(){

// 加载时自适应高度

$("#mainFrame").load(function(){

var frameHeight = $(this).contents().find(".frameContent").height() + 10;

$(this).height(frameHeight);

})

var  iframe = $("#mainFrame")

// 定时检测并更新iframe的高度

  setInterval(function(){

var mainheight = iframe.contents().find("  .frameContent ").height()+10;

 iframe.height(mainheight);

},0)

})

</script>

</head>

<body>

<a href="contentFrame1" target="mainFrame">页面1</a>

<a href="contentFrame2" target="mainFrame">页面2</a>

<iframe src="" id="mainFrame" name="mainFrame" frameborder="0" scrolling="no"></iframe>

</body>

</html>

(以下代码就不具体写了,只写内容部分)

页面1代码:

<div class="frameContent" style="height:500px; width:500px;  border:1px solid #f00;">

页面2代码:

<div class="frameContent" style="height:800px; width:500px;  border:1px solid #f00;">

以上的方法解决了  iframe.contentWindow.document.documentElement.scrollHeight 和直接使用 οnlοad="this.height=this.contentWindow.document.documentElement.scrollHeight" 只有在刷新后才能自适应高度的问题,其实这两个并不是自适应,只能获取最大高度来适应。如果知道这两种的解决方法,希望可以把详细的实现步骤写出来分享下,谢谢!

相关知识

小程序图片高度自适应等问题
10个功能强大的jQuery插件
HTML中的 IFRAME标签
jQuery插件库
jquery 触碰显示
web移动端适配有哪些解决方案?每个方案的优缺点评估
自适应式双行菠萝自动收割机及其收割方法与流程
jQuery操作input
推荐5个漂亮的jquery主流图表插件
带你一步步从PC(电脑)网页自适应到手机端网页(小白入门必看)

网址: iframe 自适应高度的问题(jquery控制) https://m.huajiangbk.com/newsview2015992.html

所属分类:花卉
上一篇: 季节性哮喘能治好吗
下一篇: TIKtok平台灯串上架合规报告