实现的主要原理是:
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>