vue中使用第三方素材：iframe与访问路径

最新推荐文章于 2024-05-12 11:32:03 发布

超频化石鱼

最新推荐文章于 2024-05-12 11:32:03 发布

阅读量959

点赞数 1

分类专栏： Vue 文章标签： js vue 特效 html iframe

本文链接：https://blog.csdn.net/fyyyr/article/details/114539852

版权

Vue 专栏收录该内容

9 篇文章 5 订阅

订阅专栏

有很多特效素材都是使用js+html+第三方库制作，本身使用常规的html开发方式，类似：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script type="text/javascript" src="Test.js"></script>
	</head>
	<body>
    <div id='myId'>测试</div>
		<script>
			var test = new Test('myId');
		</script>
	</body>
</html>

设有一个canvas特效素材，现在希望将该素材整体导入到Vue中，像使用图片一样来使用该素材。
这样的一堆文件，要导入到Vue中，需要使用iframe。流程为：

在 项目根目录/public/ 下创建一个test文件夹，将所有的素材文件复制到这里。
创建一个vue文件，使用iframe将素材的html导入即可。

vue文件内容为：

<template>
  <div class="test-container">
    <iframe :src="url" width="100%" height="100%" frameborder="0" scrolling="auto" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: './test/index.html'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.test-container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

注意引入素材的html时，必须使用./开头，且该路径中不需要包含public。
若使用/开头，调试正常，放到生产环境下可能会提示The origin server did not find a current representation for the target resource or is not willing to disclose that one exists：
404

超频化石鱼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中使用第三方素材：iframe与访问路径

有很多特效素材都是使用js+html+第三方库制作，本身使用常规的html开发方式，类似：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试</title> <script type="text/javascript" src="Test.js"></script> </head> <body&gt
复制链接

扫一扫