Jquery:根据窗口大小调整iframe的大小并保留上次显示的内容



另一个jquery问题。。。。。。。。。

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

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


[EDIT]

我想我需要更具体一点(我的错)。。。。。。。。

页面(index.php)由一个DIV组成,该DIV只包含URL。访问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内容(URL来自跨域或我自己的域这一事实不应该被屏蔽,因为我的iframe宽度是固定的,高度=window.height-100。)

编辑

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

(1) 当更新位置时,添加1个存储Iframes内容URL 的附加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());
}

我认为它应该能适应你的需要。

相关内容

最新更新