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

Completely Hide frame in framesets using Javascript or Jquery

本文关键字：框架 隐藏 集中 Javascript Jquery 使用      更新时间：2023-09-26

请通读下面的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>

这里你有一个切换按钮在内容框架，并希望隐藏菜单框架的切换按钮的点击。

问题是你不能从子框架访问父框架中存在的javascript函数，因此需要做一些变通，如下所示:

在parent中添加一个事件监听器并调用toggle frame函数(frame不能直接使用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>

现在像下面这样写onclick按钮:

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

尝试使用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>
相关文章：