Question

另一个jquery问题.........

我成功调整了基于windows.height和windows.width的页面大小。此页面包含div和iframe。如果调整了该页面的大小，则iframe始终显示默认内容，而不是在调整窗口大小之前可见的内容。

如何在调整窗口大小时保留iframe的最后显示内容？

[编辑]

我想我需要更具体（我的错）........

页面（index.php）由仅包含URL的DIV组成。访问网址时，结果会显示在iframe中。 iframe的固定宽度为100％，高度取决于浏览器窗口的高度（像素）减去100.

$('#frame').attr('width',$(window).width());
$('#frame').attr('height',($(window).height() - 100));

我还使用变量传递主URL：index.php？sw = ....＆amp; sh = ..... 这些变量（sw = screenwidth和sh = screenheight）正在其他子页面中使用。

如果我的页面在浏览器中被调用，例如“/”.......重定向到/index.php?sw=....&sh= ..（因为我需要这些变量sw / sh in subpages）：

            $(document).ready(function(){
                <?php if (empty($_GET['sh'])){ ?>
                $(window).height(); // Height
                $(window).width(); //  Width
                window.location.href="index.php?sw=" + $(window).width() + "&sh=" + $(window).height();
            <?php } ?>

如果我调整浏览器窗口的大小，则会更新“window.location.href”并更新sw和sh的值。

                $(window).resize(function() {                  
                    window.location.href="index.php?sw=" + $(window).width() + "&sh=" + $(window).height();
            });

调整大小也意味着iframe显示默认内容。如何传递最后显示的iframe内容（URL来自跨域或我自己的域不应该无法覆盖，因为我的iframe宽度是固定的，而height = window.height-100。）

Answer 1

修改

要保留内容我有2个想法：

（1）更新位置时，添加1个存储Iframes内容网址的附加GET参数

（2）不要重新加载页面，而是尝试更新URL的参数。您可以通过在#之后添加index.php，将标准GET参数更改为自定义参数来执行此操作。例如：

index.php#sw=" + $(window).width() + "&sh=" + $(window).height(); // instead of index.php?sw=" + $(window).width() + "&sh=" + $(window).height();

这可以通过仅设置window.location.hash来完成，这不会强制浏览器重新加载页面，但您将在任何需要此参数的地方检测哈希更改。因此，我会使用自定义事件并在$(window).resize(function() { });内触发它。

原始回答：

我在几个月前遇到了一个类似的问题，我用下面的内容解决了这个问题。

在HTML中有iframe的某个地方：

<html> ... <body> ... <div id="main"> ... <iframe id="frame"></iframe> </div> ... </body> </html>

和JS：

$(document).ready(function () { // do it after dom ready resizeIframe(); // and/or retry it on load $('iframe#frame').load(function(){ resizeIframe(); }); // some browsers need a little more time UI.setTimeout(function(){ // and/or retry it on load $('iframe#frame').load(function(){ resizeIframe(); }); }, 100); }); function resizeIframe(){ // set iframe width to a little less than surrounding page's width $('iframe#frame').width($('div#main').width()-50); // set iframe height to iframe's content height $('iframe#frame').height($('iframe#frame').contents().height()); }

我认为它应该适合您的需求。

Jquery：根据窗口大小调整大小iframe并保留最后显示的内容

1 个答案: