qt傳值給js及js傳值給qt（qt及js的互動）

阿新 • • 發佈：2021-01-06

做js和qt的互動，需要將qwebchannel.js拷貝到當前文件目錄下。
首先看html檔案
.html

<html>
<head>
<script 
src="qwebchannel.js">
</script> 
<script>
new QWebChannel(qt.webChannelTransport,							
    function(channel){
        window.bridge = channel.objects.webobj; 
 // 註冊        //這裡的webobj需要和qt中webobj保持一致 
    }                                                           
);
function receiverQt()
{
	alert("good");
	window.bridge.getCoordinates(); 	
}
</script>
<script type="text/javascript">
</script>
</head>
<body>
< 
div id="googleMap" style="width:1920px;height:1080px;"></div>

</body>
</html>

.h檔案

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QtWebEngine>
#include <QWebEngineProfile>
#include <QWebEngineView>
#include <QWebChannel> 

#include <QJSEngine>
class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

public slots:
	void onLoadFinished();
	void getCoordinates();

private:
	QWebEngineView *m_pWebEngineView = nullptr;
	QWebChannel *m_pWebChannel = nullptr;

};
#endif // WIDGET_H

.cpp

#include "widget.h"
#include "qgridlayout.h"
#include <qdebug.h>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
	m_pWebEngineView = new QWebEngineView(this);
	m_pWebChannel = new QWebChannel(this);

	m_pWebChannel->registerObject(QString("webobj"), this);   //  QWebChannel對Widget類，註冊一個webobj的通訊介質 /   webobj需要和js內的保持一致

	m_pWebEngineView->page()->setWebChannel(m_pWebChannel);

	m_pWebEngineView->setUrl(QUrl("file:///D:/QTProject/GoogleMapOnline/map.html"));

	QVBoxLayout *mainLayout = new QVBoxLayout(this);
	mainLayout->addWidget(m_pWebEngineView);
	mainLayout->setMargin(0);
	mainLayout->setSpacing(0);
	this->setLayout(mainLayout);

	connect(m_pWebEngineView, &QWebEngineView::loadFinished, this, &Widget::onLoadFinished);
}

Widget::~Widget()
{
	delete m_pWebChannel;
}

void Widget::getCoordinates()
{
	qDebug() << "33334445555::::::::";   //這個是接受js傳過來的值
}

void Widget::onLoadFinished()
{
	QString strVal = QString("OnMsgFromQt%1").arg("1235455");
	m_pWebEngineView->page()->runJavaScript("receiverQt()");  //這個是呼叫js中的function
}

ヾ(￣▽￣)Bye_Bye

原生js實現的金山打字小遊戲（例項程式碼詳解）

首先先來看一下效果圖如果感興趣的就來看一下Js原始碼吧 //計分板 var board = {

js的物件的定義以及建立（附有HTML5程式碼例項）

技術標籤：html複習物件的定義：物件是JavaScript的一個基本資料型別，是一種複合值，它將很多值（原始值或者其他物件）聚合在一起，可通過名字訪問這些值。即屬性的無序集合。物件的建立（多種方法） 1、直接

JS類的建立和繼承總結（含ES6 class類）

