TypeError: n[o].content.replaceAll is not a function

今天发现前端网页的脚本在安卓手机飞书内嵌的浏览器中没有运行，导致页面一直卡在 loading 的状态。由于看不到控制台的日志，只好把错误消息打印到了页面上：

TypeError: n[o].content.replaceAll is not a function

replaceAll 方法是在 ES2021 / ES12 中加入的^[1]，很可能是飞书内嵌的浏览器还不支持这个方法。

此时可以通过添加 String.prototype.replaceAll 原型方法来避免这个报错^[2]：

javascript

if (typeof(String.prototype.replaceAll) != "function") {
    String.prototype.replaceAll = function (s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
    }
}

另外在排查时还发现了一个比较奇怪的现象：如果因为某种原因（比如手机网络信号不好），导致某个 js 文件（如 jquery.min.js ）下载失败，那么很可能在一段时间内，飞书和微信内嵌的浏览器会一直当作这个文件加载不了（相当于即使文件没加载成功也缓存了下来）。由于是偶发的，暂时也没法确定是不是由于内嵌浏览器本地缓存导致的。对于这种情况暂时还没找到什么好的解决方法。

关于遗留的问题，如果真的是前端缓存问题导致的，以 jQuery 未成功加载为例可以考虑使用如下方式：

javascript

try {
    if (typeof (loadJS) == "function" && typeof($) == "undefined") {
        loadJS('/dist/js/jquery.min.js?v=' + Math.random(), () => { doSomething() });
    }
} catch (e) {}

function loadJS(url, callback) {
    const script = document.createElement('script'),
        fn = callback || function () { };
    script.type = 'text/javascript';

    //IE
    if (script.readyState) {
        script.onreadystatechange = function () {
            if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                fn();
            }
        };
    } else {
        //其他浏览器
        script.onload = function () {
            fn();
        };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}

这个只是设想的解决方案，暂时还未验证过。这种方式缺点也很明显，只能验证一个 js 文件，如果有多个则每个都要单独验证。

TypeError: n[o].content.replaceAll is not a function ​

TypeError: n[o].content.replaceAll is not a function