为什么 Here Maps JS 事件在加载到 .NET WebBrowser 控件时停止触发？答案

【问题标题】：Why do Here Maps JS events stop firing when loaded into a .NET WebBrowser control?为什么 Here Maps JS 事件在加载到 .NET WebBrowser 控件时停止触发？
【发布时间】：2020-06-17 03:22:10
【问题描述】：

我有一个在 Legacy 模式下运行的交互式 Here Maps 地图，添加了一个 tap 事件侦听器，如下所示：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-data.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>
<body>
    <div>
        <div style="width: 640px; height: 480px" id="mapContainer"></div>
    </div>

    <script type="text/javascript">
        // Initialize the platform object
        var platform = new H.service.Platform({
            // We use a real API key but it's not included here for obvious reasons
            'apikey': 'notARealAPIKeyPleaseSubstituteForARealOne'
        });

        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();

        // Instantiate (and display) a map object
        // Using raster maptype and P2D for compatibility with IE11
        var map = new H.Map(
            document.getElementById('mapContainer'),
            maptypes.raster.normal.map,
            {
                zoom: 12,
                center: { lat: -33.81, lng: 150.78 },
                pixelRatio: window.devicePixelRatio || 1,
                engineType: H.map.render.RenderEngine.EngineType.P2D
            });

        // Add a default UI to the map
        var ui = H.ui.UI.createDefault(map, maptypes);
        // Make the map draggable
        var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

        // Add a listener for the 'tap' event on the map
        map.addEventListener("tap",
            function (evt) {
                console.log("Map tapped!", evt)
            });
    </script>
</body>
</html>

这在 Chrome 和 IE11 等浏览器中运行良好，地图可拖动，tap 事件详细信息被记录到控制台。但是，只要将此页面作为 .NET WebBrowser 控件的 URL 添加到 WinForms 项目中，地图拖动和点击事件就会突然停止工作，控制台不会记录任何错误。好像有什么东西因为某种原因阻止了地图事件的触发。

我已经尝试了this post 中详述的注册表黑客，以强制 WinForms 应用程序中的 WebBrowser 在没有 IE7 兼容模式的情况下使用 IE11（并验证这已通过用户代理检查器正确应用），但无济于事。我还尝试在将页面加载到 Visual Studio 调试器中的 WinForms 应用程序时运行该页面，并且它肯定会毫无问题地到达 addEventListener 行。我尝试的最后一件事是使用click 事件向页面添加一个按钮，这也很好。

我觉得我的选择已经不多了。有没有我忽略的东西，或者 WebBrowser 控件中是否有一些奇怪的行为会阻止这些事件触发？如果是这样，有没有办法解决它？

【问题讨论】：

将 JavaScript+Script+WebKit 调试器和 JavaScript 控制台附加到您添加 WebBrowser 控件的表单中，然后查看脚本抛出的内容（可能缺少 IndexedDB 支持）。
如果是这种情况，您在使用 IE 11 时也会遇到同样的问题。
是的，这可能是我尝试的第二件事，在其孤独的情况下打开表单，通过 Visual Studio 将脚本调试器附加到它并重新加载页面。它加载时没有大惊小怪，也没有错误，所以我不知道什么会阻止这些事件。据我所知，页面上没有使用 IndexedDB 的内容，除非 HERE 在后台使用它。
不是脚本调试器、JavaScript 调试器和脚本调试器和 WebKit 调试器。选择这 3 个。后者将为您提供更多信息。
你没有说IE11是否可以使用那个工具。如果没有，WebBrowser 控件当然不适用。使用另一个。您还可以为 WinForms 测试 WebView2，它现在可以工作了。

标签： javascript .net winforms webbrowser-control here-api

【解决方案1】：

旧版支持1：
互联网浏览器 9、10、11 iOS WebView 桌面 iOS 11+

如需了解更多浏览器对 JS API 的支持，请参考：https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/why-use.html

【讨论】：