开发代码自动着色工具时JS代码书写正确却无法运行问题咨询

你的script标签内部代码存在多处语法错误，导致JS引擎解析脚本时直接崩溃，所以块内的alert无法触发，只有行内事件绑定的代码可以正常执行。具体错误和修复方法如下：

具体错误点 #

• 定义schemes对象时错误使用冒号:代替赋值等号=，这是导致整个脚本块直接解析失败的核心原因，直接阻断了后续所有代码执行
• 解析URL参数时拼写错误，将全局对象location写为locations，运行到此处会抛出未定义异常
• scheme赋值逻辑存在类型冲突：初始状态下data.scheme为字符串"normal"，没有传URL参数的情况下执行data.scheme[data.lang]会返回undefined，导致样式赋值报错
• 可编辑属性名拼写错误，DOM属性是驼峰格式contentEditable（E大写），且URL参数拿到的是字符串类型的"true"/"false"，直接和布尔值true判断永远返回假
• 着色逻辑存在死循环嵌套问题：每次setColors都往innerHTML里插入新的span标签，后续替换会不断嵌套，短时间内就会导致DOM节点爆炸、页面卡顿
• body上绑定的onload事件会和脚本内的window.onload冲突，导致脚本内的onload回调不执行

修复后完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Put this into an IFRAME on your website</title>
        <style>
            body{
                padding: 0px;
                margin: 0px;
                overflow: scroll;
                background: #000000;
            }
            #code{
                color: #ffffff;
                display: block;
                width: 100vw;
                padding: 2px;
                box-sizing: border-box;
                position: absolute;
                top: 0px;
                left: 0px;
            }
        </style>
        <noscript>
            <style>
                #code{
                    animation: flash 1s linear infinite;
                }
                @keyframes flash{
                    0%{
                        background: #ff0000;
                        color: #ff0000;
                    }
                }
            </style>
        </noscript>
    </head>
    <body>
        <pre id="code">
Insert this page into an IFRAME

?scheme=XXXX&lang=XXXX URL queries:

scheme: The color scheme for the code coloration.
Values: normal

lang: The programming language.
Values: js, html

editable: Whether or not the code can be edited.
Values: true, false

var
        </pre>
        <script type="text/javascript">
            alert("script is running");
            try{
                // 修复：冒号改为等号
                var schemes = {
                    normal: {
                        js: {
                            background: "#ffffff",
                            base: "#000000",
                            variable: "#3c0029",
                            fn: "#0000ff",
                            string: "#0000ff",
                            number: "#0000ff",
                            boolean: "#006666",
                            parameter: "#ffcc00",
                            system: "#006666",
                            data: "#008800",
                            comments: "#006600",
                            misc: "#224444"
                        },
                        // 补充html配色避免默认lang为html时报错
                        html: {
                            background: "#1e1e1e",
                            base: "#d4d4d4",
                            variable: "#9cdcfe",
                            fn: "#dcdcaa",
                            string: "#ce9178",
                            number: "#b5cea8",
                            boolean: "#569cd6",
                            parameter: "#9cdcfe",
                            system: "#569cd6",
                            data: "#4ec9b0",
                            comments: "#6a9955",
                            misc: "#d7ba7d"
                        }
                    }
                };
                var data = {
                    scheme: "normal",
                    lang: "html"
                };
                var code = document.getElementById("code");
                // 存储原始文本避免无限嵌套span
                let rawCode = code.innerText;
                
                // 直接执行初始化逻辑，避免onload冲突
                alert(location.search);
                if(location.search){
                    // 修复：locations改为location
                    var s = location.search.substring(1);
                    var ss = s.split("&");
                    for(var i = 0; i < ss.length; i++){
                        var ssn = ss[i].split("=");
                        uri(decodeURIComponent(ssn[0]), decodeURIComponent(ssn[1]));
                    }
                }
                // 调低定时器频率，降低性能消耗
                setInterval(() => {
                    setColors();
                },100);

                function uri(name,value){
                    try{
                        if(name == "scheme"){
                            if(schemes[value]) data.scheme = value;
                        }
                        if(name == "lang"){
                            data.lang = value;
                        }
                        if(name == "editable"){
                            // 修复属性名和判断逻辑
                            code.contentEditable = value === "true";
                        }
                    }catch(err){
                        alert(err);
                    }
                }
                function setColors(){
                    var col = schemes[data.scheme][data.lang];
                    document.body.style.background = col.background;
                    code.style.color = col.base;
                    if(data.lang == "js"){
                        // 用原始文本替换，避免无限嵌套span
                        code.innerHTML = rawCode.replace("var","<span style='color: " + col.variable + "'>&#86;ar</span>");
                    }
                }
            }catch(err){
                alert(err);
            }
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Major_Flux-