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

另请参阅