1. 類的建立 1.1 ES5中類的建立 (即建構函式的建立） // 注：ES5中類的建立其實就是建構函式的建立，和函式建立相同，只是函式名首字母一般推薦大寫

Redis安裝教程及安裝報錯解決方案（大佬勿噴）

安裝環境：CentOS7Redis版本：redis-6.0.9.tar.gz 依次按照以下順序執行： 1. [root@localhost ~]# wget https://download.redis.io/releases/redis-6.0.9.tar.gz

前端形式的匯出及後端形式的匯出（全網最正確版本）

技術標籤：poiexcel 匯出前後端實現不同方式後端實現的匯出： Java Excel是一開放原始碼專案，通過它Java開發人員可以讀取Excel檔案的內容、建立新的Excel檔案、更新已經存在的Excel檔案。jxl 由於其小巧易用的

qt傳值給js及js傳值給qt（qt及js的互動）

技術標籤：寫著玩qthtmljs互動設計做js和qt的互動，需要將qwebchannel.js拷貝到當前文件目錄下。首先看html檔案 .html

在列表中給按鈕新增onclick事件，js用post傳值到另外一個介面處理

1.jsp中的button <td class=\"shows\"><input style=\"width:35px;background-color: #00b841\" class=\"btn\" id=\"<%=ids%>\" type=\"button\" onclick=\"changeCategory(\'<%=ids%>\')\" v

iOS js和oc傳值

url擷取重定向（擴充套件第三方bridge） JSExport JavaScriptCore js傳值給oc。（對應重定向,對應oc->js stringByEvalu )stringByEvaluatingJavaScriptFromString

js實現上傳按鈕並顯示縮圖小輪子

前言造這個小輪子的起因是因為預設提供的上傳檔案的按鈕屬實醜陋了點，而且還不能直接修改這個按鈕的樣式，所以就打算直接搞個小輪子方便日後需要時使用。使用原生js實現。那麼直接上效果圖。

JS驗證上傳的檔案是否為音視訊檔案格式

前情提要：頁面上有個這個小需求。點選下方按鈕，只能上傳音視訊。於是，已自己的想法，寫了一個笨辦法。

js獲取上傳檔案的絕對路徑

在html中 <input type=\"file\" id=\"importFile\" /> <input type=\"button\" onclick=\"upload()\"/>

Node.js：上傳檔案，服務端如何獲取檔案上傳進度

內容概述 multer是常用的Express檔案上傳中介軟體。服務端如何獲取檔案上傳的進度，是使用的過程中，很常見的一個問題。在SF上也有同學問了類似問題《nodejs multer有沒有檢視檔案上傳進度的方法？》。稍微回答了

js獲取上傳音視訊的時長

獲取上傳視訊路徑，將該路徑放入video標籤，獲取視訊時長方式一：隱藏一個音訊標籤，播放獲取。

vue/父元件請求來的值，子元件無法接收/父元件無法給echarts子元件傳值/頁面第一次載入時，子元件沒有應用上父元件傳進來的資料

前端新人，在第一次對介面的時候遇到不少小問題，都是特別細節的問題，今天記錄一下遇到的讓我最有收穫的一個問題：首先，我要做的就是根據“數量”和“面積”echarts表顯示不同的資料我拿到介面資料之後，

js分段上傳檔案

JS端。檔案過大，開始使用了壓縮檔案後上傳。後面改為分段上傳，壓縮檔案部分沒有做對應修改。

基於django和dropzone.js實現上傳檔案

1、dropzone.js http://www.dropzonejs.com/ dropzone.js是一個可預覽\\可定製化的檔案拖拽上傳，實現AJAX非同步上傳檔案的工具

[js] 通過物件的key，給n層物件賦值

一個有點毛病的操作，但是好像也沒毛病前情提要：有幾個元件都需要使用同一個上傳的方法，但是上傳完回撥需要給物件賦值，但是賦值的引數有的是放在幾層物件裡面的，有的是在第一層的，封裝起來的話，就不可以直接

HttpClient呼叫doGet、doPost、JSON傳參及獲得返回值

呼叫 doPost：map傳參 Map<String,Object> map = new HashMap<>(); map.put(\"test\",\"test\");

功能強大的 JS 檔案上傳庫：FilePond

一、介紹 1.1 FilePond 它是一個JavaScript檔案上傳庫。可以拖入上傳檔案，並且會對影象進行優化以加快上傳速度。讓使用者體驗到出色、進度可見、如絲般順暢的使用者體驗。

js原生上傳限制pdf，並展示pdf檔案

技術標籤：js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

qt傳值給js及js傳值給qt（qt及js的互動）

相關推薦