文章目录
- 1. 问题总结
- 2. vue中引入html页面
- 3. vue向html传递数据
- 4. html向vue传递数据
1. 问题总结
最近在做vue
的项目时候,需要引入本地html
页面,中间遇到了很多问题,费时又费力,因此记录下来,以备不时之需,也给大家提供点资料。
2. vue中引入html页面
- 使用
ifram
标签直接引用对应的html,代码如下:
<iframe src="/static/b.html" width="100%" height="100%" ref="iframeDom"></iframe>
src路径的问题 + js动画加载的问题: (非常重要)
- 本地的html:一定要将用到的
html
页面放在public
文件夹下的static
内,如果没有static
文件夹,就自己新建一个。 - 如果是网络页面,
src
直接网址写全就行,如:‘https://www.baidu.com’。 - 如果再
html
中需要引入外部的css
或者js
,这些js和css也必须在public
文件夹下 。
如图:
我这里是新建了一个js_css
文件夹,然后把html
中所用的文件放在了里面,在html中引用这些js或者css文件的话如下:
<link rel="stylesheet" type="text/css" href="js_css/pviz-core.css">
<script src="js_css/pviz-bundle.min.js"></script>
3. vue向html传递数据
vue中的写法
注意:this.$refs.iframeDom.contentWindow
中的iframeDom
一定是iframe
标签中的ref
属性所对应的值。
<template>
<div class="main">
<button @click="vueSendMsg">vue向iframe传递信息</button>
<iframe src="/static/b.html" width="100%" height="100%" ref="iframeDom"></iframe>
</div>
</template>
<script>
export default {
name: 'FAQ',
data() {
return {
data_: '哈哈哈,我----过去啦'
}
},
methods: {
// vue向iframe传递信息
vueSendMsg() {
//这里的ifranmeDom 对应 iframe标签中的ref属性的值 (ref="iframeDom")
const iframeWindow = this.$refs.iframeDom.contentWindow;
iframeWindow.postMessage({
cmd: 'myVue',
params: {
info: this.data_, //需要传递的数据
}
}, '*')
},
}
}
</script>
<style scoped>
.main {
display: block;
width: 100%;
height: 600px;
}
</style>
iframe
引入的html
中的写法:
<html>
<head>
<title>pViz cuslivingstone display example</title>
<link rel="stylesheet" type="text/css" href="js_css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js_css/pviz-core.css">
<script src="js_css/pviz-bundle.min.js"></script>
<style type="text/css" media="screen" class="example">
</style>
</head>
<body class="container">
<div class="row">
<h2>pViz custom display with css example</h2>
</div>
<h3>iframe嵌入的页面</h3>
<script class="example">
window.addEventListener("message", function (event) {
var data = event.data;
// 然后就可以获得vue传过来的数据
console.log("从vue中获得的数据", data);
}, '*')
</script>
</body>
</html>
4. html向vue传递数据
暂时没用到—后续更新