0

我需要改变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' 的大小没有改变。

4

2 回答 2

1

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

在没有看到您的实际文档的情况下，我只能想象您在 中调用 Javascript<head>并<iframe>在<body>.

这样做的问题是，当 Javascript<head>被执行时，还没有<iframe>创建，所以没有对象可以改变！

<body>一种解决方案是在创建之后调用您的 Javascript <iframe>。或者，您可以在创建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";
    }
}
于 2013-04-16T20:21:42.823 回答
0

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

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

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

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

于 2013-04-16T20:40:01.523 回答