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>