在vue中实现iframe嵌套Html页面及注意事项说明
更新时间：2023年10月11日 08:48:33 作者：琉-璃
这篇文章主要介绍了在vue中实现iframe嵌套Html页面及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue实现iframe嵌套Html页面及注意事项
如图：
跳转的个人中心为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-宽高自适应显示
*/
function changeqtIframe () {
const qt = document.getElementById('qt')
const deviceWidth = document.body.clientWidth
const deviceHeight = document.body.clientHeight
qt.style.width = Number(deviceWidth) + 'px' // 数字是页面布局宽度差值
qt.style.height = Number(deviceHeight) + 'px' // 数字是页面布局高度差
}
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文件夹，这样正常跳转既可实现效果。
如下：
<!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发送信息</button>
<script>
</script>
</body>
</html> 
三、需注意的是
当进行静态文件打包npm run build时，iframe中的路径为你本地现在这个盘下的文件，
例如：
我这个案例，打包完src就等于D:/static/aa.html，在本地D盘根目录下必须有一个这一个文件，部署到网上也是同理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2.0项目实现路由跳转的详细方法,非常不错，具有一定的参考借鉴借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了使用Vue实现一个树组件的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
我们在做vue项目时,经常会需要引入js,下面这篇文章主要给大家介绍了关于vue引用外部JS并调用JS文件中的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue CLI插件开发，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
计算属性和普通属性一样是在模板中绑定计算属性的，当data中对应数据发生改变时，计算属性的值也会发生改变。下面这篇文章主要给大家介绍了关于Vue中计算属性computed的相关资料，需要的朋友可以参考下。2017-07-07
这篇文章主要介绍了vue.js自定义组件directives的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
vue-cli 作为 Vue 官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发2017-11-11
这篇文章主要跟大家介绍了关于Vue.js常用指令之循环使用v-for指令的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要介绍了Vue 组件复用多次自定义参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
第一次使用webstrom简单创建vue项目的一些报错实战记录
在使用webstorm新建vue项目时常会遇到一些报错,特别是新手第一次运行项目,这篇文章主要给大家介绍了关于第一次使用webstrom简单创建vue项目的一些报错实战记录,需要的朋友可以参考下2023-02-02
最新评论