Vue调用Html5
基础用法
一、html js 中自定义function
js
function sayHello(value) {
return 'Hello Js~' + value;
}
点击查看源码
html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Vue和Html5通信</title>
</head>
<body>
<script lang='js'>
window.Js2Vue.js2Vue('Hello Vue~');
function sayHello(value) {
return 'Hello Js~' + value;
}
</script>
<p>Vue和Html5通信</p>
</body>
</html>
二、Vue中使用evaluateJavascript
方法调用html中的sayHello
方法
点击查看源码
vue
<template>
<div class="es-sdk-root-css">
<s-title-view
class="es-sdk-content-title-css"
:text="this.$options.name"
/>
<div class="es-sdk-content-divider-css" />
<div class="es-sdk-content-row-css">
<qt-web-view
@onPageFinished="onPageFinished"
ref="webview"
class="es-sdk-web-view-css"
/>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from '@vue/runtime-core';
import {ref} from 'vue';
import {QTIWebView} from '@quicktvui/quicktvui3';
import {useESToast} from '@extscreen/es3-core';
export default defineComponent({
name: 'Vue2Js',
setup() {
const webview = ref<QTIWebView>();
const toast = useESToast();
function onPageFinished(url) {
toast.showToast('页面加载完毕');
setTimeout(() => {
webview.value?.evaluateJavascript("javascript:sayHello('参数')").then(
(ret) => {
toast.showToast('调用JS返回值:' + ret);
},
(error) => {},
);
}, 4000);
}
function onESCreate(params) {
webview.value?.loadUrl('http://192.168.80.32');
}
return {
webview,
onESCreate,
onPageFinished,
};
},
});
</script>
<style>
.es-sdk-web-view-css {
width: 1920px;
height: 1080px;
}
</style>