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();以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vue3编程流畅技巧使用setup语法糖拒绝写return的方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了vue+element实现动态换肤的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue2.0 中#$emit,$on的使用详解,需要的朋友可以参考下2017-06-06
element带输入建议el-autocomplete的使用
本文主要介绍了element带输入建议el-autocomplete的使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了如何通过vue实现微博中常见的@人的功能，同时增加鼠标点击事件和一些页面小优化。感兴趣的小伙伴可以跟随小编一起学习一下2021-12-12
vue自定义指令(2.x丨3.x)可以帮助我们实现需要操作，比如防抖、节流、懒加载、输入框自动聚焦等等，使用起来非常方便，比如vue自带的v-text、v-html、v-show、v-if等等,这篇文章主要介绍了vue2.x与vue3.x中自定义指令详解,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码，这篇文章主要介绍了VuePress 快速踩坑小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最近想实现个项目,需要配置全局less,本文主要介绍了vite项目配置less全局样式的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
这篇文章主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
最新评论