This article describes the method of implementing iframe cross-page calling function by js. Share it for your reference. The specific implementation method is as follows:
In projects, you will inevitably encounter such a problem. The page introduces an IFrame and requires the parent page to call the child page function or the child page needs to call the parent page function. For example: There are now two pages and. It contains an IFrame and the IFrame points to. Now you need to call a js method in /.
The specific code implementation is as follows:
Parent page:
Copy the codeThe code is as follows:
<html>
<head>
<script type="text/javascript">
function parent_click(){
alert("from parent page");
}
</script>
</head>
<body>
<input type="button" value="Calling this page function" onclick="parent_click();" />
<input type="button" value="Calling child page function" onclick='["childPage"].child_click();' />
<iframe name="childPage" src="" width="100%" frameborder="0"></iframe>
</body>
</html>
<head>
<script type="text/javascript">
function parent_click(){
alert("from parent page");
}
</script>
</head>
<body>
<input type="button" value="Calling this page function" onclick="parent_click();" />
<input type="button" value="Calling child page function" onclick='["childPage"].child_click();' />
<iframe name="childPage" src="" width="100%" frameborder="0"></iframe>
</body>
</html>
Subpage:
Copy the codeThe code is as follows:
<html>
<head>
<script type="text/javascript">
function child_click(){
alert("Called subpage function");
}
</script>
</head>
<body>
<input type="button" value="Calling parent page function" onclick='.parent_click();' />
<input type="button" value="Calling this page function" onclick="child_click();" />
</body>
</html>
<head>
<script type="text/javascript">
function child_click(){
alert("Called subpage function");
}
</script>
</head>
<body>
<input type="button" value="Calling parent page function" onclick='.parent_click();' />
<input type="button" value="Calling this page function" onclick="child_click();" />
</body>
</html>
I hope that the description in this article will be helpful to everyone's web programming based on javascript.