Question

我在页面中的iframe中有几个应用程序合并应用程序（它充当应用程序容器）。

我想在某处添加一个按钮，可以将iframe展开并折叠到页面的完整大小。

该应用程序现在有一个菜单，页眉，页脚等，以及iframe中的应用程序。当用户点击说＆＃34; +＆＃34;按钮我想将iframe扩展到整个页面并使其他所有内容都不可见。当他们再次点击它时，我想恢复原始大小。

也许已经写了一些可以实现这一点的东西，我试图在iframe上做一些js，而且编写与浏览器无关的代码似乎很难。

我不能使用HTML5，因为我们需要支持IE7。

Answer 1

基本上，只需提供展开的iframe这些CSS属性，

position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;

它将填充其（相对）父母。

Answer 2

来源： "Full screen" <iframe>

您可以使用传统的JS或jQuery来实现这一目标。 jQuery是一个JS库，旨在以一种理智的方式允许跨浏览器的DOM处理。

如果我是你，我可能会将其编码为（使用jQuery）：

$('iframe#myid').click(function() {
    $('iframe#' + current).removeClass('current');
    $('iframe#myid').addClass('current');
    var current = '#myid';
});

使用CSS代码：

body, iframe {
    margin: 0px; //to normalize the default stylesheet applied by the browser
}

iframe.current {
    position: absolute;

    top: 0; 
    left: 0;

    height: 100%;
    width: 100%;

    z-index: 999;
}

使iframe展开/折叠

2 个答案: