如何根据URL参数加载对应HTML代码并在页面中渲染展示？

问题根因 #

1. 代码中对完整URL执行了toLowerCase()转小写操作，会破坏传入HTML中所有大小写敏感的内容（比如驼峰命名的JS变量、大小写敏感的资源路径、属性名），导致HTML渲染失败。
2. try代码块没有配套的catch分支，代码运行出错时没有任何提示，你无法感知到具体错误原因。
3. 传入的完整HTML没有做URL编码，HTML中自带的&、?、#、=等特殊字符会被浏览器识别为URL控制字符，导致page参数被截断，拿到的内容不完整自然无法正常渲染。
4. window.onload触发时文档已经加载完成，直接调用document.write会隐式清空文档，但缺少显式的document.open()和document.close()操作，部分浏览器会出现内容写入异常。

修正后的代码 #

window.onload = function() {
  try {
    // 移除toLowerCase()，不篡改原始URL内容
    const url = new URL(window.location.href);
    const pageContent = url.searchParams.get("page");
    // 先校验参数非空再写入
    if (pageContent) {
      document.open();
      document.write(pageContent);
      document.close();
    }
  } catch (err) {
    // 出错时输出错误信息方便调试
    document.body.innerHTML = `<p>加载失败，错误信息：${err.message}</p>`;
  }
}

使用注意事项 #

• 在Siri Shortcuts中拼接URL前，必须先对要传入的HTML内容执行URL编码，iOS快捷指令内置了「URL编码」动作，直接调用处理HTML内容后再拼接到?page=参数后即可解决参数截断问题。
• 该方案存在XSS安全风险，仅适合个人本地使用，不要公开对外提供服务，避免恶意用户传入恶意代码窃取信息。
• 若传入的HTML包含相对路径的外部资源（CSS、图片、JS），资源会以你当前站点的域名作为基准路径加载，路径不对的话需要改为绝对路径。

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