WPF XAML WebBrowser加载HTM报页面脚本错误 必应地图无法显示

WPF 自带 WebBrowser 控件默认调用IE7内核渲染页面，加载本地HTML文件时还会触发本地安全区域的脚本限制，而必应地图JavaScript API最低要求IE11及以上内核，且需要允许跨域加载远程资源，默认配置下必然触发脚本报错，导致地图无法渲染。 #

1. 强制WebBrowser使用高版本IE内核 #

WebBrowser默认的IE7内核完全不支持必应地图用到的ES6+语法、DOM API，必须强制切换到IE11边缘模式：

• 程序端配置：在App.xaml.cs启动逻辑中写入注册表项，强制当前程序的WebBrowser使用IE11渲染：

using Microsoft.Win32;
using System.Windows;

protected override void OnStartup(StartupEventArgs e)
{
    base.OnStartup(e);
    string exeName = System.IO.Path.GetFileName(System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName);
    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(
        @"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION"))
    {
        // 11001 对应IE11边缘模式
        key.SetValue(exeName, 11001, RegistryValueKind.DWord);
    }
}

• 页面端配置：在HTML的<head>标签最开头（必须在所有脚本、样式引用之前）加入兼容模式标记：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

2. 绕开本地文件的安全沙箱限制 #

直接通过本地文件路径C:/xxx/index.htm加载的页面属于本地计算机安全区域，默认会拦截跨域脚本、阻止远程地图资源加载，推荐两种解决方式：

• 生产环境方案：在程序内启动一个极简的HttpListener本地HTTP服务，将页面资源通过http://localhost:端口的地址提供访问，再调用wb.Navigate("http://localhost:端口/index.htm")，完全绕开本地文件的安全限制，这也是WPF套壳Web页面加载在线地图的通用方案。
• 临时调试方案：禁用脚本错误弹窗，在WebBrowser的Navigated事件中添加如下代码，关闭脚本报错提示：

需要先添加COM引用「Microsoft Internet Controls」

private void wb_Navigated(object sender, NavigationEventArgs e)
{
    SHDocVw.WebBrowser browser = (SHDocVw.WebBrowser)wb.Document;
    browser.Silent = true;
}

3. 修复HTML代码中的显性错误 #

你提供的HTML代码本身存在3个会直接触发脚本报错的问题：

• 必应地图API引用使用了http协议，当前必应地图服务已经强制HTTPS，将脚本src替换为https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=你的有效密钥，避免混合内容被拦截。
• 代码中var coords = '<%=coords%>';是ASP.NET服务端模板语法，本地静态HTML不会解析这段语法，会直接将模板字符串作为JS代码执行触发语法错误，替换为实际的坐标字符串值即可。
• 代码中通过document.getElementById获取myMap、pushpinClick、pushpinMouseover、address这几个DOM元素，必须确认HTML中存在对应id的节点，否则取到null时调用style、textContent属性会直接抛出空引用错误。

内容的提问来源于stack exchange，提问作者Marcus