Calling A Javascript Function in a Parent Window from a link inside an iFrame

444
February 25, 2017, at 10:00 AM

I've got a parent page and a child page issue involving JavaScript functions back and forth. The basic idea (this is for a menu system on a mobile site for thousands of pages of content) is that there is a NAV on the parent page which is hidden using CSS (z-index) which has an iFrame in it. On the body of the parent page is a button which performs two JavaScript functions: it swaps the z-index to display the NAV over the body and it loads the child page into the iFrame in the NAV. This is all working well.

My issue is that I have another button in the NAV and the function that performs is to re-hide the NAV (send the z-index back to its hidden location). I want to get rid of this button and have the iFrame take up the entire NAV, and then I want to have a button on the child page which calls the same function to reset the z-index.

Basically, you see a blank page with a button, you hit the button and a NAV window appears with content loaded in an iFrame. And in this iFrame is a button to make the NAV disappear and again just show a black page with the first button.

I scoured over the site and googled this several times but I'm a JavaScript novice and I can't quite figure out how to make the button on the child page call the JavaScript function on the parent page. I followed some of the suggestions made on this post: link, but all I get now is that the button on the child page make the parent disappear and loads the child page in the browser (not what I was going for).

Here's the CSS & HTML/JAVASCRIPT on the Parent Page:

/*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; 
}
<!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>

And here's the CSS & HTML/JAVASCRIPT for the child:

<!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>

Any help would be hot. Thank you!

Note: the javascript for this was created using Codrops blueprint for Slide & Push Menus.

Rent Charter Buses Company
READ ALSO
running Js test getting error window is defined

running Js test getting error window is defined

running JS tests using karma + jasmine

374
Semantic UI dropdown user addition only allow email address

Semantic UI dropdown user addition only allow email address

The dropdown is being used to allow the visitor to search for users/email addresses or enter in a custom email address

804
Finding text within complex html document structure with javascript

Finding text within complex html document structure with javascript

I am writing an automation script that will pull information from a dynamically generated webpageI cannot control the information on it, thus I am having trouble referencing the information

278
Why using Webpack-dev-server to start a React App returned my directory structure

Why using Webpack-dev-server to start a React App returned my directory structure

I am new to webpack-dev-server and have this questionCan you please explain and help me to fix it?

426