在vue中实现iframe嵌套Html页面及需要注意事项

最新推荐文章于 2024-10-09 07:30:00 发布

琉-璃

最新推荐文章于 2024-10-09 07:30:00 发布

阅读量8.4k

点赞数 2

分类专栏： vue 文章标签： html vue.js

本文链接：https://blog.csdn.net/weixin_42486438/article/details/120842034

版权

本文介绍了在Vue项目中使用iframe嵌套HTML页面的方法，包括在代码中添加特定代码段，将HTML页面放入项目静态文件夹，以及在开发和打包时如何正确设置iframe的src属性。特别强调了在npm run build后，iframe路径需指向本地或服务器上的实际文件位置。

摘要由CSDN通过智能技术生成

如图：跳转的个人中心为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' // 数字是页面布局宽度差值