对于iframe高度自适应的问题，网上已经被讨论n次了，一般通过在iframe加载完毕时访问iframe内页body的offsetHeight和offsetWidth然后更新iframe的高宽来实现。
今日遇到的自适应问题与以往有一些不同，这次的src是一张图片，而且是一张大小不确定的图片（从数据库取出来的数据生成的），在此使用以往的方式似乎就没有那么灵验了。突然想到img标记的高宽是可以获取到的。于是突然有了思路。
解决办法如下：先动态生成一个img元素，在iframe页面加载完成时(onload)将其src赋给img标记，然后获取该img的高宽，再动态修改iframe高宽即可，同时不要忘了设定iframe页面body的margin和padding为0，否则会由于padding和margin默认不为0的缘故导致出现滚动条。
测试代码如下：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<title> new document title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
script>
head>
<body>
<input type="button" value="test" onclick="document.getElementById('a').style.display=''">
<iframe src="1.jpg" id="a" style="display:none" scrolling="auto" onload="resize(this)">iframe>
body>
html>
阅读(345) | 评论(0) | 转发(0) |
