Home >Web Front-end >JS Tutorial >Call the JS method of the child page on the parent page
After working on it all day, I finally found a solution online
Note: The problem is the method of calling the child page on the parent page. . . . .
Parent page: parent.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>parent</title> <script> function parentFunction() { alert('function in parent'); } function callChild() { child.window.childFunction(); /* child 为iframe的name属性值, 不能为id,因为在FireFox下id不能获取iframe对象 */ } </script> </head> <body> <input type="button" name="call child" value="call child" onclick="callChild()"/> <br/><br/> <iframe name="child" src="./child.html" ></iframe> </body> </html>
Child page: child.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>child</title> <script> function childFunction() { alert('function in child'); } function callParent() { parent.parentFunction(); } </script> </head> <body> <input type="button" name="call parent" value="call parent" onclick="callParent()"/> </body> </html>
You can modify the corresponding code according to your own needs
More related articles about JS methods of calling child pages on the parent page Please pay attention to PHP Chinese website!