Javascript 文件仅在 Google Chrome 中运行

Question

我在使用 javascript 文件时遇到了一些问题，它只能在 google chrome 上运行。 这是我的 JS 文件，它更改了另一个名为 index.js 的文件中某些 DOM 元素的颜色。 它在 Google Chrome 中完美运行，但在 Firefox、OperaBrowser 甚至移动浏览器中，它就不起作用。我需要做任何更改才能使其在不同的浏览器上运行吗？

$( document ).ready(function(){

    alert('file loaded');
    // $("#bOutline1").hide();

    // $(".colorpicker").asColorPicker();
    // $(".complex-colorpicker").asColorPicker({
    //     mode: 'complex'
    // });

    var inputBarraTitulos;
    var inputMenuLateral;
    var inputCoresTextosBarraTitulos;
    var inputCoresTextosMenuLateral;
    var inputCorMenuSuperior;

    var defaultColor = "#7460ee";


    window.addEventListener("load", startCoresBarraTitulos, false);
    window.addEventListener("load", startCoresMenuLateral, false);
    // window.addEventListener("load", startCoresTextosBarraTitulos, false);
    window.addEventListener("load", startCoresTextosMenuLateral, false);
    window.addEventListener("load", startInputCorTopBar, false);

    function startCoresBarraTitulos() {
        alert('startbarratitulo');
        //cor das barras de titulo
        inputBarraTitulos = document.querySelector("#inputBarraTitulos");
        inputBarraTitulos.value = defaultColor;
        inputBarraTitulos.addEventListener("input", trocaCorBarraTitulos, false);
        inputBarraTitulos.select();

    }

    function startCoresMenuLateral() {

        //cor do menu lateral
        inputMenuLateral = document.querySelector("#inputMenuLateral");
        inputMenuLateral.value = defaultColor;
        inputMenuLateral.addEventListener("input", trocaCorMenuLateral, false);
        inputMenuLateral.select();
    }

    // function startCoresTextosBarraTitulos() {

    //     //cor do menu lateral
    //     inputCoresTextosBarraTitulos = document.querySelector("#inputCoresTextosBarraTitulos")
    //     inputCoresTextosBarraTitulos.value = defaultColor
    //     inputCoresTextosBarraTitulos.addEventListener("input", trocaCorTextosBarraTitulo, false)
    //     inputCoresTextosBarraTitulos.select()
    // }

    function startCoresTextosMenuLateral() {

        //cor do menu lateral
        inputCoresTextosMenuLateral = document.querySelector("#inputCoresTextosMenuLateral");
        inputCoresTextosMenuLateral.value = defaultColor;
        inputCoresTextosMenuLateral.addEventListener("input", trocaCorTextosMenuLateral, false);
        inputCoresTextosMenuLateral.select();
    }

    function startInputCorTopBar() {      

        inputCorMenuSuperior = document.getElementById("inputCorMenuSuperior");
        inputCorMenuSuperior.value = defaultColor;
        inputCorMenuSuperior.addEventListener("input", trocaCorTopBar, false);
        inputCorMenuSuperior.select();
    }

    // converter RGB em HEX
    function rgbToHex(total) {
        var total = total.toString().split(',');
        var r = total[0].substring(4);
        var g = total[1].substring(1);
        var b = total[2].substring(1,total[2].length-1);
        return ("#"+checkNumber((r*1).toString(16))+checkNumber((g*1).toString(16))+checkNumber((b*1).toString(16))).toUpperCase();
    }
    function checkNumber(i){
        i = i.toString();
        if (i.length == 1) return '0'+i;
        else return i;
    }




    function trocaCorBarraTitulos(event) {

        const barraTitulos = document.getElementById("cTitulo");
        const tituloSelecaoCores = document.getElementById("tituloSelecaoCores");
        const FotoPerfil = document.getElementById("FotoPerfil");
        const flexNoBlock = document.getElementById("FlexNoBlock");

        tituloSelecaoCores.style.backgroundColor = event.target.value;
        FotoPerfil.style.backgroundColor = event.target.value;
        barraTitulos.style.backgroundColor = event.target.value;
        flexNoBlock.style.backgroundColor = event.target.value;

        const corBarraTitulos = tituloSelecaoCores.style.backgroundColor; //recebe a cor geral das barras de titulo

        document.getElementById("RecebeCorBarraTitulos").value = rgbToHex(corBarraTitulos);
        const RecebeCorBarraTitulos = document.getElementById("RecebeCorBarraTitulos").value;
        console.log(RecebeCorBarraTitulos);

        $.ajax({
            url:'cor_enviar.php',
            type:'POST',
            data: {RecebeCorBarraTitulos: RecebeCorBarraTitulos}, 
            success:function(data){
                $("#bOutline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        });

    }



    function trocaCorMenuLateral(event){
        const leftSidebar = document.getElementById("leftSidebar");

        const corMenuLateral = leftSidebar.style.backgroundColor;
        leftSidebar.style.backgroundColor = event.target.value;

        document.getElementById("RecebeCorMenuLateralFundo").value = rgbToHex(corMenuLateral);
        const RecebeCorMenuLateralFundo = document.getElementById("RecebeCorMenuLateralFundo").value;
        console.log(leftSidebar.style.backgroundColor);

        $.ajax({
            url:'cor_enviar.php',
            type:'POST',
            data: {RecebeCorMenuLateralFundo: RecebeCorMenuLateralFundo}, 
            success:function(data){
                $("#bOutline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        });

    }

    function trocaCorTopBar(event){

        const topBar = document.getElementById("topbar");

        topBar.style.backgroundColor = event.target.value;
        const corTopBar = topBar.style.backgroundColor;

        document.getElementById("RecebeCorTopBar").value = rgbToHex(corTopBar);
        const RecebeCorTopBar = document.getElementById("RecebeCorTopBar").value;
        console.log(RecebeCorTopBar);

        $.ajax({
            url:'cor_enviar.php',
            type:'POST',
            data: {RecebeCorTopBar: RecebeCorTopBar}, 
            success:function(data){
                $("#bOutline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        });

    }

    function trocaCorTextosMenuLateral(event){
        const textoLeftSidebar = document.getElementById("textColor");
        const corTextoMenuLateral = textoLeftSidebar.style.color;

        textoLeftSidebar.style.color = event.target.value;

        document.getElementById("RecebeCorTextoMenuLateral").value = rgbToHex(corTextoMenuLateral);
        const RecebeCorTextoMenuLateral = document.getElementById("RecebeCorTextoMenuLateral").value;
        console.log(RecebeCorTextoMenuLateral);

        $.ajax({
            url: 'cor_enviar.php',
            type: 'POST',
            data: {RecebeCorTextoMenuLateral: RecebeCorTextoMenuLateral},
            success: function(data){
                $("#Outline1").show();
                alert(data);
            },
            error: function(data){
                alert("erro");
            }
        })

    }

});

Answer 1

您正在设置load window 上的事件监听器在你的$(document).ready()内功能。

这是不确定且不可靠的。当您设置这些监听器时，load事件可能已经触发。

这很容易因浏览器或其他因素而异。

移动window.addEventListener("load",...)调用$(document).ready()外部 .

代码中可能还存在其他问题，但我暂时没有时间，只想让您了解这一问题。