使用Foxtable菜单
ContextMenuRequested事件不仅可以修改或取消默认的上下文菜单，还可以用Foxtable的快捷菜单替换掉默认的上下文菜单。
本节内容可以参考示例文件"CaseStudy\WebViewer\菜单.Table"。
关于窗口快捷菜单的设计，请参考：关于窗口菜单
示例
1、窗口的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('mousedown', function(e) {
if (e.button === 0) {
if (foxmnu.Visible) {
foxmnu.Close();
}
}
});
</script>
</body>
</html>
]]>.Value
wv.NavigateToString(html)
提示：在网页的其他地方单击鼠标，并不能自动关闭Foxtable的快捷菜单，所以上面编写了mousedown事件的脚本，用于关闭菜单。
2、WebViewer的ContextMenuRequested事件代码，用于用Foxtable的快捷菜单替换掉默认菜单：
'''Async
e.Handled =
True
Dim
info =
Await
e.GetElementInfo()
'这个必须在e.Handled后面执行
Dim
mnu
As
WinForm.Strip = e.Form.Strips("快捷菜单1")
Select
Case
info.id
'根据元素ID判断
Case
"redBox"
,
"blueBox",
"greenBox"
mnu.Items("autoSave").Visible
= (info.id <>
"redBox")
mnu.Items("print").Visible
= (info.id <>
"blueBox")
mnu.Items("preview").Visible
= (info.id <>
"blueBox")
e.Form.Strips("快捷菜单1").Show()
End
Select
3、窗口的ItemClick事件代码，用于在网页显示所单击的菜单项：
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
wv.ExecuteScriptAsync("updateStatus('"
& e.StripItem.Text &
"')")