关于测试页面
普通用户可以忽略本节内容。
出于方便考虑,本文档中的测试页面基本都是直接嵌入到代码中的,然后用NavigateToString导航,例如:
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<head><title>本地HTML</title></head>
<body>
<h1>这是直接加载的HTML字符串</h1>
<p>来自Foxtable的问候</p>
</body>
</html>
]]>.Value
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
wv.NavigateToString(html)
实际开发的时候,建议大家使用单独的网页文件,例如:
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
Await
wv.EnsureCoreWebView2Async(Nothing)
wv.CoreWebView2.Navigate(ProjectPath &
"scrollToView.html")
因为将网页直接嵌入到代码中,后续修改非常不便;而使用单独的页面文件,不仅可以用专业的第三方工具设计,也便于维护和版本管理。
其次NavigateToString也有一些不足 ,因为其加载的网页是来自内存中的字符串,没有真实的域名,所以不能使用localStorage 。
例如对于下面的代码(来自示例文件“DOM.Table”):
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
' 动态添加元素
Dim
addJs
As
String
=
<![CDATA[
var counter = parseInt(localStorage.getItem('dynamicCounter') || '0') + 1;
localStorage.setItem('dynamicCounter', counter);
var container = document.getElementById('dynamicContainer');
var newDiv = document.createElement('div');
newDiv.id = 'dynamic_' + counter;
newDiv.className = 'card';
newDiv.style.margin = '10px';
newDiv.style.background = '#ffd700';
newDiv.innerHTML = '新元素
#' + counter;
container.appendChild(newDiv)
// 返回新元素的ID
newDiv.id;
]]>.Value
Dim
newId =
Await
wv.ExecuteScriptAsync(addJs)
'增加元素并获得新增元素的ID
newId = newId.Trim("""")
如果页面是通过NavigateToString加载的,那么上述代码将无法正常执行,因为代码中使用了本地存储localStorage。
即使不在Foxtable执行,将上述JS脚本转移到网页内部执行,也是不会成功的。
如果换成本地网页文件,则一切正常,当然对于上述代码而言,你完全可以不用localStorage,改用全局变量,因为这里的counter并不需要存储到下次加载页面的时候继续使用。
需要注意的是,对于需要存储数据的场景,是可以不用localStorage的,完全可以存储在数据表或其他本地文件中,这也是混合开发的优势。
此外NavigateToString默认也无法访问本地文件(后面有办法解决),例如:
Dim
html
As
String
=
<![CDATA[
<!DOCTYPE html>
<html>
<body>
<img id="img" src="file:///C:/abc/123.jpg">
</body>
</html>
]]>.Value
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
wv.NavigateToString(html)
这个页面插入了一个本地图片"c:/abc/123.jpg",但即使这个图片文件确实存在,上面的代码也不会成功显示图片。
如果将上面的网页内容保存为一个本地文件,例如"c:\abc\test.htm",然后导航到这个网页:
Dim
wv
As
WebViewer = e.Form.Controls("WebViewer1").WebViewer
wv.CoreWebView2.Navigate("c:\abc\test.htm")
即可正常显示图片。