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 |