当一个不存在时，JavaScript 似乎正在移动设备上运行“onscroll”事件答案

【问题标题】：JavaScript seems to be running "onscroll" event on mobile when one isn't present当一个不存在时，JavaScript 似乎正在移动设备上运行“onscroll”事件
【发布时间】：2018-03-06 08:24:09
【问题描述】：

我的 HTML 是这样的：

<span id="someDIV"></div>
<div id="anotherDIV"></div>

我的 JavaScript 是这样的：

var path = window.location.pathname.toString();
var w;
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

function someFunction(a, r) {
"use strict";
var someScript = document.createElement("script");
someScript.type = "text/javascript"; someScript.async = true;
someScript.src = "some script src";
document.getElementById("someDIV").parentNode.insertBefore(someScript, document.getElementById("someDIV").nextSibling);
}

function resizeUI() {
"use strict";
if (path !== "/" && path.indexOf("/category/") === -1 && path.indexOf("/label/") === -1 && path.indexOf("/default.aspx") === -1) {
    if (w >= 1305) {
        new someFunction(8, 2);
}}}

(resizeUI)();

window.addEventListener("resize", function () {
"use strict";
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
resizeUI();
});

基本上someFunction 所做的是加载另一个脚本，该脚本执行innerHTML，将内容放入anotherDIV。它将这个脚本放在someDIV 范围内。这个被加载的脚本的编码类似于：

(function() {document.getElementById('anotherDIV').innerHTML = 'something';})();

所有这些代码都可以在桌面设备上按预期运行，并且大部分也可以在移动设备上运行。当我在移动浏览器上滚动时，我的问题就出现了。这会导致代码重复，anotherDIV 将执行另一个innerHTML，并且内容将发生变化。我知道这发生在 iOS 10 上的 Safari 上。

这个问题使得在anotherDIV 中加载的原始内容无法进行交互，因为它几乎每次滚动页面并停止时都会发生变化；但是，没有onScroll 事件监听器。我的 JavaScript 位于关闭 body 标记之前加载的外部脚本文件中，这就是我不使用任何 onLoad 事件的原因。

【问题讨论】：

Safari 的 window.innerWidth 概念与其他浏览器不同。你试过使用 screen.width 吗？
我试过了，但没有解决问题。它发生在 Firefox 和 iOS 上的 Chrome 上。
那一定是IOS问题，或许这个页面可以帮到你：ryanve.com/lab/dimensions
我的朋友向我指出，他在 Android 和 Google Chrome 上存在问题，所以我认为这不是 iOS 问题。

标签： javascript html mobile

【解决方案1】：

我对此问题的解决方案是使用新尺寸检查原始屏幕尺寸，因为滚动导致我的resize 事件侦听器触发。我这样做了：

window.addEventListener("resize", function () {
"use strict";
var newWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (newWidth !== width) {width = newWidth; resizeUI(newWidth);}
});

我还在 resizeUI 函数上添加了一个参数，供那些想知道上面代码中传递的参数的人使用。似乎在我的网站上使用我的原始 HTML/CSS 时，其中包含我认为不会导致问题的元素，resize 事件被触发。我还没有进一步指出确切的原因。

【讨论】：