使用 Javascript 或 Jquery 完全隐藏框架集中的框架答案

【问题标题】：Completely Hide frame in framesets using Javascript or Jquery使用 Javascript 或 Jquery 完全隐藏框架集中的框架
【发布时间】：2014-06-04 06:10:12
【问题描述】：

请仔细阅读下面的 HTML 文件代码。
这里我尝试使用 jQuery 的切换功能。在这里，我对“content.HTML”页面的切换运行良好。
当我点击任何图像或按钮时，我需要完全隐藏“topFrame”，当我再次点击它时取消隐藏它。

请在我犯错误的地方帮助我。我已经尝试了很多来实现这一点，但我无法做到。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
    <title>Frameset Example Title (Replace this section with your own title)</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
         $('frame[name="topFrame"]').fadeToggle("slow");
        $("#top").toggle();
      });
    });
    </script>
    </html>

content.html

<html>
<head>
<title>HTML Frames Example - Content</title>
<style type="text/css">
body {
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    margin:30px;
    background-color:#ffcc00;
    }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


</head>
<body>
<h1>Content</h1>
<br>

<button id="button1">Toggle 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>

<script>
$('button').on('click',function(){
     $( "p" ).toggle( "slow" );
      $( "h1" ).toggle( "slow" );
});
</script>

</body>
</html>

menu_1.html

<html>
<head>
<title>HTML Frames Example - Menu 1</title>
<style type="text/css">
body {
    font-family:verdana,arial,sans-serif;
    font-size:10pt;
    margin:10px;
    background-color:#ff9900;
    }
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
(function(){
    $('img, button').on("click" , function (e) {
        $('p').toggle();
    });
});
</script>
</head>
<body>
<h3>Menu 1</h3>
<p><a href="white.html" target="content">White Page</a></p>
</body>
</html>

【问题讨论】：

感谢 @Bhushan 以更好的方式提出我的问题 :)
我猜你绑定click事件太多了，让它同时隐藏/显示，组织你的点击功能或在绑定之前取消绑定。

标签： javascript jquery html

【解决方案1】：

这里您在内容框架中有切换按钮，并且想要在单击切换按钮时隐藏菜单框架。

问题是您无法从子框架访问父级中存在的 javascript 函数，因此需要做一些解决方法，如下所示：

在 parent 中添加事件监听器并调用切换框架功能（框架不能直接使用 css 的 display 属性隐藏或显示，因此添加了两个单独的功能）：

........

    <frameset rows="10%,90%" border="0" name="FrameName">   
    <frame  name="topFrame" src="menu_1.html" target="right"></frame>
    <frame name="menu" src="content.html" target="_self"></frame>

    <noframes>
    //....
    </noframes>

    </frameset>
    <script>
        var origCols = null;
        function receiveMessage(event)
        {
          if(origCols!=null)
           showFrame()
          else
           hideFrame();
        }

        addEventListener("message", receiveMessage, false);

        function hideFrame() {
            var frameset = document.getElementById("frameSet");
            origCols = frameset.rows;
            frameset.rows = "0, *";
        }

        function showFrame() {
            document.getElementById("frameSet").rows = origCols;
            origCols = null;
        }
        </script>
    </html>

现在写下点击按钮，如下所示：

<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>

【讨论】：

如果它对某人不起作用，请将脚本从框架集结束标记之后移动到内部头部。

【解决方案2】：

尝试使用 ID 这是一个简短的例子..

<div><a id="thumbnail">Click here to Show/Hide Thumbnail</a></div>
<div id="showhide"> Your Content to hide or show </div>

<script type="text/javascript">
   $('#thumbnail').click(function() {
     $('#showhide').toggle();
   });
</script>

【讨论】：