javascript: URL

警告：不建議在 Web 上使用javascript: URL，因為它可能導致執行任意程式碼，類似於使用eval()帶來的後果。它也可能降低可訪問性，因為它偏離了正常的連結行為。

JavaScript URL，以javascript:方案為字首的 URL，用作偽導航目標，在瀏覽器嘗試導航時執行 JavaScript。如果 URL 計算結果為字串，則將其視為 HTML 並由瀏覽器呈現。

語法

JavaScript URL 以javascript:方案開頭，後跟 JavaScript 程式碼。該程式碼將被解析為指令碼。

url
javascript:<script>

描述

javascript: URL 可用於任何 URL 作為導航目標的地方。這包括但不限於

  • <a>或<area>元素的href屬性。
  • <form>元素的action屬性。
  • <iframe>元素的src屬性。
  • window.location JavaScript 屬性。
  • 瀏覽器位址列本身。

注意：某些其他使用 URL 的上下文（例如<link>元素的href屬性）不允許javascript: URL，因為它們是資源位置，而不是導航目標。對於這些情況，如果要內聯編寫 JavaScript，請使用data: URL，並使用text/javascript MIME 型別。

當瀏覽器嘗試導航到此類位置時，它會解析並執行指令碼主體。指令碼可能具有完成值（不是返回值），如果使用eval()執行指令碼，則此值與該值相同。如果最後一個語句是表示式，則完成值為該表示式的值。如果此完成值為字串，則該字串將被視為 HTML 文件，瀏覽器將使用與當前頁面相同的 URL 導航到具有該內容的新文件。不會建立歷史記錄條目。如果完成值不是字串，則瀏覽器僅執行程式碼而不導航。因此，通常建議如果指令碼以函式呼叫（如javascript:foo()）結尾，則應在其前面加上void，以防止在函式碰巧返回字串時意外導航。

javascript:導航可能會被內容安全策略設定（尤其是script-src）阻止。

示例

使用javascript: URL 作為 href 目標

在此示例中，<a>元素的href屬性設定為javascript: URL，單擊時會顯示一條訊息

html
<a href="javascript:alert('Hello, world!')">Click me</a>

因為alert()返回undefined，所以瀏覽器不會導航到新頁面。這是一種不好的做法，因為連結實際上不是超連結。考慮將其改為按鈕

html
<button id="btn">Click me</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("Hello, world!");
  });
</script>

在此示例中，<a>元素的href屬性設定為javascript: URL，該 URL 導航到一個包含“Hello, world！”內容的新頁面。

html
<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，提交時會顯示一條訊息

html
<form action="javascript:alert(myInput.value)">
  <input id="myInput" />
  <input type="submit" value="Submit" />
</form>

不要這樣做，請考慮偵聽表單的submit事件並使用 JavaScript 處理它

html
<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！”內容的新頁面。

html
<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屬性

html
<iframe id="myFrame"></iframe>
<script>
  document.getElementById("myFrame").srcdoc = "Hello, world!";
</script>

使用javascript: URL 與 window.location

在此示例中，window.location屬性設定為javascript: URL，該 URL 導航到一個包含“Hello, world！”內容的新頁面。

js
window.location = "javascript:'Hello world!'";

不要這樣做，請考慮使用DOM API修改頁面內容。例如

js
document.body.textContent = "Hello, world!";

規範

規範
HTML 標準
# the-javascript:-url-special-case

另請參閱