31

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

4

6 回答 6

33

这是可以做到的。谷歌搜索正在这样做，当您将鼠标悬停在谷歌链接上时可以看到，状态栏显示底层站点：

在此处输入图像描述

然而，当您单击它时，它会将您带到一个位置和用户代理相关的 url，看起来像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. 您可以使用带有“保留日志”的 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 稳定版）

在此处输入图像描述

Seamonkey 的输出：(v2.38)

在此处输入图像描述

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

  • IE 11 引擎：

    在此处输入图像描述

  • IE兼容引擎：

    在此处输入图像描述

  • 铬引擎：

    在此处输入图像描述

  • 火狐引擎：

    在此处输入图像描述

火炬的输出：（v42.0.0.10546）

在此处输入图像描述

百度的输出：(v43.19.1000.119)

在此处输入图像描述

Maxthon的输出：（v4.4.8.1000）

在此处输入图像描述

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

  1. <a href="http://a.b.c.d/test_symbols_!#$%^&*()[]{};:'&quot;.><,//=+``~">

    （Chrome、FireFox、IE、SM、Torch、百度、傲游、Avant IE11、Avant IE Compat、Avant Chrome、Avant Firefox。）

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

  2. <a href="http://a.b.c.d/test some spaces">

    (Chrome, FireFox, I̲E̲, SM, Torch, 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̲ Avant̲C̲o̲m̲t,̲a)

  3. <a href="http://test some . spaces in domain part/a_b_c_d_e">

    （Chrome，Firefox，IE，SM，火炬，百度，Maxthon，Avant IE 11，Avant IE Compat，Avant Chrome，Avant Firefox）

  4. <a href="http://test some . spaces in domain part without slash">

    （Chrome，Firefox，IE，SM，火炬，百度，Maxthon，Avant IE 11，Avant IE Compat，Avant Chrome，Avant Firefox）

  5. <a href="http://test_without_slash_and_dots">

    (Chrome, FireFox, IE, SM, Torch, 百度, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)

  6. <a href="http://a.b.c:port_with_letters_test">

    ( Chrome , FireFox , IE , SM , Torch ,百度, Maxthon , Avant IE11 , A̲v̲a̲n̲t̲ I̲E̲ ̲C̲o̲m̲p̲a̲t̲, Avant Chrome , Avant Firefox )

  7. <a href="http://http://double.http.test">

    (Chrome, FireFox, IE, SM, Torch, 百度, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)

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

    （Chrome，Firefox，IE，SM，火炬，百度，Maxthon，Avant IE 11，Avant IE Compat，Avant Chrome，Avant Firefox）

  9. <a href="http://test:password@ with spaces/">

    （Chrome，Firefox，IE，SM，火炬，百度，Maxthon，Avant IE 11，Avant IE Compat，Avant Chrome，Avant Firefox）

  10. <a href="http:// test : password @with.spaces/">

    （Chrome，Firefox，IE，SM，火炬，百度，Maxthon，Avant IE 11，Avant IE Compat，Avant Chrome，Avant Firefox）

  11. <a href="http://test@double@a.b.c.d">

    （Chrome，Firefox，IE，SM，火炬，百度，Maxthon，Avant IE 11，Avant IE Compat，Avant Chrome，Avant Firefox）

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

我们可以看到，如果浏览器不认为该字符串是一个有效的 url，它将通过不显示状态栏来优雅地失败，因此不会造成任何伤害。（除了看起来 Avant IE Compat 的测试字符串出现了一些错误"http://a.b.c: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()与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火狐。

于 2015-11-06T07:45:44.667 回答
19

jQuery 不需要这样做：

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

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

于 2009-09-18T14:10:06.013 回答
3

它可能与特定于 IE的简单注释有关：

直到 IE6 和包括它你可以这样做：

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

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

替代文字

于 2010-12-01T16:26:54.357 回答
1

首先，它的外观在整个浏览器中并不统一，其次，出于安全原因，大多数浏览器默认禁用该功能很长时间。

无论如何，这样做的javascript很简单window.status = "my text"

于 2009-09-18T14:11:08.947 回答
0

一个 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>
于 2020-08-22T10:16:22.437 回答
-1

采用

window.status = "whatever you want"

于 2009-09-18T14:10:05.077 回答