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

Question

嗨，

我正在尝试加载HTML代码，并根据URL参数在我的网站上显示它。我希望它能这样工作。我的快捷方式(Siri快捷方式)会将用户重定向到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);
}
}

当我希望它输出"test"(https://example.com/index.html?page=test)时，它工作得很好。但是，当我把整个HTML代码放在url变量中时，它不会输出任何内容。

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

Answer 1

1. document.write擦除页面、脚本和所有内容。这就是为什么document.write被认为是"；不良做法"？

2. 如果必须在页面之间传递数据，请仅传递数据并更新新页面上的现有代码。例如

   <p id="test"></p> 
   

页面上的

和URL 中的?pageContent=somecontent

然后你可以做

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

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

另一种选择是使用AJAX调用服务器获取更多内容，并使用这些内容动态更新页面。