带有 HTMLcollection 的 Array.from() 在 Chrome 浏览器中似乎不起作用

Question

我有一段 JavaScript 代码可以在所有浏览器（甚至 IE）上运行，但在我的 HUAWEI P8 Lite 和 Android 6 上运行 Chrome 时失败。

Chrome 的版本是 71.0.3578.99。

错误代码是var class_arr = Array.from(class);，其中class 是HTMLcollection。

虽然it should be supported by Chrome on mobile，但 Array.from() 似乎失败了。

另外，我注意到这个相同的代码曾经在一次更新前运行，而不是奇怪地在两次更新前运行。

您可以使用this URL 测试问题（当然，只要我能找到解决问题的方法，这将无效）。您需要打开左侧边栏并尝试使用加号或减号按钮放大地图。

编辑

这是我使用 Array.from() 的代码：

export function updateSlider(all_sliders, ol_layers, class_layers) {
    // updates slider with the actual opacity of the layers
    for (var i = 0, len_i = all_sliders.length; i < len_i; ++i) {
        var curr_slider = all_sliders[i];
        // get layer from ol_layers whose title is equal to current slider id
        // Find the value of the first element/object in the array, otherwise undefined is returned
        // (https://stackoverflow.com/a/13964186/1979665)
        var lyr = ol_layers.find(obj => {
            return obj.values_["title"] === curr_slider.getAttribute("id")
        });
        // get class_layer (layerswitcher) from class_layers whose title is equal to current slider id
        // (first we need to convert class_layers from HTMLCollection to array otherwise .find will fail)
        var class_layers_arr = Array.from(class_layers);
        var class_elem = class_layers_arr.find(obj => {
            return obj.innerText.replace('\t','') === curr_slider.getAttribute("id")
        });
        // get current layer opacity and set it as the value of current slider
        var curr_opacity = lyr.values_["opacity"];
        curr_slider.setAttribute("value", curr_opacity);
        // create new li element
        var li_elem = document.createElement("LI");
        // add slider input to li elem
        li_elem.appendChild(curr_slider);
        // add li with layer legend after layer li
        insertAfter(li_elem, class_elem);
        changeOpacity(curr_slider, ol_layers);
    }
}

class_layers 首先在另一个脚本中定义为var class_layers = document.getElementsByClassName("layer");

编辑 2

好的，显然这个问题通常与 Chrome 有关，而不仅仅是在移动设备上。事实上，如果您在 Chrome 桌面中尝试上述 URL，您可以通过打开侧边栏（左侧）然后关闭它并按 + 或 - 符号放大地图来重现错误。我想这与我的代码和 OpenLayers 处理点击事件的方式有关。我可能会删除这个问题，因为听起来我需要进一步挖掘问题。

解决方案

不删除，因为我认为其他人看到解决方案可能有用。

这是我创建并关闭的 OpenLayers github 问题的链接：https://github.com/openlayers/openlayers/issues/9105。

问题是由 OL (v5.3.0) 的 View 类触发的事件“change:resolution”在动画期间多次发出（问题还引用了here）。

新考虑

事实证明，我在移动设备上仍然遇到问题。 真正的解决方法是不在我的代码中使用innerText 并切换到innerHTML，因为它在（并且仅在）Chrome 中总是空的，而在其他浏览器中则不是（我实际上可以看到字符串）。如果您有兴趣，我可以尝试提供一个示例，但不幸的是我在网络上找不到太多关于这个问题的信息......

Answer 1

这不是Array.from() 的问题。

检查您的 class_elem 变量 它是未定义的（因为没有找到适合您的条件的元素），然后当您尝试获取 undefined 的 parentNode 时它会失败：

export function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}