本文介绍在Vue项目中，如何通过iframe组件加载并显示本地HTML文件，以实现将原生JS或jQuery实现的页面嵌入Vue组件。具体步骤包括在src平级目录创建public文件夹，编写HTML及本地资源，然后在Vue组件内引用iframe加载HTML。
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="style
最低0.47元/天 解锁文章
8290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
