0

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

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

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

也许已经写了一些东西可以实现这一点，我尝试在 iframe 上做一些 js，似乎很难编写独立于浏览器的代码。

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

4

2 回答 2

2

一个例子。

基本上，只要给你扩展的iframe这些 CSS 属性，

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

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

于 2012-10-24T17:07:45.377 回答
1

来源： “全屏”<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;
}
于 2012-10-24T17:04:20.153 回答