使用document.write拉取在线代码后核心功能失效问题求助

核心问题原因 #

你遇到的搜索栏、Pokedex等功能加载失败，主要源于两个关键问题：

1. 资源路径解析错误：Github上的index.html里的资源（JS、CSS、图片等）多使用相对路径，本地用document.write写入后，浏览器会以file://协议为基准解析路径，导致无法匹配到Github上的在线资源。
2. 脚本执行异常：document.write在页面加载完成后使用会重置文档流，且拉取的HTML中的脚本可能因加载时机、作用域问题无法正常执行。

可行解决方案 #

1. 修正资源路径（必做） #

拉取HTML后，通过添加<base>标签统一指定资源基准URL，或批量替换相对路径为Github仓库的绝对路径：

// 替换为你的Github仓库分支地址
const repoBaseUrl = "https://raw.githubusercontent.com/你的仓库名/目标分支/";

fetch(repoBaseUrl + "index.html")
  .then(res => res.text())
  .then(rawHtml => {
    // 方案A：添加base标签，让所有相对路径基于仓库地址解析
    const htmlWithBase = `<base href="${repoBaseUrl}">${rawHtml}`;
    
    // 方案B：批量替换所有相对路径为绝对路径（适合精确控制场景）
    // const processedHtml = rawHtml.replace(/(src|href)="(?!https?:\/\/)(.*?)"/g, `$1="${repoBaseUrl}$2"`);
    
    // 替换页面内容，避免document.write的副作用
    document.body.innerHTML = htmlWithBase;
    
    // 重新执行脚本（解决innerHTML插入脚本不自动执行的问题）
    document.body.querySelectorAll("script").forEach(oldScript => {
      const newScript = document.createElement("script");
      oldScript.src ? newScript.src = oldScript.src : newScript.textContent = oldScript.textContent;
      oldScript.replaceWith(newScript);
    });
  })
  .catch(err => console.error("拉取更新失败:", err));

2. 避免使用file://协议运行 #

本地测试时，不要直接双击HTML文件打开，而是启动一个本地HTTP服务器（比如执行Python命令：python -m http.server），通过http://localhost:8000访问页面。file://协议有严格的跨域和资源加载限制，会导致大量在线依赖无法正常加载。

3. 验证资源跨域可用性 #

确认Github仓库中的资源（如emulatorjs、ruffle的脚本）允许跨域访问。如果遇到CORS错误，可以将仓库切换为Github Pages服务（Pages资源默认允许跨域），或直接引用官方CDN提供的资源链接。

关于toolki.com转换逻辑的推测 #

该工具本质是将HTML及依赖资源的路径统一处理为绝对路径，同时将HTML内容封装为可直接执行的JS代码，确保脚本在正确的作用域和时机下运行，规避了document.write和路径解析的问题。

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