vue中通过iframe方式加载本地html

最新推荐文章于 2025-06-08 00:03:24 发布

慕容屠苏

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量2.5w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/kerryqpw/article/details/89814922

本文介绍在Vue项目中，如何通过iframe组件加载并显示本地HTML文件，以实现将原生JS或jQuery实现的页面嵌入Vue组件。具体步骤包括在src平级目录创建public文件夹，编写HTML及本地资源，然后在Vue组件内引用iframe加载HTML。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中通过iframe方式加载本地html

vue是一个组件式的前端开发，我们在通过vue做前端开发的时候经常会有这样的业务需要。

如何将本地的原生js或jquery实现的html嵌入到vue的组件中进行展示。

实现效果：

如图所示：

导航栏、按钮控件、评分控件都是通过vue组件组装实现。

银河星图是通过ifame加载本地html实现的。

实现思路：

1、在src平级的文件目录下新建public文件夹

2、在public文件夹下编码html代码，包括相应的本地资源，js、css

3、在vue组件中通过ifame加载html文件

实现代码：

index.html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>基于HTML5 WebGL的3D星云动画特效DEMO演示</title>
  <meta charset="utf-8">
<meta name="description" content="WebGL galaxy with shaders" />
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<script id='vShader