KaiOS 2.5.1浏览器中网站JavaScript无法加载运行求助

我正在开发一个小型网站，目标是在**KaiOS浏览器（固件版本2.5.1）**中使用。但无论通过外部脚本还是内联编写的方式，JavaScript代码完全无法运行，而在PC浏览器中代码运行正常。以下是我的HTML和JS代码：

原始HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio relay for KaiOS</title>
</head>
<body>
    <h2>Radio relay for KaiOS browser</h1>
    <a href="https://www.silver.ru/">Серебряный дождь</a>
    <audio class="audio-station" controls src="http://silverrain.hostingradio.ru/silver128.mp3"></audio>
    <p>Now playing: TBD</p>
    <a href="https://asebeia.su/radio">Асебия</a>
    <audio class="audio-station" id="asebeia-station" controls src="https://azura.asebeia.su/listen/music/radio.mp3"></audio>
    <p id="now-playing-asebeia">Now playing: </p>
    <p>for personal use by A.N., last update 4 Sep 2023</p>
    <script src="/script.js"></script>
</body>
</html>

原始JS代码 #

// to test on the actual device if .js file loads up correctly
// it does not :(
let a = document.createElement("h1");
a.innerHTML = "Hello";
document.querySelector("body").prepend(a);

function stopOtherStations(currentAudioElement) {
    let audioElements = document.getElementsByTagName("audio");
    Array.from(audioElements).forEach(element => {
        if (element !== currentAudioElement) element.pause();
    });
};

async function getAsebeiaNowPlaying() {
    let response = await fetch("https://azura.asebeia.su/api/nowplaying/1");
    let nowPlaying = await response.json();
    return nowPlaying.now_playing.song.text;
};

window.onload = function (event) {
    let audioElements = document.getElementsByTagName("audio");
    Array.from(audioElements).forEach(element => {
        element.addEventListener("play", (event) => {
            stopOtherStations(element);
        });
    });

    // asebeia-specific code
    let audioAsebeia = document.getElementById("asebeia-station");
    let intervalId;

    audioAsebeia.addEventListener("playing", async (event) => {
        let nowPlayingAsebeia = document.getElementById("now-playing-asebeia");
        nowPlayingAsebeia.innerHTML = `Now playing: ${await getAsebeiaNowPlaying()}`;
        intervalId = setInterval(async () => {
            console.log(await getAsebeiaNowPlaying());
            nowPlayingAsebeia.innerHTML = `Now playing: ${await getAsebeiaNowPlaying()}`;
        }, 10000);
    });

    audioAsebeia.addEventListener("pause", (event) => {
        clearInterval(intervalId);
    });

};

核心问题排查与修复方案 #

1. ES6特性兼容问题（最关键） #

KaiOS 2.5.1基于Firefox 45，该版本不支持async/await（Firefox从v52才开始支持），这会直接导致脚本执行中断。同时替换部分ES6语法为ES5写法能提升兼容性：

• 将async/await替换为Promise链式调用
• 用[].slice.call(类数组对象)替代Array.from()（Firefox 45虽支持Array.from，但ES5写法兼容性更稳妥）
• 将箭头函数替换为普通函数，避免上下文异常

2. 混合内容拦截 #

页面以HTTPS部署，但第一个音频资源使用HTTP链接，KaiOS浏览器会阻止混合内容，可能引发脚本执行异常。需将资源切换为HTTPS链接（若服务器支持）：

<audio class="audio-station" controls src="https://silverrain.hostingradio.ru/silver128.mp3"></audio>

3. 脚本加载与CORS问题 #

• 检查/script.js路径是否正确：通过KaiOS远程调试查看网络请求，确认脚本是否成功加载
• 跨域请求限制：Firefox 45对CORS限制严格，需确认目标API返回了正确的CORS响应头，否则需通过自有服务器代理转发请求

修复后的JS代码示例 #

// 测试脚本是否加载
var a = document.createElement("h1");
a.innerHTML = "Hello";
document.querySelector("body").prepend(a);

function stopOtherStations(currentAudioElement) {
    var audioElements = document.getElementsByTagName("audio");
    [].slice.call(audioElements).forEach(function(element) {
        if (element !== currentAudioElement) element.pause();
    });
};

function getAsebeiaNowPlaying() {
    return fetch("https://azura.asebeia.su/api/nowplaying/1")
        .then(function(response) {
            return response.json();
        })
        .then(function(nowPlaying) {
            return nowPlaying.now_playing.song.text;
        });
};

window.onload = function(event) {
    var audioElements = document.getElementsByTagName("audio");
    [].slice.call(audioElements).forEach(function(element) {
        element.addEventListener("play", function(event) {
            stopOtherStations(element);
        });
    });

    // asebeia-specific code
    var audioAsebeia = document.getElementById("asebeia-station");
    var intervalId;

    audioAsebeia.addEventListener("playing", function(event) {
        var nowPlayingAsebeia = document.getElementById("now-playing-asebeia");
        getAsebeiaNowPlaying().then(function(songText) {
            nowPlayingAsebeia.innerHTML = "Now playing: " + songText;
        });
        intervalId = setInterval(function() {
            getAsebeiaNowPlaying().then(function(songText) {
                console.log(songText);
                nowPlayingAsebeia.innerHTML = "Now playing: " + songText;
            });
        }, 10000);
    });

    audioAsebeia.addEventListener("pause", function(event) {
        clearInterval(intervalId);
    });

};

调试建议 #

1. 启用KaiOS设备的USB调试，通过Firefox浏览器连接远程调试，查看控制台报错信息，这是定位问题最直接的方式
2. 逐步简化代码：先保留基础测试脚本（如添加Hello的h1），确认脚本可运行后再逐步添加其他功能

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