我们如何使用JavaScript（或jQuery）更改在浏览器状态栏中显示的文本？
6个回答
34
这可以实现。Google搜索正在这样做，当您将鼠标悬停在Google链接上时，状态栏会显示底层网站：
然而当你点击它时，它会带你到一个依赖于位置和用户代理的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。该URL在重定向到https://www.example.com之前进行了Google跟踪等操作。你可以使用“保留日志”和网络检查器轻松测试此操作。
诀窍在于我们可以仅使用HTML的"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）
Opera的输出：（v33.0.1990.58稳定版）
Seamonkey的输出：（v2.38）
Avant的输出：(v Ultimate 2015 build 28)
IE 11引擎:
IE兼容引擎:
Chrome引擎:
FireFox引擎:
Torch的输出：(v42.0.0.10546)
Maxthon的输出：（v4.4.8.1000）
此外，使用
# （片段标识符）并非必要。浏览器也会将像 http://some.message.here./and_more_message_here 这样的文本视为有效的URL。根据浏览器不同，更奇怪的字符串也可能被视为有效。
<a href="http://a.b.c.d/test_symbols_!#$%^&*()[]{};:'".,//=+``~">(Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox.)
(列出了有预期输出的浏览器名称，对于没有状态栏输出的浏览器名称进行了删除线标记（“
example”），对于输出/行为不符合预期的浏览器名称进行了下划线标记（“e̲x̲a̲m̲p̲l̲e̲”）。使用与上述浏览器版本相同的浏览器版本进行测试。)<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̲ ̲C̲o̲m̲p̲a̲t̲, Avant Chrome, Avant Firefox.)
<a href="http://test some . spaces in domain part/a_b_c_d_e">(C̲h̲r̲o̲m̲e̲,
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̲, Avant IE Compat, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲,Avant Firefox)<a href="http://test some . spaces in domain part without slash">(C̲h̲r̲o̲m̲e̲,
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̲, Avant IE Compat, A̲v̲a̲n̲t̲ C̲h̲r̲o̲m̲e̲,Avant Firefox)<a href="http://test_without_slash_and_dots">(Chrome, FireFox, IE, SM, Torch, Baidu, Maxthon, Avant IE11, Avant IE Compat, Avant Chrome, Avant Firefox)
<a href="http://a.b.c:port_with_letters_test">(
Chrome,FireFox,IE,SM,Torch,Baidu,Maxthon,Avant IE11, Avant IE Compat,Avant Chrome,Avant Firefox)<a href="http://double.http.test">(Chrome, FireFox, IE
我们可以看到，如果浏览器不认为字符串是一个有效的url，它会通过不显示状态栏来优雅地失败，所以没有任何损害。(除了在测试字符串"http://a.b.c:port_with_letters_test"中，Avant IE Compat存在一些bug之外。)
让浏览器状态栏显示我们所需的字符串仅是第一步。第二步是在用户点击链接时停止浏览器加载页面。这可以很容易地通过使用“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、百度、傲游、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>
使用setTimeout和return func():(在线测试)<!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、Baidu、Maxthon、Avant IE11（有代码中说明的附带条件）、Avant IE Compat（有代码中说明的附带条件）、Avant Chrome和Avant Firefox上运行。
- Pacerier
1
然后，您可以聚焦锚点并持续显示更新的数据 https://jsfiddle.net/4rfsx0qL/ - Pierre
20
不必使用jQuery来做到这一点：
<script>
function writetostatus(input){
window.status=input
return true
}
</script>
然而，大多数更新的浏览器会防止您使用JavaScript设置状态栏中的文本。
- Chris Ballance
5
但默认情况下无法在Firefox中工作-https://developer.mozilla.org/En/DOM/Window.status - Russ Cam
15大多数更新的浏览器会阻止您通过 JavaScript 设置状态栏中的文本。 - Chris Ballance
1@Chris - 我打赌下一个问题可能是如何在不同的浏览器中实现这样的功能 :) - Russ Cam
@Russ Cam，不好意思，我想问一下为什么 Stack Overflow 放弃了对已接受答案区域的高亮显示？ - omg
我理解公共网站滥用了这个功能，但许多内部网络应用程序依赖于它，现在要么无法正常工作，要么需要帮助台人员亲自访问数千台桌面电脑来手动启用它。浏览器供应商应该默认为内部网络域/范围开启此功能。粗暴地移除它没有经过深思熟虑，这种傲慢让我感到愤怒：不要在没有公开听证会的情况下破坏标准！啊！ - FloverOwe
3
针对IE浏览器的简单提示：
在IE6及其之前版本中，您可以进行以下操作：
window.status = "Hello, I'm a custom status bar note.";
但在IE6之后（测试过IE7/8），您需要以同样的方式进行操作，但还需通过打开功能来调整浏览器安全选项：工具 - 互联网选项 - 安全性 - 自定义级别：
- Marco Demaio
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>
- Isma'el
-1
使用
window.status = "无论你想要的内容"
- Damian
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接