JavaScript / jQuery仅适用于第二次单击

时间:2013-07-05 21:19:46

标签: javascript jquery events click

我正在开发一个小网站,只需点击一下按钮就可以将本地HTML文件加载到iframe。应根据本地HTML文件内容的大小调整iframe的大小。以下几乎可以正常工作 - 但是,我需要点击“填充”按钮两次才能调整iframe(Firefox)的大小。

我很确定它与处理事件的方式有关,但我已经尝试e.preventDefault()return 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>

1 个答案:

答案 0 :(得分:3)

第一次分配framex.style.height时,页面尚未加载,因此文档没有大小(或者甚至不存在,这会导致错误)。

您必须等到页面加载完毕:

framex.onload = function() {
    this.style.height = (this.contentWindow.document.body.scrollHeight + 50) + "px";
};