Question

我需要更改iframe尺寸。这是我的HTML代码

<iframe id="stream" width="720" height="433" src="#HiddedIt" style="border:0;outline:0" frameborder="0" scrolling="no"></iframe>

这是我的Javascript：

if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth < 1100){
    document.getElementById("stream").width = "485px";
    document.getElementById("stream").height = "295px";
}

当用户的分辨率低于1100时，它不会改变iframe的大小。你能说出我在做错的地方吗？谢谢。

if正在运行，但iframe的尺寸未更改。

Answer 1

我认为你的问题是Javascript出现在HTML的<iframe>之前。浏览器按顺序解析HTML。

如果没有看到您的实际文档，我只能想象您正在调用<head>中的Javascript并在<iframe>中创建<body>。

问题在于，当<head>中的Javascript被执行时，尚未创建<iframe>，因此没有任何对象可以更改！< / p>

一种解决方案是在创建<body>后在<iframe>中调用您的Javascript。或者，您可以在window.onload创建后使用iframe运行脚本：

window.onload = function () {
    if (
        window.innerWidth < 1100 || 
        document.documentElement.clientWidth < 1100 || 
        document.body.clientWidth < 1100
    ){
        alert("Yes");
        document.getElementById("stream").width = "485px";
        document.getElementById("stream").height = "295px";
    }
}

Answer 2

您可以使用JQuery库为Javascript以编程方式调整IFRAME的大小。

在下面的代码中，值“#iframe”将是您的IFRAME的ID。然后你可以插入高度值，它只设置IFRAME的CSS高度。

$("#iframe").css("height", "50px");

您可以使用.css设置任何CSS值。

iframe使用Javascript更改大小

2 个答案: