如何在浏览器状态栏中显示文字？

Question

我们如何使用 JavaScript（或 jQuery）更改浏览器状态栏中显示的文本？

Answer 1

这是可以做到的。 Google 搜索正在执行此操作，当您将鼠标悬停在 Google 链接上时可以看到，状态栏显示底层站点：

然而，当您单击它时，它会将您带到一个依赖于用户代理的位置网址类似于 https://www.google. com.sg/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CC8QFjAAahUKEwi4lP-Z4_rIAhVLk5QKHXRLAe8&url=https%3A%2F%2Fwww.example.com% 2F&usg=AFQjCNFEbIRqDC65KFpmuak0aXKmnzjKVQ&bvm=bv.106923889,d.dGo。该网址在将您重定向到 https://www.example.com 之前会进行 Google 跟踪等操作。您可以使用 Network Inspector 和“保留日志”轻松测试这一点。

他们使用的是hacky hack，但它适用于所有浏览器。

诀窍是要认识到我们可以仅使用 HTLM 的 a href （不需要 CSS 或 JavaScript）将状态栏设置为几乎任何内容。我们所需要的只是欺骗浏览器的解析器，使其认为 href 值是有效的 url，然后它将显示它。

尝试运行这个片段：

<a href="http://.# this is p͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔͕͓͔̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐̑̓̐͜͜͜͜͜͜͜͜͜͜͜͜‌​̴̵̶͕͓͔͕͓͔͕͓͔͕͓͔̖͕͓̖̱̲̳̖̖̖̖̖̖̖͕̑̓̐̑̓̐̑̓̐̑̓̑̒̓̔̐̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̒̓̔̐̕̚͜͜͜͜͜‌​͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖͕͓͔̖̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̐̑̓̑̒̓̔̕̚̕̚̕̚̕̚̕̚̕̚͜͜͜͜͜‌​͕͓͔̖͕͓͔̖̐̑̓̑̒̓̔̐̑̓̓̓̓̓̓̓̑̒̓̔̕̚̕̚͜͜owerful because ━Σ(ﾟДﾟ|||)━ symbols !@)(*#&$^%</even htlm> or lorem ipsum in all scripts Лорем ипсум Lorem存有 ငါ့ရဲ့ဇာတ်မြင့် घरՏուն Дома ലോറെൻ  ഇപ്സം درமுகப்புЛорем ипсумలోלורם איפסוםరెం ఇప్సమ్ მთავარი હોમ לורם איפסוםלורם איפסום Forsíða Loremのイプサム ಮುಖಪುಟ ទំព័រដើម 가 lorem ipsum의 ຫນ້າທໍາອິດ Տուն আর্কাইভ">Hover this link (do not click) and observe the browser's status bar.</a>

Chrome 的输出（点击图片最大化）：(v46.0.2490.80 m)

FireFox 的输出：(v42.0)

IE 的输出：(v11.0.9600.17905 更新版本11.0.21 (KB3065822))

Opera 的输出：(v33.0.1990.58 stable)

Seamonkey 的输出：(v2.38)

Avant 的输出： （v Ultimate 2015 build 28）

• IE 11 引擎：

  

• IE 兼容引擎：

  

• Chrome 引擎：

  

• FireFox 引擎：

  

Torch 的输出：(v42.0.0.10546)

百度的输出：(v43.19.1000.119 )

Maxthon 的输出：(v4.4.8.1000)

---

另外，不必使用 # （片段标识符）。浏览器也会将像 http://some.message.here./and_more_message_here 这样的文本视为有效的 URL。根据浏览器的不同，更奇怪的字符串可能被认为是有效的：

1. （Chrome、FireFox、IE、SM、Torch、百度、Maxthon、Avant IE11、Avant IE Compat、Avant Chrome、Avant Firefox。）

   （对于具有预期输出的浏览器，会列出名称；对于没有状态栏输出的浏览器，名称会带有删除线（“example”）；对于具有意外输出的浏览器，名称会带有下划线（“e̲x̲a̲m̲p̲l̲e̲”） /行为。使用与上面列出的浏览器版本相同的版本进行测试。）

2. (Chrome、FireFox、I̲E̲、SM、火炬、B̲a̲i̲d̲u̲、M̲a̲x̲t̲h̲o̲n̲、A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲、A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m ̲p̲a̲t̲、Avant Chrome、Avant Firefox。）

3. < a href="http://测试域部分/a_b_c_d_e中的一些.空格">

   (C̲h̲r̲o̲m̲e̲、FireFox、I̲E̲、SM、T̲o̲r̲c̲h̲、B̲a̲i̲d̲u̲、M̲a̲x̲t̲h̲o̲n̲、A̲v̲a̲n̲t̲I̲E ̲1̲1̲、A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲、A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲、Avant Firefox)

4. (C̲h̲r̲o̲m̲e̲、FireFox、I̲E̲、SM、T̲o̲r̲c̲h̲、B̲a̲i̲d̲u̲、M̲a̲x̲t̲h̲o̲n̲、A̲v̲a̲n̲t̲I̲E ̲1̲1̲、A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲、A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲、Avant Firefox)

5. （Chrome、FireFox、IE、SM、Torch、百度、Maxthon、Avant IE11、Avant IE Compat、Avant Chrome、Avant Firefox）

6. (Chrome、FireFox、IE、SM、火炬、< s>百度、傲游、Avant IE11、A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲、Avant Chrome、Avant Firefox )

8. < a href="http://test @ with space">

   (C̲h̲r̲o̲m̲e̲、FireFox、IE、SM、T̲o̲r̲c̲h̲、B̲a̲i̲d̲u̲、M̲a̲x̲t̲h̲o̲n̲、A̲v̲a̲n̲t̲ I̲E ̲ ̲1̲1̲、A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲、A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲、 Avant Firefox)

9. (C̲h̲r̲o̲m̲e̲、FireFox、IE、SM、T̲o̲r̲c̲h̲、B̲a̲i̲d̲u̲、M̲a̲x̲t̲h̲o̲n̲、A̲v̲a̲n̲t̲ I̲E ̲ ̲1̲1̲、A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲、A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲、 Avant Firefox)

10. (C̲h̲r̲o̲m̲e̲、FireFox、IE、SM、T̲o̲r̲c̲h̲、B̲a̲i̲d̲u̲、M̲a̲x̲t̲h̲o̲n̲、A̲v̲a̲n̲t̲ I̲E̲̲1̲1̲、A ̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲、A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲、Avant Firefox)

11. [电子邮件受保护]">

    (C̲h̲r̲o̲m̲e̲、FireFox、IE、SM、T̲o̲r̲c̲h̲、B̲a̲i̲d̲u̲、傲游、A̲v̲a̲n̲t̲ I̲E̲ ̲1̲1̲、A̲v̲a̲n̲t̲ I̲E ̲ ̲C̲o̲m̲p̲a̲t̲、A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲、Avant Firefox)

12. 重复上面的所有测试字符串，将 http:// 替换为 https://、ftp://、about://， chrome://、file://、foobar:// 等

我们可以看到，如果浏览器没有考虑该字符串是一个有效的 url，它将通过不显示状态栏来优雅地失败，因此不会造成任何损害。 （除了看起来 Avant IE Compat 与测试字符串 "http://abc:port_with_letters_test" 存在一些错误。）

---

让浏览器状态栏显示我们想要的字符串只是第一步。第二步是当用户单击链接时阻止浏览器加载页面。

使用 return false 可以轻松完成此操作：

<a onclick="return false" href="http://some.message.here./and_more_message_here">this link will not load</a>

或者：

<a onclick="return f()" href="http://some.message.here./and_more_message_here">this link will not load</a>
<script>
  function f() {
    return false;
  }
</script>

以上两个代码片段经过测试，可在 Chrome、FireFox、IE、SM、Torch、百度、Maxthon、Avant IE11、Avant IE Compat、Avant Chrome、Avant Firefox 上运行。

---

最后一步是使用 window.location 或 window.open 模仿 a href 的行为。它可以内联完成：(在线测试)

<!doctype html>
<a onclick="location='http://example.org'; return false" href="https://some.message.here./and_more_message_here">same tab</a>
<br><a onclick="window.open('http://example.org'); return false" href="https://some.message.here./and_more_message_here">new tab</a>

或使用return func() ：（在线测试）

<!doctype html>
<a onclick="return f1()" href="http://some.message.here./and_more_message_here">same tab 2</a>
<br><a onclick="return f2()" href="http://some.message.here./and_more_message_here">new tab 2</a>
<script>
  function f1() {
    location = 'http://example.org';
    return false;
  }

  function f2() {
    open('http://example.org');
    return false;
  }
</script>

或内联setTimeout: (在线测试)

<!doctype html>
<a onclick="setTimeout(function(){location='http://example.org';},1); return false" href="https://some.message.here./and_more_message_here">same tab 3</a>
<br><a onclick="setTimeout(function(){window.open('http://example.org');},1); return false" href="http://some.message.here./and_more_message_here">new tab 3 (doesn't work on Avant IE11 and Avant IE Compat if this link is HTTP; works if it is HTTPS or FTP)</a> 

或者使用return func() with setTimeout: (在线测试)

<!doctype html>
<a onclick="return f1()" href="http://some.message.here./and_more_message_here">same tab 4</a>
<br><a onclick="return f2()" href="http://some.message.here./and_more_message_here">new tab 4 (doesn't work on Avant IE11 and Avant IE Compat if this link is HTTP; works if it is HTTPS or FTP)</a> <!-- hadn't tested this with sourcepage=HTTP. only tested with sourcepage=HTTPS and sourcepage=localwebpage -->
<script>
  function f1() {
    setTimeout(function() {
      location = 'http://example.org';
    }, 1);
    return false;
  }

  function f2() {
    setTimeout(function() {
      open('http://example.org');
    }, 1);
    return false;
  }
</script>

以上两个片段也是经测试可在 Chrome、FireFox、IE、SM、Torch、百度、Maxthon、Avant IE11（代码中注明警告）、Avant IE Compat（代码中注明警告）、Avant Chrome、Avant Firefox 上运行。

Answer 2

jQuery 不是执行此操作所必需的：

<script>
function writetostatus(input){
    window.status=input
    return true
}
</script>

但是，大多数较新的浏览器会阻止您通过 JavaScript 设置状态栏中的文本。

Answer 3

对于可能感兴趣的人，请注意特定于 IE 的简单注释：

直到 IE6 并包含它，您可以这样做：

window.status = "Hello, I'm a custom status bar note.";

但在 IE6 之后（测试过 IE7/8） 您以相同的方式执行此操作，但是您还需要通过打开该功能来调整浏览器安全选项：工具 - Internet 选项 - 安全 - 自定义级别：

Answer 4

首先，它的外观在各个浏览器中并不统一，其次，该功能 已被禁用很长一段时间 。

无论如何，执行此操作的 javascript 是一个简单的 window.status = "my text"

Answer 5

10 年老问题的答案。如果想法是隐藏链接指向的位置。
我用这个功能

<script>
    function go2(hell){ window.location=hell; }
</script>

and the links will be like this :
<a href="#" onclick="go2('www.somewhere.net/page.html')">my link</a>

Answer 6

使用

window.status =“无论你想要什么”