100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html中嵌入iframe进行父子页面参数传递

html中嵌入iframe进行父子页面参数传递

时间:2019-10-18 04:20:39

相关推荐

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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。