在JS中使用Foxtable菜单
本节内容可以参考示例文件"CaseStudy\WebViewer\菜单.Table"。
也可以不用ContextMenuRequested事件，改为直接在js脚本中打开Foxtable的快捷菜单。
二者都可以针对单个或多个元素设置，或者进行全局设置。
关于窗口快捷菜单的设计，请参考：关于窗口菜单
示例
窗口的AfterLoad事件代码:
'''Async
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库
wv.CoreWebView2.AddHostObjectToScript("ft",
ft)
'注入Foxtable库，其实这里没有用到
，不注入也行
wv.CoreWebView2.AddHostObjectToScript("foxmnu",
e.Form.Strips("快捷菜单1"))
'注入菜单，方便编码
' 定义测试页面
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>右键菜单测试</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background-color:
#f5f5f5; }
#content { max-width: 600px; margin: 0 auto; }
.box { width: 200px; height: 150px; margin: 20px; display: inline-block;
border-radius: 10px; text-align: center; line-height: 150px; color: white;
font-weight: bold; cursor: pointer; }
#redBox { background-color: #ff4444; }
#blueBox { background-color: #4444ff; }
#greenBox { background-color: #44aa44; }
#status { margin-top: 20px; padding: 10px; background-color: white;
border: 1px solid #ccc; border-radius: 5px; min-height: 60px; }
</style>
</head>
<body>
<div id="content">
<h2>🖱️
右键菜单测试</h2>
<p>在不同区域右键点击，体验不同的菜单效果：</p>
<div>
<div id="redBox" class="box" data-type="danger">红色区域</div>
<div id="blueBox" class="box" data-type="info">蓝色区域</div>
<div id="greenBox" class="box" data-type="success">绿色区域</div>
</div>
<div id="status">
<strong>状态显示：</strong>
<div id="statusMessage">等待操作...</div>
</div>
</div>
<script>
const ft =
window.chrome.webview.hostObjects.sync.ft;
const foxmnu =
window.chrome.webview.hostObjects.sync.foxmnu;
function updateStatus(action) {
const statusDiv = document.getElementById('statusMessage');
if (statusDiv) {
statusDiv.innerHTML = `📢
你在
Foxtable菜单上
执行了:
<strong>${action}</strong>`;
}
}
//
右键点击处理
document.addEventListener('contextmenu', function(e) {
e.preventDefault(); //
阻止默认右键菜单
//
获取被右键点击的元素ID
const elementId =
e.target.id;
//
只有点击方框时才显示菜单
if (elementId ===
'redBox' || elementId === 'blueBox' || elementId ===
'greenBox') {
foxmnu.Items["autoSave"].Visible = (elementId !== "redBox");
foxmnu.Items["print"].Visible = (elementId !== "blueBox");
foxmnu.Items["preview"].Visible = (elementId !== "blueBox");
foxmnu.Show();
}
});
document.addEventListener('mousedown', function(e) {
if (e.button === 0) {
if (foxmnu.Visible) {
foxmnu.Close();
}
}
});
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
关于Foxtable对象的导入
这个示例不仅注入了Foxtable的库，也注入了菜单：
Dim
ft
As
New
FoxLib(wv)
'创建Foxtable库
wv.CoreWebView2.AddHostObjectToScript("ft",
ft)
'注入Foxtable库，其实这里没有用到不
注入也行
wv.CoreWebView2.AddHostObjectToScript("foxmnu",
e.Form.Strips("快捷菜单1"))
'注入菜单，方便编码
前端脚本也引入了库和菜单对象
const ft = window.chrome.webview.hostObjects.sync.ft;
const foxmnu =
window.chrome.webview.hostObjects.sync.foxmnu;
如果不对菜单做单独处理，我们的编码会变得比较麻烦，例如脚本中的：
foxmnu.close()
如果没有单独注入菜单的话，将不得不这样写：
ft.Forms["在JS中使用Foxtable菜单"].Strips["快捷菜单1"].Close()
真的好麻烦。