使用Javascript或Jquery完全隐藏框架集中的框架 [英] Completely Hide frame in framesets using Javascript or Jquery
问题描述
请在HTML文件代码下面详细说明。在这里我试图使用jQuery的切换功能。在这里，我的content.HTML页面的切换工作正常。
当我点击任何图像或按钮时，我需要完全隐藏顶部框架，并且当我再次单击它时取消隐藏。
请帮助我在哪里我犯了错误。
<！DOCTYPE html PUBLIC - / / W3C // DTD HTML 4.01 Frameset // ENhttp://www.w3.org/TR/html4/frameset.dtd\">
< html>
< head>
< title>框架示例标题（用您自己的标题替换此部分）< / title>
< script src =http://code.jquery.com/jquery-1.11.0.min.js>< / script>
< / head>
< frameset rows =10％，90％border =0name =FrameName>
< frame name =topFramesrc =menu_1.htmltarget =right>< / frame>
< frame name =menusrc =content.htmltarget =_ self>< / frame>
< noframes>
// ....
< / nFrames>
< / frameset>
< script>
$（document）.ready（function（）{
$（button）。click（function（）{
$（'frame [name =topFrame]'）。 fadeToggle（slow）;
$（＃top）。toggle（）;
}）;
}）;
< / script>
< / html>
content.html
< html>
< head>
< title> HTML框架示例 - 内容< / title>
< style type =text / css>
body {
font-family：verdana，arial，sans-serif;
font-size：10pt;
margin：30px;
背景颜色：＃ffcc00;
}
< / style>
< script src =http://code.jquery.com/jquery-1.11.0.min.js>< / script>
< / head>
< body>
< h1>内容< / h1>
< br>
< button id =button1>切换'em< / button>
< p> Hiya< / p>
< p>这样有趣的文字，呃？< / p>
< script> （'click'，function（）{
$（p）.toggle（slow）;
$（h1）。切换（慢）;
}）;
< / script>
< / body>
< / html>
menu_1.html
< html>
< head>
< title> HTML框架示例 - 菜单1< / title>
< style type =text / css>
body {
font-family：verdana，arial，sans-serif;
font-size：10pt;
margin：10px;
背景颜色：＃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>菜单1< / h3>
< p>< a href =white.htmltarget =content>白页< / a>< / p>
< / body>
< / html>
隐藏菜单框onclick切换按钮。
问题是您无法从父框架中访问JavaScript函数，因此需要像下面那样做一些变通： p>
在父项中添加一个事件侦听器并调用切换帧函数（帧不能隐藏或直接使用css的display属性显示，因此添加了两个独立函数）：
........
< frame name =topFramesrc =menu_1.htmltarget =right>< / frame>
< frame name =menusrc =content.htmltarget =_ self>< / frame>
< noframes>
// ....
< / nFrames>
< / frameset>
< script>
var origCols = null;
函数receiveMessage（事件）
{
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 =button1onclick =parent.postMessage（'button1 clicked'，'*'）;>
切换'em< /按钮>
Please go thorough below HTML files code.
Here I am trying to use toggle function of jQuery. Here my toggle for "content.HTML" page is working perfectly.
I need to hide the "topFrame" Completely when I click on any image or button and unhide it when I click on it again.
Please help me where I've made mistake. I've tried a lot to accomplish this but I am not able to do.
<!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>
Here you have toggle button in content frame and want to hide menu frame onclick of toggle button.
Problem is you cannot access javascript function present in parent from child frame, hence need to do some work-around like below :
Add a event listener in parent and call toggle frame function (frame cannot be hide or show directly using display property of css, hence added two seperate function) :
........
<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>
And now write onclick of button like below :
<button id="button1" onclick="parent.postMessage('button1 clicked', '*');">
Toggle 'em</button>
这篇关于使用Javascript或Jquery完全隐藏框架集中的框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
