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

Question

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

Answer 1

这可以做到.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.在重定向到您之前,该网址会跟踪Google https://www.example.com.您可以使用"网络检查器"使用" 保留日志 " 轻松地对此进行测试.

他们使用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米)

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兼容引擎:

  

• Chrome引擎:

  

• FireFox引擎:

  

火炬的输出:(v42.0.0.10546)

百度输出:(v43.19.1000.119)

Maxthon的输出:(v4.4.8.1000)

此外,没有必要使用#(片段标识符).浏览器也会将文本 http://some.message.here./and_more_message_here视为有效的URL.根据浏览器的不同,Weirder字符串可能被视为有效:

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

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

   (对于具有预期输出的浏览器,列出名称,对于没有状态栏输出的浏览器,名称被标记(" 示例 "),对于具有意外输出/行为的浏览器,名称加下划线("示例").使用与浏览器版本相同的浏览器测试上面列出的那些.)

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

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

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

   (Chrome,FireFox,IE,SM,Torch,百度,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,Torch,百度,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,Avant IE Compat,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,Torch,百度,Maxthon,Avant IE 11,Avant IE Compat,Avant Chrome,Avant Firefox)

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

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

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

    (Chrome,FireFox,IE,SM,Torch,百度,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,Torch,百度,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 Firefox浏览器.

Answer 2

jQuery没有必要这样做:

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

但是,大多数较新的浏览器会阻止您在JavaScript中设置状态栏中的文本.