Làm cách nào để buộc trang tải lại nếu tất cả những gì đã được thay đổi trong url là băm?

Question

Tôi đang cố gắng tải lại trang hiện tại với hàm băm url khác nhau, nhưng nó không hoạt động như mong đợi.

(Làm rõ làm thế nào tôi muốn nó hoạt động:. Hãy tải lại trang và sau đó di chuyển đến băm mới)

Approach # 1:

window.location.hash = "#" + newhash; 

Chỉ cuộn để neo này mà không cần tải lại trang.

Cách tiếp cận # 2:

window.location.hash = "#" + newhash; 
window.location.reload(true); 

Kinda hoạt động nhưng nó cuộn đầu tiên neo, sau đó tải lại trang, sau đó cuộn để neo lại.

Approach # 3:

window.location.href = window.location.pathname + window.location.search + "&random=" + Math.round(Math.random()*100000) + "#" + newhash; 

trình nhưng tôi không muốn thêm rác ngẫu nhiên để url.

Có giải pháp nào tốt hơn không?

Answer 1

Xóa neo bạn sẽ điều hướng đến, sau đó sử dụng phương pháp # 2? Vì không có neo, việc cài đặt băm sẽ không cuộn trang.

Answer 2

Sẽ được mong đợi rằng #foo sẽ cuộn đến vị trí neo của id, "foo". Nếu bạn muốn sử dụng phương pháp # 1 và tải lại, phương pháp này có thể hoạt động.

if (Object.defineProperty && Object.getOwnPropertyDescriptor) { // ES5 
    var hashDescriptor = Object.getOwnPropertyDescriptor(location, "hash"), 
    hashSetter = hashDescriptor.set; 
    hashDescriptor.set = function (hash) { 
     hashSetter.call(location, hash); 
     location.reload(true); 
    }; 
    Object.defineProperty(location, "hash", hashDescriptor); 
} else if (location.__lookupSetter__ && location.__defineSetter__) { // JS 
    var hashSetter = location.__lookupSetter__("hash"); 
    location.__defineSetter__("hash", function (hash) { 
     hashSetter.call(location, hash); 
     location.reload(true) 
    }); 
} 

Answer 3

Tôi đã có một chức năng JQuery rằng bắn vào $(document).ready() mà phát hiện nếu có một băm nối vào URL trong trường hợp của tôi, vì vậy tôi giữ mà chức năng giống nhau và sau đó chỉ cần sử dụng một tải lại lực bất cứ khi nào có sự thay đổi băm là phát hiện:

$(window).on('hashchange',function(){ 
    window.location.reload(true); 
}); 

Sau đó, chức năng khác của tôi -

$(document).ready(function() { 
    var hash = window.location.hash;  
    if(hash) { 
      //DO STUFF I WANT TO DO WITH HASHES 
    } 
}); 

Trong trường hợp của tôi, đó là tốt cho UX - có thể không tốt cho người khác.

Answer 4

lựa chọn khác là để loại bỏ các hash và lưu nó trong lưu trữ phiên để được lấy ra trên tải lại:

var newUrl = location.href + '#myHash'; 
var splitUrl = newUrl.split('#'); 
newUrl = splitUrl[0]; 
if (splitUrl[1]){ 
    sessionStorage.savedHash = splitUrl[1]; 
} 
location.href = newUrl; 

và sau đó trên đầu trang của bạn, bạn có thể có đoạn mã sau:

var savedHash = sessionStorage.savedHash; 
if (savedHash){ 
    delete sessionStorage.savedHash; 
    location.hash = savedHash; 
}