在vue中實現(xiàn)iframe嵌套Html頁面及注意事項說明
更新時間：2023年10月11日 08:48:33 作者：琉-璃
這篇文章主要介紹了在vue中實現(xiàn)iframe嵌套Html頁面及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue實現(xiàn)iframe嵌套Html頁面及注意事項
如圖：
跳轉(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>
二、在運行項目npm run dev時
iframe中的src為你本項目的中的文件，所以要把HTML頁面放在項目里面，如果是外部文件的話直接替換成https://www.....就行，我的是直接在項目根目錄下新建一個static文件夾，這樣正常跳轉(zhuǎn)既可實現(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> 
三、需注意的是
當進行靜態(tài)文件打包npm run build時，iframe中的路徑為你本地現(xiàn)在這個盤下的文件，
例如：
我這個案例，打包完src就等于D:/static/aa.html，在本地D盤根目錄下必須有一個這一個文件，部署到網(wǎng)上也是同理
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的方法詳解
這篇文章主要介紹了vue2.0項目實現(xiàn)路由跳轉(zhuǎn)的詳細方法,非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了使用Vue實現(xiàn)一個樹組件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
我們在做vue項目時,經(jīng)常會需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue CLI插件開發(fā)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
計算屬性和普通屬性一樣是在模板中綁定計算屬性的，當data中對應(yīng)數(shù)據(jù)發(fā)生改變時，計算屬性的值也會發(fā)生改變。下面這篇文章主要給大家介紹了關(guān)于Vue中計算屬性computed的相關(guān)資料，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了vue.js自定義組件directives的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
vue-cli 作為 Vue 官方推薦的項目構(gòu)建腳手架，它提供了開發(fā)過程中常用的，熱重載，構(gòu)建，調(diào)試，單元測試，代碼檢測等功能。我們本次的異步遠端組件將基于 vue-cli 開發(fā)2017-11-11
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要介紹了Vue 組件復用多次自定義參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄
在使用webstorm新建vue項目時常會遇到一些報錯,特別是新手第一次運行項目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡單創(chuàng)建vue項目的一些報錯實戰(zhàn)記錄,需要的朋友可以參考下2023-02-02