Invoke javascript function in parent page from child page
Question
I need to call a function in the main page from the child page. Below i have 2 pages. 1. main.aspx and child page is 2.active.aspx. In active.aspx i have a button called "exit' . when i click on the exit button , i need to close the modal popup and then i need to call function "main" which is a javascript function in the main page. Problem is i am not able to invoke the function from the child page.
Main.aspx
<html>
<head>
<script type="text/javascript">
function main() {
//do main work
}
</script>
</head>
<body>
<div>
<input type="button" class="ic-grid-encode center-btn" title="Interactive"
data-toggle="modal" data-target="#divInterActiveContent" />
</div>
<div class="modal fade" id="divInterActiveContent" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" align-self="" center;"="">
<iframe id="interId" src="active.aspx"></iframe>
</div>
</div>
</body>
</html>
Active.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link href="../Content/bootstrap.css" rel="stylesheet">
<script src="../Scripts/jquery-3.1.1.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/knockout-3.4.2.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript">
self.btnExit = function () {
parent.$('#divInterActiveContent').modal('hide');
//after closing the popup i need to call the javascript function defined in the main page
//i.e i need call function main which is there in the main window.
}
</script>
</head>
<body>
<form id="frmInterActiveEncode">
<div class="container">
<div class="row" style="margin-top: 10px;">
</div>
<hr>
<br>
<hr>
<div class="row">
<input type="button" value="Submit" class="btn btn-primary" data-bind="event: { click: btnSubmit }">
<input type="button" value="Exit" class="btn btn-primary" data-bind="event: { click: btnExit }">
</div>
</div>
</form>
</body>
</html>
1 answers
solution1
0 ACCPTED 2017-05-05 01:56:23
In your scenario, you are actually closing the modal first ie you are closing the iframe also so you are not able to get parent object in child page after closing the modal.
You should do like
active.aspx
self.btnExit = function () {
parent.main();
}
main.aspx
function main(){
$('#divInterActiveContent').modal('hide');
// Do your stuff
}
This way you can call the parent function and instead of hiding the modal in child hide it in parent function and your next stuff you want to do.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.