Fatal编程技术网
  • jquery/
  • Jquery：根据窗口大小调整iframe的大小并保留最后显示的内容

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

jquery

Jquery：根据窗口大小调整iframe的大小并保留最后显示的内容,jquery,Jquery,另一个jquery问题 我成功地根据windows.height和windows.width调整了页面大小。此页面包含一个div和一个iframe。如果调整该页面的大小，iframe将始终显示默认内容，而不是调整窗口大小之前可见的内容 调整窗口大小时，如何保留iframe最后显示的内容 [编辑] 我想我需要更具体一点（我的错） 页面（index.php）由一个只包含URL的DIV组成。访问URL时，结果将显示在iframe中。iframe的固定宽度为100%，高度取决于浏览器窗口的高度（像素）

另一个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=屏幕宽度和sh=屏幕高度）正在其他子页面中使用

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

调整大小还意味着iframe显示默认内容。我如何传递最后显示的iframe内容（URL来自跨域或我自己的域这一事实不重要，因为我的iframe宽度是固定的，高度=window.height-100）。

编辑

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

（1） 更新位置时，添加1个额外的GET参数来存储Iframes内容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
来实现，这不会强制浏览器重新加载页面，但如果要在需要此参数的任何地方检测哈希更改，则会执行此操作。因此，我将使用一个自定义事件并在
$（窗口）内触发它

原始答案：

几个月前我遇到了一个类似的问题，我用下面的方法解决了这个问题

在HTML中，iframe的某个地方：


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



我认为它应该适合您的需要。
iframe的内容是属于您的域还是跨域？iframe的内容属于我的域！我编辑了我的问题，因为我不够具体（我的错）……对不起。希望你能/仍会帮助我！！嗨，我还是不确定我是否明白你的意思，但我编辑了我的答案。我不确定您需要URL参数做什么，以及为什么需要硬重定向。通常，您应该仅在必要时使用ajax请求来更新内容。而修改页面元素的尺寸通常是一项仅限于JS的工作。离开几天了……。我现在正试图通过使用AJAX和POST来摆脱包含高度和宽度的参数。我会让你知道我是怎么做的！谢谢你支持我！

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



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



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