在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明
vue實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)
如圖：
跳轉(zhuǎn)的個人中心為HTML頁面，引用的是iframe嵌套
一、要嵌套的地方加上以下代碼
如下：
<template>
<div class="hello" >
<iframe src="/static/aa.html" id="qt" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 0px;right:0px;bottom:100px;"></iframe>
</div>
</template>
<script>
export default {
name: 'adminIndex',
data () {
return {
}
},
mounted () {
/**
* iframe-寬高自適應(yīng)顯示
*/
function changeqtIframe () {
const qt = document.getElementById('qt')
const deviceWidth = document.body.clientWidth
const deviceHeight = document.body.clientHeight
qt.style.width = Number(deviceWidth) + 'px' // 數(shù)字是頁面布局寬度差值
qt.style.height = Number(deviceHeight) + 'px' // 數(shù)字是頁面布局高度差
}
changeqtIframe()
window.onresize = function () {
changeqtIframe()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
二、在運(yùn)行項(xiàng)目npm run dev時
iframe中的src為你本項(xiàng)目的中的文件，所以要把HTML頁面放在項(xiàng)目里面，如果是外部文件的話直接替換成https://www.....就行，我的是直接在項(xiàng)目根目錄下新建一個static文件夾，這樣正常跳轉(zhuǎn)既可實(shí)現(xiàn)效果。
如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>zwh</title>
<head>
<meta charset="utf-8">
<title>iframe Window</title>
<style>
body {
background-color: white;
color: rgb(71, 34, 34);
}
</style>
</head>
<body>
<h1>Html頁面展示</h1>
<button>向VUE發(fā)送信息</button>
<script>
</script>
</body>
</html> 
三、需注意的是
當(dāng)進(jìn)行靜態(tài)文件打包npm run build時，iframe中的路徑為你本地現(xiàn)在這個盤下的文件，
例如：
我這個案例，打包完src就等于D:/static/aa.html，在本地D盤根目錄下必須有一個這一個文件，部署到網(wǎng)上也是同理
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報錯,路徑不對的問題
下面小編就為大家分享一篇解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報錯,路徑不對的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
一般做移動端輪播圖的時候，最常用的就是Swiper插件了，而vue.js也有一個輪播組件vue-awesome-swiper，用法跟swiper相似。接下來通過本文給大家詳解講解vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖實(shí)例代碼，需要的朋友參考下2017-03-03
下面小編就為大家分享一篇基于Vue2.X的路由和鉤子函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
一文詳解vue3?watchEffect監(jiān)聽的各種姿勢用法
watchEffect 會自動追蹤在其回調(diào)函數(shù)中使用的所有響應(yīng)式依賴,無需顯式指定數(shù)據(jù)源,本文將為大家總結(jié)一下vue3?watchEffect監(jiān)聽的各種用法,有需要的可以了解下2026-03-03
vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例
本篇文章主要介紹了vue.js實(shí)現(xiàn)單選框、復(fù)選框和下拉框示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動視圖原理
這篇文章主要介紹了淺談vuejs實(shí)現(xiàn)數(shù)據(jù)驅(qū)動視圖原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
Vue.js實(shí)現(xiàn)實(shí)例搜索應(yīng)用功能詳細(xì)代碼
本文給大家分享Vue.js實(shí)現(xiàn)實(shí)例搜索應(yīng)用功能詳細(xì)代碼，非常不錯，感興趣的朋友參考下吧2017-08-08
Vue實(shí)現(xiàn)用戶沒有登陸時,訪問后自動跳轉(zhuǎn)登錄頁面的實(shí)現(xiàn)思路
這篇文章主要介紹了Vue實(shí)現(xiàn)用戶沒有登陸時，訪問后自動跳轉(zhuǎn)登錄頁面,定義路由的時候配置屬性，這里使用needLogin標(biāo)記訪問頁面是否需要登錄，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03