2. Java
  3. js 的 iframe 父子页面通信的简单方法

js 的 iframe 父子页面通信的简单方法

xiaoxiao2021-02-28  46

导语，最近公司嵌套第三方电销系统的电话条，iframe嵌入方式，但是之间通信是在搞不懂，就搜到了这篇博客，在此谢谢作者 原文链接：https://my.oschina.net/sallency/blog/1618971

获取 子页面 的 window 对象

在父页面中，存在如下两个对象window.frames,document.iframeElement.contentWindow,可以获取到 子页面 window 对象

// iframe id document.getElementById('menuIframe').contentWindow // iframe name window.frames['menuIframe'].window // iframe index 当前窗体的第几个 iframe window.frames[1].window

既然拿到了 window对象，那函数和DOM就到手了。您想做什么都可以了不是。。。。。哈哈

子 iframe 获取 父页面

window.parent 对象 window.top对象

// 判断当前页面是否是 iframe 或 顶级页面 window.parent == window window.top == window

window.parent 即为当前页面的上一级页面的 window 对象，如果当前页面已是 顶层 页面，则 window.parent 就是自己

小实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe src="/sub.html" name="iframeContainer" id="iframeContainer"></iframe> <script type="text/javascript"> function parentHello() { alert("this is parent hello function!"); } window.frames['iframeContainer'].subHello(); </script> </body> </html> <!-- sub.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> function subHello() { alert("this is sub hello function!"); } window.parent.parentHello(); </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-2626316.html

技术

最新回复(0)