如何在html中使用url参数？ [复制]答案

【问题标题】：how to use url parameters in html? [duplicate]如何在html中使用url参数？ [复制]
【发布时间】：2018-09-08 14:58:40
【问题描述】：

我使用 Javascript 获取 URL 参数，但我不能在我的 html 中使用这些变量。 JS代码是这样的：

<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
console.log(c);
</script>

我的 URL 是 localhost:8000/something?name=ABC.here 我可以获取 name 的值并在浏览器控制台中显示它但是当我尝试在我的 HTML 中设置输入标记的值时它不会这样做并引发一些错误。我的 JS 和 html 是这样的：

<script>
    var url_string = window.location.href; //window.location.href
    var url = new URL(url_string);
    var c = url.searchParams.get("name");
    document.getElementById("user").value =url.searchParams.get("name");
    </script>
<input id="user" value"">

这应该改变了输入标签的值，但没有。

【问题讨论】：

'它不这样做并引发一些错误' - 请提供错误消息。
html 是一种标记语言，无法访问 url 参数、研究 php 和 $_GET - probs 可以用 JS 做一些事情，但不是我的专业领域

标签： javascript html url web

【解决方案1】：

如果在加载 DOM 内容之前调用您的#user 输入，

document.getElementById("user").value

javascript 找不到它，所以他尝试设置未定义元素的“值”

试试这个：

<input id="user" value="">    
<script>
    var url_string = window.location.href; //window.location.href
    var url = new URL(url_string);
    var c = url.searchParams.get("name");
    document.getElementById("user").value = c;
</script>

【讨论】：

成功了 :))，谢谢
@Parsa 标记为正确 ^^ :)

【解决方案2】：

如果您只有一个 URL 参数，这将起作用。只需确保首先定义您的输入元素即可。

工作副本JsFiddle static input

HTML

<input id="user" value="">

var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);  
document.getElementById("user").value = name;

如果需要在获取URL参数后定义输入元素：

工作副本JsFiddle dynamic input

HTML

<div id="myDiv"> </div>

var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);  

var parent = document.getElementById("myDiv");
var input = document.createElement("input");
input.value = name;
parent.appendChild(input)

【讨论】：