您现在的位置是：网站首页> 编程资料编程资料

vue嵌入本地iframe文件并获取某元素的值方式_vue.js_

2023-05-24 349人已围观

简介 vue嵌入本地iframe文件并获取某元素的值方式_vue.js_

vue嵌入本地iframe并获取某元素的值

当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面

首先我们可以再vue页面中使用标签引用html页面

htmlpath 是本地文件的地址，这边建议放在项目根目录Public下，否则存在一定几率显示空白

之后再父页面vue里methods写方法

callchild(){ let obj1=window.frames["iframe"];//获得对应iframe的window对象 obj1.fn() //执行iframe 里的方法 console.log(obj1.document.getElementById().value) //获取iframe里定义id元素的值 }

vue使用iframe并获得其dom

在vue组件中获取iframe的dom

在获取dom之前需要先确定iframe是否加载完成

 $('#displayPdfIframe').on("load",function(){     vm.iframeWin = vm.$refs.pdfframe.contentWindow     console.log(vm.iframeWin) })

当访问iframe的window时，需要区分当前组件的windows和iframe的windows，所以需要在windows前添加上诉代码中获取的vm.iframeWin

/*获取iframe中class为textLayer的div*/ this.textlayer = that.iframeWin.$('.textLayer') /*获取鼠标在此iframe中的选中的文字*/ var selection_text = this.iframeWin.window.getSelection().toString();

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：Node.js 中的 module.exports 与 exports区别介绍_node.js_

下一篇：vxe-table如何在单元格中渲染简单的饼图_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网