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

更新时间：2022年09月13日 15:11:18 作者：爱睡觉的哈密瓜

这篇文章主要介绍了vue嵌入本地iframe文件并获取某元素的值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

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

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

<template>
 <div>
  <iframe
   name="iframe"
   id="iframe"
   width="100%"
   height="470px"
   v-bind:src="HtmlPath"
   frameborder="0"
   scrolling="no"
   ref="iframeDom"
  ></iframe>
 </div>
</template>

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是否加载完成

<iframe id="displayPdfIframe" :src="pdfUrl" width="100%"   ref="pdfframe"></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();

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

您可能感兴趣的文章:

Vue实现封装一个切片上传组件
平时业务开发中用el-upload能满足大部分场景，但是对于一些大文件的上传时会比较慢，所以自己基于el-upload封装了一个切片上传组件，希望对大家有所帮助
2023-03-03
一文详解vue2的diff算法流程
本篇文章将会尝试从算法的角度主要聊一聊vue2的diff策略,帮助读者朋友在遇到相关的面试题时可以和面试官谈笑风生,文中有相关的图解和代码示例,感兴趣的同学跟着小编一起来看看吧
2023-08-08
Vue.js计算属性computed与watch（5）
这篇文章主要为大家详细介绍了Vue.js计算属性computed与watch,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
使用vue-cli+webpack搭建vue开发环境的方法
这篇文章主要介绍了使用vue-cli+webpack搭建vue开发环境的方法,需要的朋友可以参考下
2017-12-12
Vue项目中封装组件的简单步骤记录
众所周知组件(component)是vue.js最强大的功能之一,它可以实现功能的复用,以及对其他逻辑的解耦,下面这篇文章主要给大家介绍了关于Vue项目中封装组件的相关资料,需要的朋友可以参考下
2021-09-09
Vue之Mixins(混入)的使用方法
这篇文章主要介绍了Vue之Mixins(混入)的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Vue3组件库框架搭建example环境的详细教程
这篇文章主要介绍了Vue3组件库框架搭建example环境的详细教程,本文便搭建 example 开发环境和打包构建，并在example中使用组件库，需要的朋友可以参考下
2022-11-11
在Vuex使用dispatch和commit来调用mutations的区别详解
今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue.js 自定义指令（拖拽、拖动、移动）指令 v-drag详解
这篇文章主要介绍了vue.js 自定义指令（拖拽、拖动、移动）指令 v-drag,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
浅谈Vue使用Cascader级联选择器数据回显中的坑
这篇文章主要介绍了浅谈Vue使用Cascader级联选择器数据回显中的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10