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

Posted 2023-02-22

【中文标题】如何根据 url 参数加载 html 代码？

【英文标题】：How can I load html code based on url parameters?

【发布时间】：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 来解决。

【参考方案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 调用服务器以获取更多内容，并使用该内容动态更新页面。