javascript: URL
JavaScript URL，即以 javascript: scheme 作为前缀的 URL，被用作假的导航目标，当浏览器尝试导航时会执行 JavaScript。如果 URL 计算结果为字符串，它将被视为 HTML 并由浏览器渲染。
语法
javascript:<script>
javascript-
URL 的 scheme。
<script>-
要执行的 JavaScript 代码。代码将被解析为脚本。
描述
javascript: URL 可以在任何 URL 是导航目标的地方使用。这包括但不限于：
<a>或<area>元素的href属性。<form>元素的action属性。<iframe>元素的src属性。window.locationJavaScript 属性。- 浏览器地址栏本身。
注意： 其他一些使用 URL 的上下文，例如 <link> 元素的 href 属性，不允许使用 javascript: URL，因为它们是资源位置，而不是导航目标。对于这些情况，如果您想嵌入 JavaScript，请使用带有 text/javascript MIME 类型的 data: URL。
当浏览器尝试导航到这样的位置时，它会解析并执行脚本体。脚本可能有一个完成值（而不是返回值），它与使用 eval() 执行脚本时的值相同。如果最后一个语句是表达式，则完成值是该表达式的值。如果此完成值为字符串，则该字符串被视为 HTML 文档，并且浏览器导航到一个具有该内容的新文档，使用与当前页面相同的 URL。不会创建历史记录条目。如果完成值不是字符串，浏览器仅执行代码而不导航。因此，通常建议如果脚本以像 javascript:foo() 这样的函数调用结束，您应该在其前面加上 void，以防止函数恰好返回字符串时意外导航。
javascript: 导航可能会被 内容安全策略 设置阻止，特别是 script-src。
示例
将 javascript: URL 用作 href 目标
在此示例中，<a> 元素的 href 属性被设置为一个 javascript: URL，在单击时会弹出一个消息
<a href="javascript:alert('Hello, world!')">Click me</a>
由于 alert() 返回 undefined，浏览器不会导航到新页面。这是一个糟糕的实践，因为链接实际上不是一个超链接。考虑改用按钮。
<button id="btn">Click me</button>
<script>
document.getElementById("btn").addEventListener("click", () => {
alert("Hello, world!");
});
</script>
在此示例中，<a> 元素的 href 属性被设置为一个 javascript: URL，该 URL 导航到一个内容为“Hello, world!”的新页面。
<a href="javascript:pageContent">Click me</a>
<script>
// Use a var so it becomes a global variable and can be read elsewhere
var pageContent = "Hello, world!";
</script>
请注意，由于 javascript: URL 不会创建历史记录条目，因此在刷新之前无法返回上一页。
将 javascript: URL 用作表单操作
在此示例中，<form> 元素的 action 属性被设置为一个 javascript: URL，在提交时会弹出一个消息。
<form action="javascript:alert(myInput.value)">
<input id="myInput" />
<input type="submit" value="Submit" />
</form>
与其这样做，不如考虑监听表单的 submit 事件并用 JavaScript 处理它。
<form id="myForm">
<input id="myInput" />
<input type="submit" value="Submit" />
</form>
<script>
document.getElementById("myForm").addEventListener("submit", (event) => {
event.preventDefault();
alert(document.getElementById("myInput").value);
});
</script>
将 javascript: URL 用作 iframe 源
在此示例中，<iframe> 元素的 src 属性被设置为一个 javascript: URL，该 URL 导航到一个内容为“Hello, world!”的新页面。
<iframe src="javascript:pageContent"></iframe>
<script>
// Use a var so it becomes a global variable and can be read elsewhere
var pageContent = "Hello, world!";
</script>
与其这样做，不如考虑使用 srcdoc 属性。
<iframe id="myFrame"></iframe>
<script>
document.getElementById("myFrame").srcdoc = "Hello, world!";
</script>
将 javascript: URL 与 window.location 一起使用
在此示例中，window.location 属性被设置为一个 javascript: URL，该 URL 导航到一个内容为“Hello, world!”的新页面。
window.location = "javascript:'Hello world!'";
与其这样做，不如考虑使用 DOM API 来修改页面内容。例如：
document.body.textContent = "Hello, world!";
规范
| 规范 |
|---|
| HTML # the-javascript:-url-special-case |