在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盘根目录下必须有一个这一个文件，部署到网上也是同理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
近期在用vue做一个环保类的项目,要求使用高德地图,下面这篇文章主要给大家介绍了关于Vue接入高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要为大家详细介绍了如何在 Vue 3 项目中集成 WangEditor 富文本编辑器,实现图文混排、自定义扩展等高阶功能,感兴趣的小伙伴可以了解下2025-03-03
这篇文章主要介绍了vue路由组件路径如何用变量形式动态引入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue3+ts实现一个表单组件的详细代码,确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue项目如何实现切换主题色思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue实现列表跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了使用vite项目打包资源分配目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue指令中的v-once用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了浅谈vuejs实现数据驱动视图原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了Vue2.0+SVG实现音乐播放圆形进度条组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
最新评论