Question

我希望我的IFrame的宽度是两种尺寸中的一种，具体取决于浏览器窗口的宽度。不幸的是，即使在刷新时，下面的代码也没有给出预期的结果。我做错了什么？

HTML如下：

<p>A frame example:<br>
    <iframe src="www.google.com">
    </iframe>
</p>

一开始，我导入的样式表除了以下内容外都适用于所有方面：

iframe
{
<script>
    if (window.innerWidth<800px)
    {
    width="200";
    }
    else
    {
    width="400";
    }
</script>
height="400";
}

关于我可以改进的任何想法？

Answer 1

您无法在css中使用javascript。只需使用媒体查询来解决问题

@media all and (max-width:800px) {
    iframe {
        width: 200px;
    }
}

@media all and (min-width: 801px) {
    iframe {
        width: 400px;
    }
}

Answer 2

最好使用css媒体查询，但如果您想使用JavaScript更改宽度，则可以监听onresize窗口事件并更改事件处理程序内的宽度。

请注意，我在iframe中添加了id，因此您可以在JavaScript中快速选择它。

HTML

<iframe id="myIframe" src="www.google.com"></iframe>

的JavaScript

(function() {
    var iframe = document.getElementById('myIframe');
    iframe.height = 400;

    window.onresize = resizeIframe;

    function resizeIframe() {
        if (window.innerWidth < 800) {
            iframe.width = 200;
        }
        else {
            iframe.width = 400;
        }
    }
}());

查看jsfiddle示例

使用CSS和JavaScript更改IFrame宽度

2 个答案: