在頁面加載時設置iframe的高度和寬度

我的HTML頁面中有三個iframe。一個覆蓋窗戶的上半部分。另外兩個在它下方，覆蓋屏幕其餘部分的等寬。在頁面加載時設置iframe的高度和寬度

----------------------------- 
|       | 
|       | 
----------------------------- 
|    |    | 
|    |    | 
-----------------------------

我改變I幀的高度和寬度在onreadystatechange事件。因此，在第一次加載時，這些iframe在屏幕上顯示爲三個點，並且不會調整大小。清爽時，它們完美展現。

代碼：

function resize_iframes() 
{ 
    var upper_td = document.getElementById("upper_td"); 
    upper_td.style.height = window.innerHeight/2; 

    var upper_frame = document.getElementById("upper_frame"); 
    upper_frame.src = "http://www.google.com"; 
    upper_frame.style.height = window.innerHeight/2; 
    upper_frame.style.width = window.innerWidth; 

    var left_td = document.getElementById("left_td"); 
    left_td.style.width = window.innerWidth/2; 
    left_td.style.height = window.innerHeight/2; 

    var left_frame = document.getElementById("left_frame"); 
    left_frame.src = "http://www.google.com"; 
    left_frame.style.height = window.innerHeight/2; 
    left_frame.style.width = window.innerWidth/2; 

    var right_td = document.getElementById("right_td"); 
    right_td.style.width = window.innerWidth/2; 
    right_td.style.height = window.innerHeight/2; 

    var right_frame = document.getElementById("right_frame"); 
    right_frame.src = "http://www.google.com"; 
    right_frame.style.height = window.innerHeight/2; 
    right_frame.style.width = window.innerWidth/2; 
}

URL被作爲「http://www.google.com」;默認情況下，原始網址未顯示。可能的解決方案是什麼可以在第一次加載時正確顯示iframe？

來源

2011-11-23 Saurabh Saxena

您可以發佈您現有的代碼（resize_iframes功能）調用這些功能呢？ – TeChn4K

@ TeChn4K ...我已經發布代碼 –

得到了解決。正等待要加載的內容中的iframe的onload

<body onload="resize_iframes();"> 
<table> 
    <tr> 
     <td colspan="2"> 
     <iframe id = "upper_frame" onload="resize_upper();"></iframe> 
     </td> 
    </tr> 
    <tr> 
     <td align="left"> 
      <iframe id = "left_frame" onload="resize_left();" sandbox></iframe> 
     </td> 
     <td align="right"> 
      <iframe id = "right_frame" onload="resize_right();" sandbox></iframe> 
     </td> 
    </tr> 
</table> 

<script> 
function resize_iframes() 
{ 
    var upper_frame = document.getElementById("upper_frame"); 
    upper_frame.src = "http://www.google.com"; 

    var left_frame = document.getElementById("left_frame"); 
    left_frame.src = "http://www.google.com"; 

    var right_frame = document.getElementById("right_frame"); 
    right_frame.src = "http://www.google.com"; 
} 

function resize_upper() 
{ 
    var upper_frame = document.getElementById("upper_frame"); 
    upper_frame.style.height = window.innerHeight/2; 
    upper_frame.style.width = window.innerWidth; 
} 


function resize_left() 
{ 
    var left_frame = document.getElementById("left_frame"); 
    left_frame.style.height = window.innerHeight/2; 
    left_frame.style.width = window.innerWidth/2; 
} 

function resize_right() 
{ 
     var right_frame = document.getElementById("right_frame"); 
    right_frame.style.height = window.innerHeight/2; 
    right_frame.style.width = window.innerWidth/2; 
} 
</script>

來源

2011-11-23 10:51:16

爲此，您需要在javascript中編寫方法並在頁面加載方法時調用該函數。它是一個html正文部分的onload（）方法。

來源

2011-11-23 09:26:48

我打電話的功能如下但仍然無效 –

請使用下面的鏈接：http：// www .lost-in-code.com/programming/jquery-auto-iframe-height/ –

更新：請注意，這個jQuery autoHeight插件將不能與iFrames訪問來自不同域或遠程位置的內容，因爲窗口對象源自由於JavaScript安全限制，不能從當前的域訪問不同的域。我必須在iframe中打開來自不同域的網站。 –

在頁面加載時設置iframe的高度和寬度

回答

相關問題