在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盘根目录下必须有一个这一个文件，部署到网上也是同理
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了浅谈Vuex状态管理(全家桶)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
后台使用freeMarker和前端使用vue的方法及遇到的问题
这篇文章主要介绍了后台使用freeMarker和前端使用vue的方法及遇到的问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-06-06
在 Vue 中，如果直接对数组进行操作，比如使用下标直接修改元素，数组长度不变时， Vue 是无法监测到这种变化的，导致无法触发视图更新。针对该问题本文为大家整理了一些方法，需要的可以参考一下2023-01-01
本篇文章主要介绍了vue实现登陆登出的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-09-09
这篇文章主要介绍了vue如何实现级联选择器功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要为大家详细介绍了vue+iview实现手机号分段输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了VueJs打包之后遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
uniapp前端实现微信支付功能全过程(小程序、公众号H5、app)
这篇文章主要介绍了uniapp前端实现微信支付功能的相关资料,通过uniapp开发跨平台应用时,需要处理不同平台的支付方式,包括微信小程序支付、公众号H5支付和App支付,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue项目运行或打包时，频繁内存溢出情况的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue中v-if、v-if-else、v-else-if与v-show的基本使用
v-if,v-else,v-else-if,v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染,这篇文章主要给大家介绍了关于Vue中v-if、v-if-else、v-else-if与v-show的基本使用,需要的朋友可以参考下2022-10-10
最新评论