高度自适应超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。
注意别放错地方了哦。
iframe代码，注意要写ID
| 代码如下 | 复制代码 |
|
<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe> |
|
jquery代码１：
| 代码如下 | 复制代码 |
|
//注意：下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function(){ |
|
jquery代码２：
//注意：下面的代码是放在和iframe同一个页面调用
| 代码如下 | 复制代码 |
|
$("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheight); }); |
|
需要最小高度：
| 代码如下 | 复制代码 |
|
$("你的id").load(function(){ //一定要有.load等载入完成 var iframeHeight = $(this).contents().find("html").height(); //写find("body")是无法获取高度的 if( iframeHeight < 600){ //如果需要最小高度，就有了if判断， |
|
宽度同理，把.height()改为.width()即可获取宽度
如下，iframe宽度、高度自适应
如何使用jQuery实现iframe宽度、高度自适应？其实很简单，只需如下代码：
| 代码如下 | 复制代码 |
|
jQuery(document).ready(function ($) { // “iframe”为iframe的ID，在其加载完成时触发事件。 $('#iframe').load(function () { // “ref_page”为引用页面DIV的ID，获取DIV的外部宽度、外部高度。 var width = $(this).contents().find('#ref_page').outerWidth(); var height = $(this).contents().find('#ref_page').outerHeight(); // 设置iframe的宽度、高度。 |
|
为了让iframe的宽度与高度能够与子页面的宽度与高度准确匹配，让子页面完整呈现，必须注意以下事项：1、子页面body的margin、padding样式必须为style="margin: 0 0; padding: 0 0;"；2、引用的DIV（例如代码中的div#ref_page）应为子页面的容器，子页面的所有内容都必须放在容器中，同时引用的DIV的margin样式必须为style="margin: 0 0;"。