在页面加载时设置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的高度和宽度

回答

相关问题