JavaScript/jQuery僅適用於第二次點擊

我正在開發一個小型網站，通過單擊按鈕將本地HTML文件加載到iframe。應該根據本地HTML文件內容的大小來調整iframe的大小。下面幾乎可以工作 - 但是，我需要點擊「填充」按鈕兩次才能調整iframe（Firefox）的大小。JavaScript/jQuery僅適用於第二次點擊

我非常確定它與事件處理方式有關，但我試過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>

來源

2013-07-05 Mr Floppy

第一次被分配framex.style.height，該網頁尚未加載，所以該文件沒有大小（或根本不存在，這將導致一個錯誤，然後）。

你必須等待，直到頁面加載：

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

來源

2013-07-05 21:23:27

換句話說，設置的'src'的'iframe'並不意味着該文件（和它的依賴，如CSS）將有已經由執行時間移到下一行時加載。 – Jon

謝謝！那就是訣竅。 –

JavaScript/jQuery僅適用於第二次點擊

回答

相關問題