我正在开发一个小站点,单击一个按钮即可将本地HTML文件加载到iframe中.应根据本地HTML文件内容的大小调整iframe的大小.以下内容几乎可以正常使用-但是,我需要单击“填充”按钮两次才能调整iframe(Firefox)的大小.
我很确定这与事件的处理方式有关,但是我尝试了e.preventDefault()并在没有任何运气的情况下返回false.有任何想法吗？
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Load</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#run").click(function(e) {
e.preventDefault();
var framex = document.getElementById('iframe');
framex.setAttribute("src", "local.html");
framex.style.height = (framex.contentWindow.document.body.scrollHeight + 50) + "px";
return false;
});
});
</script>
</head>
<body>
<input id="run" type="button" value="Load">
<div id="div" style="width: 100%; height: 600px; overflow: auto;">
<iframe id="iframe" width="100%" frameBorder="0">
</iframe>
</div>
</body>
</html>
解决方法:
首次分配framex.style.height时,页面尚未加载,因此文档没有大小(甚至不存在,这会导致错误).
您必须等到页面加载完毕：
framex.onload = function() {
this.style.height = (this.contentWindow.document.body.scrollHeight + 50) + "px";
};