在Iframe中呼叫父子頁面的js方法
阿新 • • 發佈：2019-01-24
說明：假設有2個頁面，index.html和inner.html。其中index.html中有一個iframe，這個iframe的src指向inner.html。
我們現在要做的就是：
1.在index.html中呼叫inner.html上的一個js方法
2.在inner.html中呼叫index.html上的一個js方法
實現程式碼如下：
我們現在要做的就是：
1.在index.html中呼叫inner.html上的一個js方法
2.在inner.html中呼叫index.html上的一個js方法
實現程式碼如下：
index.html
inner.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> <title>Untitled Page</title> <script type="text/javascript"> function ff() { alert("this is index's js function"); } </script> </head> <body> <div style="background: lightblue;"> This is index page. <input type="button" value="run index's function" onclick="ff();" /> <input type="button" value="run inner page's function" onclick='window.frames["childPage"].ff();' /> </div> <iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"> </iframe> </body> </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> <title>Untitled Page</title> <script type="text/javascript"> function ff() { alert("this is inner page's js function"); } </script> </head> <body> <div style="background: lightgreen;"> This is inner page. <input type="button" value="run index's function" onclick='parent.window.ff();' /> <input type="button" value="run inner page's function" onclick="ff();" /> </div> </body> </html>