Question

我有一段JavaScript代码可在所有浏览器（甚至是IE）上运行，但是在装有Android 6的HUAWEI P8 Lite上无法使用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变量它是未定义的（因为没有为您的条件找到任何元素），然后当您尝试在以下位置获取{strong> undefined 的parentNode时失败：

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

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

1 个答案: