father.html通过iframe包含了son.html
father.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> function say(){ alert("这是father的say()"); } function callChild(){ myFrame.window.say(); myFrame.window.document.getElementById("button").value="调用结束" } </script> </head> <body> <input id="button" type="button" value="调用son.html中的函数say()" onclick="callChild()"/> <iframe name="myFrame" src="son.html"></iframe> </body> </html>
son.html
<html> <head> <meta charset="utf-8" /> <script type="text/javascript"> function say() { alert("这是son的say()"); } function callParent() { parent.say(); parent.window.document.getElementById("button").value = "调用结束"; } </script> </head> <body> <input id="button" type="button" value="调用father.html中的say()函数" onclick="callParent()" /> </body> </html>
方法是如何调用的?获取子页面或父页面的window对象,在通过对象调用方法。
父页面调用子页面方法:FrameName.window.childMethod();
子页面调用父页面方法:parent.window.parentMethod();
在方法调用前,以下点必须要注意!!!
在方法调用前,以下点必须要注意!!!
要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误。判断iframe是否加载完成有两种方法:
1. iframe上用onload事件
2. 用document.readyState=="complete"来判断
如果文章对你有帮助,麻烦帮忙点个赞哦!嘿嘿!做一个靠谱的技术博主!