在vue中实现iframe嵌套Html页面及注意事项说明
作者：琉-璃
这篇文章主要介绍了在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盘根目录下必须有一个这一个文件，部署到网上也是同理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。