vue嵌入本地iframe文件并獲取某元素的值方式
更新時(shí)間：2022年09月13日 15:11:18 作者：愛睡覺的哈密瓜
這篇文章主要介紹了vue嵌入本地iframe文件并獲取某元素的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue嵌入本地iframe并獲取某元素的值
當(dāng)我們需要在vue中使用其他模塊或者其他地方的一些html頁面功能時(shí)，我們可以使用iframe去引用html頁面
首先我們可以再vue頁面中使用標(biāo)簽引用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 是本地文件的地址，這邊建議放在項(xiàng)目根目錄Public下，否則存在一定幾率顯示空白
之后再父頁面vue里methods寫方法
callchild(){
let obj1=window.frames["iframe"];//獲得對(duì)應(yīng)iframe的window對(duì)象
obj1.fn() //執(zhí)行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)
})當(dāng)訪問iframe的window時(shí)，需要區(qū)分當(dāng)前組件的windows和iframe的windows，所以需要在windows前添加上訴代碼中獲取的vm.iframeWin
/*獲取iframe中class為textLayer的div*/
this.textlayer = that.iframeWin.$('.textLayer')
/*獲取鼠標(biāo)在此iframe中的選中的文字*/
var selection_text = this.iframeWin.window.getSelection().toString();以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場景，但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢，所以自己基于el-upload封裝了一個(gè)切片上傳組件，希望對(duì)大家有所幫助2023-03-03
本篇文章將會(huì)嘗試從算法的角度主要聊一聊vue2的diff策略,幫助讀者朋友在遇到相關(guān)的面試題時(shí)可以和面試官談笑風(fēng)生,文中有相關(guān)的圖解和代碼示例,感興趣的同學(xué)跟著小編一起來看看吧2023-08-08
Vue.js計(jì)算屬性computed與watch（5）
這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算屬性computed與watch,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法
這篇文章主要介紹了使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法,需要的朋友可以參考下2017-12-12
眾所周知組件(component)是vue.js最強(qiáng)大的功能之一,它可以實(shí)現(xiàn)功能的復(fù)用,以及對(duì)其他邏輯的解耦,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中封裝組件的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue之Mixins(混入)的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程
這篇文章主要介紹了Vue3組件庫框架搭建example環(huán)境的詳細(xì)教程,本文便搭建?example?開發(fā)環(huán)境和打包構(gòu)建，并在example中使用組件庫，需要的朋友可以參考下2022-11-11
在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解
今天小編就為大家分享一篇在Vuex使用dispatch和commit來調(diào)用mutations的區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue.js?自定義指令（拖拽、拖動(dòng)、移動(dòng)）?指令?v-drag詳解
這篇文章主要介紹了vue.js?自定義指令（拖拽、拖動(dòng)、移動(dòng)）?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑
這篇文章主要介紹了淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10