关于测试页面

普通用户可以忽略本节内容。

出于方便考虑,本文档中的测试页面基本都是直接嵌入到代码中的,然后用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")

即可正常显示图片。


本页地址:http://www.foxtable.com/webhelp/topics/6370.htm