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