html中嵌入iframe进行父子页面参数传递
生活随笔
收集整理的這篇文章主要介紹了
html中嵌入iframe进行父子页面参数传递
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實現的主要原理是：
1.父頁面調用子頁面函數，選擇iframe的id +?contentWindow +子頁面的函數名（[參數列表]）
2.子頁面調用父頁面函數，window.parent.父頁面的函數名（[參數列表]）
以下是測試代碼：
父頁面：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>父頁面</title></head><body><div id="ss" style="width: 400px;height: 400px; background: darkmagenta;"><button id="chuancan" onclick="chuandicanshu()">1</button></div><div id="main" style="position: fixed;left: 200px;top: 200px;background: red;"><iframe id="childFrame" src="frame.html" width="100" height="100"></iframe></div><script type="text/javascript">//調用子頁面方法function chuandicanshu(){document.getElementById("childFrame").contentWindow.update("你好");}function closeParentWindow(){document.getElementById("main").style.display = "none";}</script></body> </html>子頁面：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>子頁面</title></head><body><button id="close" onclick="closeParentWindow()">關閉按鈕</button><p id="canshu">父頁面傳過來的參數顯示</p><script type="text/javascript">function update(canshujuti){document.getElementById("canshu").innerHTML = canshujuti;}function closeParentWindow(){window.parent.closeParentWindow();}</script></body> </html>?
總結
以上是生活随笔為你收集整理的html中嵌入iframe进行父子页面参数传递的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 点击按钮显示div并向div中传递参数
- 下一篇： 根据类名遍历数组的三种方法