Question

我正在尝试使用jQuery将iframe更改其来源 - 从文档的完整版本更改为移动版本 - 当视口宽度发生变化时。这是我目前的代码：

<head>
    <script type="text/javascript">
        $(document).ready(function() {
            // on full-sized viewports
            if((document).width >= 1000) {
                // this line should change the src attribute
                $("#myIframe").attr('src', 'http://www.fullsize.url');

                // this just resizes the iframe
                $("#myIframe").width = 1000;
                $("#myIframe").height = 1200;
            }

            // on mobile viewports
            else {
                $("#myIframe").attr('src', 'http://www.mobilesize.url');
                $("#myIframe").width = 640;
                $("#myIframe").height = 800;
            }
        });
    </script>
</head>
<body>
    <iframe id="myIframe" src="http://www.fullsize.url">
</body>

我遇到的问题是新的src，width和height属性实际上并未更新 - 我不确定原因。

使用jQuery是否可以这样，考虑到这需要加载一个新的iframe？我是否需要使用Ajax进行解决方法以避免重新加载页面？

Answer 1

使用$("#myIframe").width(value)和$("#myIframe").height(value)

修改：并将(document).width替换为$(window).width()

根据视口宽度更改iframe源

1 个答案: