• [轉]javascript 的 location 各種用法


    FROM : http://tech.pixnet.us/blog/post/31376360

    javascript 的 location 有兩種跳頁的方法。
    location.assign(url);
    location.replace(url);

    其中 location.assign(url); 跟 location = url; 或是 location.href = url; 功用是一樣的。

    那麼 assign 和 replace 有什麼差別呢?

    我在 pagea.html 跑了 assign('pageb.html'); 的話,在 pageb 按 browser 的上一頁,會回到 pagea.html,在 pagea.html 按下一頁會回到 pageb.html
    但是如果我跑的是 replace('pageb.html'); 的話,上一頁會回到 pagea.html 的上一頁。下一頁的話會跑到 pageb.html 。也就是 pagea.html 被取代掉了無法用上一頁下一頁回到他那邊。

    而如果要作重新整理的話
    有 location.reload() 可以使用
    不建議使用 location = location; ,在網址包含 # 的時候這樣重新整理會失效。

    location.reload() 裡面也可以傳入 true or false 的參數(預數為 false)
    如果選擇了 location.reload(true); 的話,會加上 Cache-Control no-cache 的 header ,也就是強制去 GET 一次,否則的話就會依照之前的 Cache-Control 去 GET。
    有點相當於 F5 和 Ctrl+F5 的差別。

    另外值得注意的是 location.hash 的部分。
    當現在的網址是 http://ronny.tw/#abc 的時候, location.hash 可以取得 #abc (最左邊一定是 # 開頭)
    如果跑了 location.hash='def'; ,網址會變成 http://ronny.tw/#def

    在 http://ronny.tw/#abc 的情況下,以下動作都不會重新整理頁面。
    location = 'http://ronny.tw/#def';
    location = '#def';
    location.hash = 'def'
    location.hash = '#def'
    location = '/#def';
    location = location; // 所以有些人用 location = location 來作 reload 動作,在包含 # 的時候會失效
    location.assign('#def');
    location.replace('#def');

    要注意的是,在 http://ronny.tw/#abc 的情況下
    location = 'http://ronny.tw/'; 是會重新整理的。
    所以在網址已經包含 # 的情況下,是無法作到在不重新整理頁面的情況下把 # 拿掉的。
    另外 location.href 是包含 '#' 的網址

    location object 內並沒有不包含 # 的完整網址的 property 可以用
    所以要取得不包含 # 的完整網址的話,有以下方法
    location.href.split('#', 2)[0]
    location.protocol + '//' + location.host + location.pathname + location.search

    不過如果要跳到沒有 # 的頁面去的話,只需要用 location = location.pathname + location.search 就夠了。

    再來一個要注意的
    在萬惡的 IE 中
    如果你的網址中包含 # 的話
    location.reload() 並不會跳到 # 的位置,而是會跳到最上頭。
    所以如果你會 care 這點的話,必需要在 reload() 之後再補上一次 location = location; 才會跳到 # 的位置。

    另外,在修改或加上 # 的東西的話,會觸發 hashchange 事件
    因此可以用 jQuery(window).bind('hashchange', function(){ // ... }); 去補捉 hash change 事件
    (IE 是到 IE8 才支援的,IE7 之前是抓不到的

    參考資料:

    http://www.dreamdu.com/javascript/window.location/

  • 相关阅读:
    使用MingGW-w64 Build Script 3.6.7搭建ffmpeg编译环境
    ffmpeg精简编译
    CListCtrl死锁的问题
    VC程序禁用提示框
    rtmp协议分析
    [置顶] zabbix发送告警
    [置顶] 个人微信号发送zabbix告警信息
    [置顶] 一个简单好用的zabbix告警信息发送工具
    [置顶] zabbix告警信息-lykchat信息发送系统
    模拟登陆web微信的流程和参数细节
  • 原文地址:https://www.cnblogs.com/Athrun/p/2269254.html
Copyright © 2020-2023  润新知