47 lines
2 KiB
HTML
47 lines
2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>测试</title>
|
|||
|
|
<script src="qwebchannel.js"></script>
|
|||
|
|
<script>
|
|||
|
|
new QWebChannel(qt.webChannelTransport,
|
|||
|
|
function(channel) {
|
|||
|
|
window.Bridge = channel.objects.Bridge;
|
|||
|
|
|
|||
|
|
// 这里绑定窗口的标题变化信号（这个信号是由QWidget内部的）
|
|||
|
|
Bridge.windowTitleChanged.connect(function(title) {
|
|||
|
|
showLog("标题被修改为：" + title);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 绑定自定义的信号customSignal
|
|||
|
|
Bridge.customSignal.connect(function(text) {
|
|||
|
|
showLog("收到自定义信号内容：" + text);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
function showLog(text) {
|
|||
|
|
var ele = document.getElementById("result");
|
|||
|
|
ele.value = ele.value + text + "\n";
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h3>1、测试修改窗口属性</h3>
|
|||
|
|
windowTitle 是Qt窗口本身的属性, 当标题被修改后会触发本身的windowTitleChanged信号<br>
|
|||
|
|
<input type="text" id="title" placeholder="请输入标题" />
|
|||
|
|
<p></p>
|
|||
|
|
<button onclick="javascript:Bridge.windowTitle = document.getElementById('title').value;">测试修改标题</button>
|
|||
|
|
|
|||
|
|
<h3>2、调用Python中的方法callFromJs</h3>
|
|||
|
|
callFromJs(str) 函数是由Python代码中定义, 通过@pyqtSlot(str)装饰器暴露出来<br>
|
|||
|
|
<button onclick="javascript:Bridge.callFromJs('test');">Bridge.callFromJs('test')</button>
|
|||
|
|
|
|||
|
|
<h3>3、发送自定义信号</h3>
|
|||
|
|
点击底部的按钮将会发送customSignal信号出来，网页中收到该信号将会在下面日志框输出内容<br>
|
|||
|
|
|
|||
|
|
<p>日志</p>
|
|||
|
|
<textarea id="result" rows="20" cols="100"></textarea>
|
|||
|
|
</body>
|
|||
|
|
</html>
|