Qt工作笔记-WebEngineView调用web站点中的JS脚本(含Vue Cli脚本)
生活随笔
收集整理的這篇文章主要介紹了
Qt工作笔记-WebEngineView调用web站点中的JS脚本(含Vue Cli脚本)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
首先是一個例子,網(wǎng)頁結(jié)構(gòu)如下:
代碼如下:
index.html
<html> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <head> </head><body> <h1>Hello World</h1> <script type="text/javascript" src="js.js"></script><script type="text/javascript">function callFunctionDemo(){alert("Hello World");}</script></body></html>js.js
;function jsFileCall(){alert("jsFileCall"); }function jsFileCall2(str){alert("str:" + str);return str; }當(dāng)qml是這樣的代碼:
import QtQuick 2.5 import QtQuick.Window 2.2 import QtWebEngine 1.0 import QtQuick.Controls 1.4Window {visible: truewidth: 640height: 480WebEngineView{id: webanchors.fill: parenturl: "http://127.0.0.1:9998/"}Button {text: "Button"onClicked: {/*var functionStr = "callFunctionDemo()";web.runJavaScript(functionStr, function(result){console.log(result);});*/var functionStr = "jsFileCall()";web.runJavaScript(functionStr, function(result){console.log(String(result));});}} }點擊按鈕后:
當(dāng)是這樣的代碼:
import QtQuick 2.5 import QtQuick.Window 2.2 import QtWebEngine 1.0 import QtQuick.Controls 1.4Window {visible: truewidth: 640height: 480WebEngineView{id: webanchors.fill: parenturl: "http://127.0.0.1:9998/"}Button {text: "Button"onClicked: {/*var functionStr = "callFunctionDemo()";web.runJavaScript(functionStr, function(result){console.log(result);});*/var functionStr = "jsFileCall2(12345)";web.runJavaScript(functionStr, function(result){console.log(String(result));});}} }點擊按鈕后:
qml接受到的數(shù)據(jù)
下面還有種情況,當(dāng)前端是vue?cli的時候。這里就簡單提一下了。
在xxx.vue中的mounted中添加window.xxxx=this;這樣在控制臺使用window.xxx.zzzz這個zzzz就是對應(yīng)vue中的methods的函數(shù),然后再qml中這樣修改即可。
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的Qt工作笔记-WebEngineView调用web站点中的JS脚本(含Vue Cli脚本)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Spring Boot文档阅读笔记-Eh
- 下一篇: Qt笔记-QTcpSocket跨线程调用