jQuery：如何在父级上隐藏框架？答案

【问题标题】：jQuery: How to hide a frame on parent?jQuery：如何在父级上隐藏框架？
【发布时间】：2009-11-24 17:38:56
【问题描述】：

我的主页在框架集中包含多个框架。其中一个框架是带有按钮的工具栏，我希望能够按下该工具栏上的一个按钮，它会隐藏主页上的一个框架。

我在工具栏框架中尝试了以下操作，但它不起作用...

$(document).parent.$("#other_frame").hide("slow");

我是 jQuery 的新手，在网上搜索后我几乎迷路了。

感谢您的帮助。

编辑：我的完整主页

<frameset frameborder="0"  rows="70, *">
   <frame name="toolbar" src="toolbar.html" marginwidth="8px" marginheight="8px" />
   <frameset id="lineNumFrameset" frameborder="0" cols="50, *">
      <frameset rows="*, 16">
      <frame id="other_frame" name="lineNum" src="lineNum.html" marginwidth="8px" marginheight="8px" align="top" />
      </frameset>

      <frame name="editor" src="editor.html" marginwidth="8px" marginheight="8px" />
   </frameset>
</frameset>

【问题讨论】：

你试过了吗：$('#other_frame').hide();它会返回任何 javascript 错误还是无法正常工作？

标签： jquery hide parent frame

【解决方案1】：

就我对事物的理解而言，您需要执行隐藏在 div 上的操作。基本上，无论您试图影响什么，都需要响应 css 显示属性。如果您必须使用框架，我强烈建议您改用 div，那么您将需要编写一些 jQuery 来实际从 DOM 中删除框架，而不是仅仅试图隐藏它。

【讨论】：

我认为这是真的，您可以隐藏 iframe，但不能隐藏框架集中的框架（因为它们没有通过 css 显示或设置样式）。
我在帖子中添加了主页代码。我可以通过简单地更改框架集 cols 大小来隐藏带有 id="other_frame" 的框架...但我想使用 jQuery 创建一个很酷的动画（带隐藏）效果。

【解决方案2】：

$(document).parent.$("#other_frame").hide("slow");

啊。这里有几个问题。首先，调用函数是parent()。但是，jQuery 不能使用parent() 跳出文档到父文档。要向上导航帧，您需要 window.parent 属性：

window.parent.$('#other_frame').hide('slow');

但要使其工作，您需要在父文档中加载 jQuery 的副本，以便您可以调用它的 $。（从另一个文档的$ 副本编写一个文档的脚本通常不起作用；jQuery 并不是专门为跨框架脚本而设计的。）

它不起作用的最后一个原因是您不能真正编写/样式化框架集页面。浏览器可能会忽略这些特殊页面中的脚本，并且许多 CSS 属性在框架上不起作用（包括 jQuery 的 hide() 使用的 display: none）。

尝试使用iframes 而不是frames 以获得更易于编写脚本的页面。（不过，让框架样式的layout: fixed 东西在 IE6 中工作会很痛苦。）或者，如果您可以管理它，那么在一个文档中完成所有操作会更易于管理。跨框架脚本有许多微妙而烦人的陷阱。

【讨论】：

【解决方案3】：

我是这样做的，没有 jquery，我在调用 go() 函数的主框架中有一个“链接”。 go 函数展开或折叠“FrameSetMain”的第一帧。我在 ie8 和 firefox 3.6 上测试过。

var oggFS = parent.document.getElementById("FrameSetMain");
var startingWidth = oggFS.cols
var w = 0;
function collapse(min) { 
    s = oggFS.cols.split(",");
    w = parseInt(parseFloat(s[0]) / 2);
    oggFS.cols = w + ",8,*";
    if (w>min) { setTimeout("collapse("+min+")",50); } else {
        oggFS.cols = min + ",8,*";
        document.getElementById("link").title = "Show menu";
    }
}
function expand(max) { 
    s = oggFS.cols.split(",");
    if (s[0]==0) s[0]=5;
    w = parseInt(parseFloat(s[0]) * 2);
    oggFS.cols = w + ",8,*";
    if (w<max) { setTimeout("expand("+max+")",50); } else {
        oggFS.cols = max + ",8,*";
        document.getElementById("link").title = "Hide menu";
    }
}
function go(){ if (oggFS.cols != "0,8,*") { collapse(0); } else { s = startingWidth.split(","); expand(s[0]); } }

【讨论】：

【解决方案4】：

试试这个：

if(window.parent.document.getElementById("myFrameset").cols!="40px,*"){
                $('#left-title-txt').hide();
                window.parent.document.getElementById("myFrameset").cols="40px,*";
                $(this).css('background-image','url(img/openleft.png)');
            }else{
                $('#left-title-txt').show();
                window.parent.document.getElementById("myFrameset").cols="20%,80%";
                $(this).css('background-image','url(img/hideleft.png)');
            }

【讨论】：

【解决方案5】：

您可以使用以下内容修改框架集：

 //hide
        var orig = $('#myFrameSet', top.document).attr('rows');
        $('#myFrameSet', top.document).attr({'rows':'0,*'})

        ....

 //show
        $('#myFrameSet', top.document).attr({'rows':orig})
        orig = null;

您也可以对列执行此操作。

【讨论】：