Question

我有一个父页面和一个涉及JavaScript函数来回的子页面问题。基本思想（这是针对数千页内容的移动网站上的菜单系统）是在父页面上有一个NAV，它使用CSS（z-index）隐藏，其中包含iFrame。在父页面的主体上是一个执行两个JavaScript函数的按钮：它交换z-index以在主体上显示NAV，并将子页面加载到NAV中的iFrame中。这一切都运作良好。

我的问题是我在NAV中有另一个按钮，执行的功能是重新隐藏NAV（将z-index发送回其隐藏位置）。我想摆脱这个按钮并让iFrame占用整个NAV，然后我想在子页面上有一个按钮，它调用相同的函数来重置z-index。

基本上，您会看到一个带有按钮的空白页面，您点击该按钮会出现一个NAV窗口，其中的内容已加载到iFrame中。在这个iFrame中是一个按钮，让NAV消失，再次只显示一个带有第一个按钮的黑页。

我在网站上搜索并搜索了几次，但我是一个JavaScript新手，我无法弄清楚如何让子页面上的按钮调用父页面上的JavaScript函数。我遵循了这篇文章中提出的一些建议：link，但我现在得到的是，子页面上的按钮使父项消失，并在浏览器中加载子页面（不是我想要的）

这里是CSS＆amp;父页面上的HTML / JAVASCRIPT：

＆＃13;

/*Basic Style*/
	body {
		margin: 0;
		color: #FFFFFF;
		font-family: tahoma;
		text-wrap: suppress;
	}
/*End: Basic Style*/	
	
/*Pop Out Menu Styles*/
.PopOutMenu {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	z-index: 1000;
	overflow: hidden;
	background-color: #FFFFFF;
}
.PopOutMenu-Top {
	top: -2000px;
}
.PopOutMenu-Top.PopOutMenu-Open {
	top: 0px;
}
.PopOutMenu,
.PopOutMenu-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
/*End Menus*/
	
/*Header*/
#header {
	width: 100%;
	height: 7%;
	background-color: blue;
	display: table;
	position: fixed;
	padding-top: 1%;
	padding-bottom: 1%;
	text-align: center;
}

#showChild {
	font-family: tahoma;
	font-size: 4vw;
	line-height: 1.6875;
	border: none;
	color: white;
	text-decoration: none;
	background-color: inherit;
	background-color: #0F9600;
	width: 30vw;
}
#showChild:active {
	background-color: darkgreen;
}
#MenuContainer {
    position: relative;
    padding-bottom: 100%;
	padding-top: 100%;
    height: 0;
    overflow: hidden;
}
#MenuContainer iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 101%;
    height: 100%;
	border: 0;
}
/*End Header*/

.BackButton {
	background-color: red;
	text-align: center;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ButtonSwap-4</title>

<script>
function loadFrame (elm){
    var frame1 = document.getElementById('menuframe');
    frame1.src = elm.dataset.src;
}
</script>
<link href="parent-style.css" rel="stylesheet" type="text/css">
</head>

<body>

<nav class="PopOutMenu PopOutMenu-Horizontal PopOutMenu-Top" id="PopOutMenu-1">
	<div class="BackButton">				<button id="closeNAV">
			X
		</button>
	</div>

	<div id="MenuContainer">
		<iframe id="menuframe"></iframe>
	</div>

</nav>

<div id="header">
	<button id="showChild" data-src="child.html"> Open NAV</button>
</div>





<script src="../../../../js/classie.js"></script>
<script>
closeNAV.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuTop, 'PopOutMenu-Open' );
	disableOther( 'closeNAV' );
};
function disableOther( button ) {
	if( button !== 'closeNAV' ) {
		classie.toggle( closeNAV, 'disabled' );
	}
}
	
var menuTop = document.getElementById( 'PopOutMenu-1' ),
	showChild = document.getElementById( 'showChild' ),
	body = document.body;
showChild.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuTop, 'PopOutMenu-Open' );
	disableOther( 'showChild' );
	loadFrame(this);
};
function disableOther( button ) {
	if( button !== 'showChild' ) {
		classie.toggle( showChild, 'disabled' );
	}	
}


</script>
	
</body>
</html>

＆＃13;

这里是CSS＆amp;孩子的HTML / JAVASCRIPT：

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#ChildContainer {
	display: table;
	background-color: green;
	width: 100%;
	height: 100%;
	vertical-align: middle;
	text-align: center;
}
</style>
</head>

<body>
<div id="ChildContainer">
	<a href="#" id="closeNAV" onclick="window.top.disableOther( button ) {
	if( button !== 'closeNAV' ) {
		classie.toggle( closeNAV, 'disabled' );">Close NAV</a>
</div>
</body>
</html>

＆＃13;

任何帮助都会很热。谢谢！

注意：此javascript是使用Codrops blueprint for Slide & Push Menus.

创建的

从iFrame

0 个答案: