Javascript 在页面加载时设置iframe的高度和宽度_Javascript_Html_Iframe

Javascript 在页面加载时设置iframe的高度和宽度

javascript html iframe

Javascript 在页面加载时设置iframe的高度和宽度,javascript,html,iframe,Javascript,Html,Iframe,我的HTML页面中有三个iFrame。一个覆盖窗户的上半部分。另外两个在屏幕下方，覆盖屏幕其余部分的宽度相等 ----------------------------- | | | | ----------------------------- | | | | | | ------------

我的HTML页面中有三个iFrame。一个覆盖窗户的上半部分。另外两个在屏幕下方，覆盖屏幕其余部分的宽度相等

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

我正在onreadystatechange事件中更改iFrame的高度和宽度。因此，在第一次加载时，这些iFrame在屏幕上看起来像三个点，并且不会调整大小。让人耳目一新时，它们会完美地展现出来

代码：

URL被视为“http://www.google.com"; 默认情况下，不显示原始URL。

要在第一次加载时正确显示iFrame，可能的解决方案是什么？

为此，您需要用javascript编写一个方法，并在页面加载方法时调用该函数。这是html主体部分的onload（）方法。

得到了解决方案。。只需等待内容加载并在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>


函数resize_iframes（）
{
var upper_frame=document.getElementById（“upper_frame”）；
上部框架.src=”http://www.google.com";
var left_frame=document.getElementById（“left_frame”）；
左_frame.src=”http://www.google.com";
var right_frame=document.getElementById（“right_frame”）；
右_frame.src=”http://www.google.com";
}
函数resize_upper（）
{
var upper_frame=document.getElementById（“upper_frame”）；
上部框架.style.height=window.innerHeight/2；
上部框架.style.width=窗口.innerWidth；
}
函数resize_left（）
{
var left_frame=document.getElementById（“left_frame”）；
left_frame.style.height=window.innerHeight/2；
left_frame.style.width=window.innerWidth/2；
}
函数resize_right（）
{
var right_frame=document.getElementById（“right_frame”）；
right_frame.style.height=window.innerHeight/2；
right_frame.style.width=window.innerWidth/2；
}

我正在调用下面的函数，但它仍然不起作用。请使用下面的链接：更新：请注意，这个jQuery autoHeight插件将不适用于从不同域或远程位置访问内容的iFrame，因为由于以下原因，无法从当前域访问来自不同域的窗口对象JavaScript安全限制。我必须在iframes中打开来自不同域的站点。你能发布你现有的代码吗（调整iframes函数的大小）？@TeChn4K。。。我现在已经发布了代码

<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>