个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 12:42:13 24 4
gpt4 key购买 nike

请仔细阅读下面的 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>

现在像下面这样写按钮的点击:

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

关于javascript - 使用 Javascript 或 Jquery 完全隐藏框架集中的框架，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24030228/

24 4 0
文章推荐： swift - SKProductsRequest 有时不返回任何产品
文章推荐： swift - 如何将视频保存到应用程序的目录并在 View Controller 中播放？
文章推荐： ios - 暂停父 View Controller 的 UIGestureRecognizer
文章推荐： javascript - Ext js 4动态更改文本字段输入类型
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com