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-cli如何快速构建vue项目
本篇文章主要介绍了vue-cli如何快速构建vue项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
这篇文章主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)
这篇文章主要介绍了Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
Vue动态添加属性到data的实现
在vue中请求接口中，一个请求方法可能对应后台两个请求接口，所以请求参数就会有所不同。需要我们先设置共同的参数，然后根据条件动态添加参数属性
2022-08-08
vue项目实现图形验证码
这篇文章主要为大家详细介绍了vue项目实现图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
vue项目配置env的方法步骤
在vue项目中env是全局配置文件,可以存储不同环境下的变量,下面这篇文章主要给大家介绍了关于vue项目配置env的方法步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04
vue3如何使用watch监听props中的数据
在vue项目中,父子组件数据传递是最常见的场景,但是今天在开发过程中父级数据传递到子组件,控制子组件的显隐,下面这篇文章主要给大家介绍了关于vue3如何使用watch监听props中数据的相关资料,需要的朋友可以参考下
2022-10-10
vue使用动画实现滚动表格效果
这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue2 中自定义图片懒加载指令 v-lazy实例详解
这篇文章主要为大家介绍了Vue2 中自定义图片懒加载指令 v-lazy实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
10分钟快速上手VueRouter4.x教程
Vue Router目前最新版本是4.X，本文主要主要介绍了10分钟快速上手VueRouter4.x教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03