在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明

更新時(shí)間：2023年10月11日 08:48:33 作者：琉-璃

這篇文章主要介紹了在vue中實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue實(shí)現(xiàn)iframe嵌套Html頁面及注意事項(xiàng)

如圖：

跳轉(zhuǎn)的個(gè)人中心為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時(shí)

iframe中的src為你本項(xiàng)目的中的文件，所以要把HTML頁面放在項(xiàng)目里面，如果是外部文件的話直接替換成https://www.....就行，我的是直接在項(xiàng)目根目錄下新建一個(gè)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時(shí)，iframe中的路徑為你本地現(xiàn)在這個(gè)盤下的文件，

例如：

我這個(gè)案例，打包完src就等于D:/static/aa.html，在本地D盤根目錄下必須有一個(gè)這一個(gè)文件，部署到網(wǎng)上也是同理

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的方法詳解
這篇文章主要介紹了vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的詳細(xì)方法,非常不錯(cuò)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下
2018-06-06
使用Vue實(shí)現(xiàn)一個(gè)樹組件的示例
這篇文章主要介紹了使用Vue實(shí)現(xiàn)一個(gè)樹組件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
vue引用外部JS并調(diào)用JS文件中的方法實(shí)例
我們?cè)谧鰒ue項(xiàng)目時(shí),經(jīng)常會(huì)需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
一篇文章，教你學(xué)會(huì)Vue CLI 插件開發(fā)
這篇文章主要介紹了Vue CLI插件開發(fā)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue中計(jì)算屬性computed的示例解讀
計(jì)算屬性和普通屬性一樣是在模板中綁定計(jì)算屬性的，當(dāng)data中對(duì)應(yīng)數(shù)據(jù)發(fā)生改變時(shí)，計(jì)算屬性的值也會(huì)發(fā)生改變。下面這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性computed的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
vue.js自定義組件directives的實(shí)例代碼
這篇文章主要介紹了vue.js自定義組件directives的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
加載 vue 遠(yuǎn)程代碼的組件實(shí)例詳解
vue-cli 作為 Vue 官方推薦的項(xiàng)目構(gòu)建腳手架，它提供了開發(fā)過程中常用的，熱重載，構(gòu)建，調(diào)試，單元測(cè)試，代碼檢測(cè)等功能。我們本次的異步遠(yuǎn)端組件將基于 vue-cli 開發(fā)
2017-11-11
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-06-06
Vue 組件復(fù)用多次自定義參數(shù)操作
這篇文章主要介紹了Vue 組件復(fù)用多次自定義參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
第一次使用webstrom簡(jiǎn)單創(chuàng)建vue項(xiàng)目的一些報(bào)錯(cuò)實(shí)戰(zhàn)記錄
在使用webstorm新建vue項(xiàng)目時(shí)常會(huì)遇到一些報(bào)錯(cuò),特別是新手第一次運(yùn)行項(xiàng)目,這篇文章主要給大家介紹了關(guān)于第一次使用webstrom簡(jiǎn)單創(chuàng)建vue項(xiàng)目的一些報(bào)錯(cuò)實(shí)戰(zhàn)記錄,需要的朋友可以參考下
2023-02-02