1. 创建html文件
1. 在public文件中创建static文件夹
2.项目中创建一个vue 文件来引入该文件
1. 代码如下
<iframe :src="src" style="width:100%;height:100%" ></iframe>
2. data定义数据，注意 路径直接用文件夹开头引入
src: 'static/page.html'
3. vue传参给html
1. vue组件 iframe 先自定义方法 （ v-trigger）
<iframe :src="src" ref="iframe" style="width:100%;height:100%" @click="vueSendMsg" v-trigger></ iframe>
2. vue组件自定义触发方法： （触发methods vueSendMsg方法 将路由参数传给html文件）
directives: {
trigger: {
inserted (el, pinging) {
el.click()
}
}
}，
3.vue methods方法如下
methods() {
vueSendMsg() {
setTimeout(() =>{
const iframeWindow = this.$refs.iframe.contentWindow
iframeWindow.postMessage({
cmd: 'myVue',
params: {
id: this.$route.query.id
}
}, '*')
}, 1000)
},
4. html文件接受vue参数（event.data即为vue传给的数据）
<script>
window.addEventListener("message", getVueData)
function getVueData(event) {
console.log(event.data)
}
</script>
4. vue触发html方法
1. vue组件button定义
<button @click="htmlFunClick">触发html方法</button>
methods() {
htmlFunClick（）{
this.$refs.iframe.contentWindow.clickfun() //触发html定义的clickfun方法
}
},
2. html文件
<script>function clickfun(event) {
console.log("html方法被触发啦！")
// 此处调用接口：
const url = "http:localhost:8080/test/" // 现实服务器地址
$.ajax({
type: "POST" // 请求方式
url: `${url}apiList`, // 请求路径
headers: { // headers配置
"Content-Type": "application/json; charset=utf-8"
},
dataType: "json", // 数据类型
data: JSON.stringify({reqBody: "1111"}), // 入参
success: function(data) { // 成功后返回
console.log(data)
}
})
}
</script>
网友评论