Question

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

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

我正在onreadystatechange事件中更改iframe的高度和宽度。因此，在首次加载时，这些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;
}

网址被视为“http://www.google.com”;默认情况下，不显示原始网址。可能有什么办法可以在首次加载时正确显示iframe？

Answer 1

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

Answer 2

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

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

2 个答案: