如何为自定义HTML标签实现src属性加载文件并填充内容？

浏览器不会自动识别并处理自定义HTML标签的src属性，你需要通过JavaScript手动发起请求获取目标文件内容，再将其填充到元素中。以下是具体实现方案：

1. 修正HTML结构 #

首先把标签移到<body>内（<head>区域的元素通常不用于渲染可见内容），确保DOM能正确解析到该元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <h1 id="p"></h1>
</head>
<body>
    <space-lang src="Testing.txt"></space-lang>
    <script src="space.js"></script>
</body>
</html>

2. 编写space.js核心逻辑 #

在space.js中添加以下代码，实现加载外部文件并填充内容的功能：

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', () => {
    // 获取所有<space-lang>元素
    const spaceLangElements = document.querySelectorAll('space-lang');
    
    spaceLangElements.forEach(element => {
        const src = element.getAttribute('src');
        if (!src) return; // 没有src属性则跳过
        
        // 发起请求获取文件内容
        fetch(src)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`无法加载文件: ${src}，状态码: ${response.status}`);
                }
                return response.text();
            })
            .then(content => {
                // 将文件内容填充到元素中
                element.textContent = content;
                // 如果需要语法高亮或后续代码解析，可在此处添加逻辑
            })
            .catch(error => {
                console.error('加载出错:', error);
                element.textContent = `加载失败: ${error.message}`;
            });
    });
});

关键说明 #

• 使用DOMContentLoaded事件确保在DOM解析完成后再操作元素，避免找不到标签的问题。
• 通过fetch API异步获取外部文件内容，这是现代浏览器推荐的网络请求方式。
• 内置错误处理逻辑，当文件不存在或请求失败时，会在控制台输出错误并在页面上提示用户。
• 若后续需要对加载的自研语言代码进行解析、语法高亮等处理，可在element.textContent = content之后添加对应逻辑。

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