jQuery：如何隐藏父框架？

Question

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

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

$(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>

Answer 1

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

Answer 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）。

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

Answer 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]); } }

Answer 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)');
            }

Answer 5

您可以使用以下命令修改框架集：

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

        ....

 //展示
        $('#myFrameSet', top.document).attr({'rows':orig})
        原始=空；

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