如何根据 url 参数加载 html 代码？答案

【问题标题】：How can I load html code based on url parameters?如何根据 url 参数加载 html 代码？
【发布时间】：2021-10-27 05:37:09
【问题描述】：

嗨，

我正在尝试加载 HTML 代码并根据 URL 参数将其显示在我的网站上。我希望它像这样工作。我的快捷方式（Siri Shortcuts）会将人们重定向到https://example.com/index.html?page=[HTML CODE HERE]。然后，该 URL 变量中的 HTML 代码将显示在站点上（不是空白文本，而是覆盖现有代码，以便显示该 HTML 页面）。问题是我用下面的代码来做。

window.onload = function() {
  try {
    var url_string = (window.location.href).toLowerCase();
    var url = new URL(url_string);
    var page = url.searchParams.get("page");
    document.write(page);
  }
}

当我希望它输出“测试”（https://example.com/index.html?page=test）时，它工作正常。但是当我将整个 HTML 代码放在 url 变量中时，它不会输出任何内容。

注意：我还是 HTML 和 JS 的新手。

【问题讨论】：

问号后面的URL部分称为查询字符串。尝试搜索“查询字符串中的 html”以获得帮助。 Example.
@wazz 他们正在使用查询字符串
呃，我知道。什么？
在页面之间传递 HTML 是不好的做法。传递您要写入的数据，然后让接收页面解析查询参数并呈现它们
顺便说一句，我也知道。把它留给 OP 来解决。

标签： javascript html url-parameters

【解决方案1】：

document.write 擦除页面、脚本和所有内容。那是Why is document.write considered a "bad practice"?
如果您必须在页面之间传递数据，请仅传递数据并更新新页面上的现有代码。所以例如有
```
<p id="test"></p> 
```

在页面上，?pageContent=somecontent 在 URL 中

那你就可以了

var pageContent = url.searchParams.get("pageContent"); 
document.getElementById("test").textContent=pageContent;

而不是?page=<p id="test">somecontent</p>

另一种方法是使用 AJAX 调用服务器以获取更多内容，并使用该内容动态更新页面。

【讨论】：