快捷導(dǎo)航

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

更新時(shí)間：2022年09月13日 15:11:18 作者：愛睡覺的哈密瓜

這篇文章主要介紹了vue嵌入本地iframe文件并獲取某元素的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

當(dāng)我們需要在vue中使用其他模塊或者其他地方的一些html頁(yè)面功能時(shí)，我們可以使用iframe去引用html頁(yè)面

首先我們可以再vue頁(yè)面中使用標(biāo)簽引用html頁(yè)面

<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下，否則存在一定幾率顯示空白

之后再父頁(yè)面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-cli如何快速構(gòu)建vue項(xiàng)目
本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序
這篇文章主要介紹了利用Vue-draggable組件實(shí)現(xiàn)Vue項(xiàng)目中表格內(nèi)容的拖拽排序，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-06-06
Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)
這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性
2022-08-08
vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
vue項(xiàng)目配置env的方法步驟
在vue項(xiàng)目中env是全局配置文件,可以存儲(chǔ)不同環(huán)境下的變量,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目配置env的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-04-04
vue3如何使用watch監(jiān)聽props中的數(shù)據(jù)
在vue項(xiàng)目中,父子組件數(shù)據(jù)傳遞是最常見的場(chǎng)景,但是今天在開發(fā)過程中父級(jí)數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果
這篇文章主要為大家詳細(xì)介紹了vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue2?中自定義圖片懶加載指令?v-lazy實(shí)例詳解
這篇文章主要為大家介紹了Vue2?中自定義圖片懶加載指令?v-lazy實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
10分鐘快速上手VueRouter4.x教程
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03