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

【问题标题】：Jquery: resize iframe based on window-resize and keep last shown contentJquery：根据窗口调整大小调整 iframe 大小并保留最后显示的内容
【发布时间】：2014-01-01 13:16:30
【问题描述】：

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

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

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

[编辑]

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

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

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

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

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

            $(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-content （URL 来自跨域或我自己的域的事实不应该遮掩，因为我的 iframe-width 是固定的，并且 height = window.height-100。）

【问题讨论】：

是您的域的 iframe 内容还是跨域？
iframe 的内容在我的域中！

标签： jquery

【解决方案1】：

编辑

为了保留内容我有两个想法：

(1) 更新位置时添加 1 个额外的 GET 参数来存储 iframe 内容 URL

(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());
}

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

【讨论】：

我已经编辑了我的问题，因为我不够具体（我的错）......对不起。希望你能/仍然会帮助我！！
嗨，我仍然不确定我是否明白你的意思，但我编辑了我的答案。我不确定您需要 URL 参数的用途以及为什么需要硬重定向。通常，您应该仅在必要时使用 ajax 请求来更新内容。并且修改页面元素的尺寸通常是 JS 唯一的工作。
离开了几天........我现在正试图通过使用 AJAX 和 POST 来摆脱那些包含高度和宽度的 GET 参数。会让你知道我是如何进行的！谢谢支持我！