在一个html文件中的两个平级iframe之间的方法函数调用

zx&it

已于 2022-05-27 14:57:17 修改

阅读量453

点赞数

分类专栏： iframe 文章标签： vue.js html javascript 前端

于 2021-08-27 11:23:23 首次发布

本文链接：https://blog.csdn.net/qq_40639028/article/details/119948761

版权

2 篇文章 2 订阅

订阅专栏

1.在一个iframe文件中先通过顶层（parent）html文件拿到存在某方法的iframe节点。

2.再利用contentWindow属性拿到存在某方法的iframe的window。

3.最后通过它window中的属性和方法，拿到需要的属性或者方法。

4.如果需要拿的iframe的html是vue的语法，则需要通过contentWindow.app.***来获取它里面的方法或者属性（app为挂载的id名）；如果是原生js获取jq语法，直接使用contentWindow.***即可。


<body>
    <div id="app" v-loading="loading">
        <iframe id="iframe1"></iframe>
        <iframe id="iframe2"></iframe>
    </div>
</body>

在iframe2中调用iframe1中的方法

iframe2：

window.parent.window.document.getElementById("iframe1").contentWindow.app.onSubmit();

iframe1：（vue语法）

onSubmit(){
    console.log('我是iframe1中的方法')
}

关注