Question

我有一些演示网站的代码，用于向用户显示平板电脑和移动选项中的网站宽度。

HTML

<a class="widthOne widthBtn"><img src="files/images/graphics/ico_mobile.png" title="View at mobile size" alt="View at mobile size" /></a>
<a class="widthTwo widthBtn"><img src="files/images/graphics/ico_tablet.png" title="View at tablet size" alt="View at tablet size" /></a>

<iframe class="sizeFrame" src="http://www.website.com/" style="width:340px;" frameborder="0"></iframe>

的jQuery

// CHANGE WIDTH
$( ".widthOne" ).click(function() { $('.sizeFrame').css('width', '340px'); });
$( ".widthTwo" ).click(function() { $('.sizeFrame').css('width', '1024px'); });

// MAKE THE IFRAME 100% HEIGHT
jQuery(document).ready(function(){var height = $(window).height();
         $('iframe').css('height', height)
});

此代码工作正常，我的问题是，当网站更改大小时它会破坏CSS导航，所以我需要在每次单击按钮后刷新页面或框架。我找到了：

location.reload();

但是，当我点击链接更改框架尺寸时，它会刷新但是宽松有意义，任何人都知道如何更换宽度并保持宽度。

由于

Answer 1

如果您在单击链接时尝试重新加载iframe，则可以尝试以下操作：

http://jsfiddle.net/rsmclaug/5VcX7/

// CHANGE WIDTH
$( ".widthOne" ).click(function() { 
    $('.sizeFrame').css('width', '340px'); 
    $('.sizeFrame')[0].contentWindow.location.reload();
});
$( ".widthTwo" ).click(function() {
    $('.sizeFrame').css('width', '1024px'); 
    $('.sizeFrame')[0].contentWindow.location.reload();
});

// MAKE THE IFRAME 100% HEIGHT
jQuery(document).ready(function(){var height = $(window).height();
    $('iframe').css('height', height)
});

不太确定你的意思＆＃34; CSS导航＆＃34; ...

jQuery iFrame帧大小代码需要刷新选项

1 个答案: