吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 594|回复: 6
收起左侧

[求助] HTML无法加载响应数据NoDataFoundForResourceWithGivenIdentifier

[复制链接]
hdxzd12 发表于 2024-8-4 15:57
现在有一个HTML文件,相关代码如下
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LRC文件加载器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <h2>LRC文件加载器</h2>
    <div id="lrcContent">
        <!-- 这里将显示LRC文件的内容 -->
    </div>

    <script>
        let lrcLines = []; // 用于存储解析后的LRC歌词数据
        let currentIndex = 0; // 当前歌词行索引

        // 获取URL中的LRC文件地址
        const urlParams = new URLSearchParams(window.location.search);
        const lrcFileUrl = urlParams.get('URL');

        // 加载并解析LRC文件内容
        if (lrcFileUrl) {
            fetch(lrcFileUrl)
                .then(response => response.text())
                .then(data => {
                    parseLrc(data); // 解析LRC文件内容
                    setInterval(displayCurrentLine, 500); // 每隔500ms更新显示当前时间的歌词
                })
                .catch(error => {
                    console.error('Error fetching LRC file:', error);
                    document.getElementById('lrcContent').innerText = 'Failed to load LRC file.';
                });
        } else {
            document.getElementById('lrcContent').innerText = 'No LRC file specified.';
        }

        // 解析LRC文件内容
        function parseLrc(data) {
            lrcLines = []; // 清空之前的歌词数据
            const lines = data.split('\n');
            lines.forEach(line => {
                const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
                if (match) {
                    const minutes = parseInt(match[1]);
                    const seconds = parseInt(match[2]);
                    const milliseconds = parseInt(match[3]);
                    const time = minutes * 60 + seconds + milliseconds / 1000;
                    const text = match[4].trim();
                    lrcLines.push({ time, text });
                }
            });
        }

        // 显示当前时间点的歌词内容
        function displayCurrentLine() {
            const audioElement = document.getElementById('audio'); // 如果有音频,可以获取当前播放时间
            let currentTime = audioElement ? audioElement.currentTime : 0; // 获取当前时间
            // 查找当前时间点对应的歌词行
            for (let i = 0; i < lrcLines.length - 1; i++) {
                if (currentTime >= lrcLines[i].time && currentTime < lrcLines[i + 1].time) {
                    currentIndex = i;
                    break;
                }
            }
            // 更新显示的歌词内容
            const lrcDiv = document.getElementById('lrcContent');
            lrcDiv.innerHTML = '<pre>' + escapeHtml(lrcLines[currentIndex].text) + '</pre>';
        }

        // 函数用于转义HTML特殊字符,避免XSS攻击
        function escapeHtml(unsafe) {
            return unsafe
                 .replace(/&/g, "&")
                 .replace(/</g, "<")
                 .replace(/>/g, ">")
                 .replace(/"/g, """)
                 .replace(/'/g, "'");
        }
    </script>
</body>
</html>

在使用时出现无法加载响应数据的情况
这种情况应该如何解决
image.png

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

我心飞翔1995 发表于 2024-8-4 18:02
niu666888 发表于 2024-8-4 17:50
给你问GPT

从你的描述和截图来看,问题可能出在LRC文件的URL或者文件本身。以下是一些可能的解决方法:
...
禁止使用ChatGPT或其他AI生成的答案解答问题

注意版规
mmffddyy 发表于 2024-8-4 20:47
把后端代码也发过来啊,就给个前端怎么知道什么问题
爱飞的猫 发表于 2024-8-5 04:36
要看终端或 HTTP 请求头(标头)的提示。盲猜一个可能是请求被 CORS 规则阻挡了(域名不同等情况)。如果 lrc 文件的服务器不属于你,你需要起个后端转发资源请求。

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
d199212 发表于 2024-8-5 08:22
看着请求错误了吧
 楼主| hdxzd12 发表于 2024-8-5 09:48
mmffddyy 发表于 2024-8-4 20:47
把后端代码也发过来啊,就给个前端怎么知道什么问题

后端没什么代码,这个东西就是从?URL=后面获取歌词文件的地址
而那个地址是用的HTTP File Server - v2.3m (Build #300), &#169; 2002-2010 rejetto作为服务端
 楼主| hdxzd12 发表于 2024-8-5 13:12
本来想看终端或 HTTP 请求头结果这个程序直接不去请求文件了。。。。。。。。。。。。。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-12-12 21:53

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表