在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.x中的父子组件相互通信,需要的朋友可以参考下2017-05-05
@click指令用于监听元素的点击事件,并在触发时执行相应的处理函数,在Vue3中,事件处理就可以通过@click指令来实现,下面我们就来看看如何在Vue3中处理点击事件吧2023-08-08
在组件化开发的过程中难免会遇见子组件和父组件之间的通讯那么这里讲关于vue2和vue3不同的通讯方式，文中有详细的代码示例供大家参考，感兴趣的同学可以阅读下2023-05-05
这篇文章主要介绍了vue.js动画中的js钩子函数的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
Emit是Vue3中另一种常见的组件间传值方式,它通过在子组件中触发事件并将数据通过事件参数传递给父组件来实现数据传递,本文就来介绍一下Vue3 emit传值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了Vue中computed和watch的区别，对Vue感兴趣的同学，可以参考下2021-05-05
下面小编就为大家分享一篇Vue下的国际化处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
我们在做项目经常会遇到多级导航这个需求,所以下面这篇文章主要给大家介绍了关于vue实现四级导航及验证码的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了vue实现商品多选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论