Xóa đoạn trong URL có JavaScript w/out khiến tải lại trang

Question

Nền: Tôi có một trang HTML cho phép bạn mở rộng một số nội dung nhất định. Vì chỉ một phần nhỏ của trang cần được tải để mở rộng như vậy, nó được thực hiện thông qua JavaScript và không phải bằng cách chuyển hướng đến trang URL/HTML mới. Tuy nhiên, như một phần thưởng cho người sử dụng có thể kết tới các phần mở rộng như vậy, ví dụ: gửi người khác một URL như

http://example.com/#foobar

và có "foobar" loại được mở ra ngay lập tức cho người dùng khác. Điều này làm việc bằng cách sử dụng parent.location.hash = 'foobar', do đó, một phần là tốt.

Bây giờ câu hỏi: Khi người dùng đóng như một thể loại trên trang web, tôi muốn để trống phân đoạn URL một lần nữa, ví dụ: biến http://example.com/#foobar vào http://example.com/ để cập nhật màn hình hiển thị permalink. Tuy nhiên, làm như vậy bằng cách sử dụng parent.location.hash = '' làm cho tải lại toàn bộ trang (trong Firefox 3 chẳng hạn), mà tôi muốn tránh. Sử dụng window.location.href = '/#' sẽ không kích hoạt tải lại trang nhưng để lại dấu "#" có phần hơi không rõ ràng trong URL. Vậy có cách nào trong các trình duyệt phổ biến để JavaScript loại bỏ một neo URL bao gồm dấu "#" mà không kích hoạt làm mới trang không?

Answer 1

Như những người khác đã đề cập, replaceState trong HTML5 có thể được sử dụng để xóa đoạn URL.

Dưới đây là một ví dụ:

// remove fragment as much as it can go without adding an entry in browser history: 
window.location.replace("#"); 

// slice off the remaining '#' in HTML5:  
if (typeof window.history.replaceState == 'function') { 
    history.replaceState({}, '', window.location.href.slice(0, -1)); 
} 

Answer 2

Xin lỗi vì đã nói, nhưng câu trả lời là không nếu đổ location.hash không hoàn thành nhiệm vụ -!)

Answer 3

Vì bạn đang kiểm soát các hành động trên giá trị băm, tại sao không chỉ cần sử dụng một mã thông báo rằng phương tiện "không có gì", như "#_" hoặc "#default".

Answer 4

$(document).ready(function() { 
     $(".lnk").click(function(e) { 
      e.preventDefault(); 
      $(this).attr("href", "stripped_url_via_desired_regex"); 
     }); 
    }); 

Answer 5

Vì vậy, sử dụng

parent.location.hash = '' đầu tiên

sau đó làm

window.location.href=window.location.href.slice(0, -1); 

Answer 6

Ngoài ra còn có một lựa chọn khác thay vì sử dụng băm, bạn có thể sử dụng javascript: void(0); Ví dụ: <a href="javascript:void(0);" class="open_div">Open Div</a>

Tôi đoán nó cũng phụ thuộc vào khi bạn cần mà loại liên kết, vì vậy bạn kiểm tra tốt hơn các liên kết sau đây:

Làm thế nào để sử dụng nó: http://www.brightcherry.co.uk/scribbles/2010/04/25/javascript-how-to-remove-the-trailing-hash-in-a-url/ hoặc kiểm tra cuộc tranh luận về những gì là tốt hơn ở đây: Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Answer 7

Như những người khác đã nói, bạn không thể làm điều đó. Plus ... nghiêm túc, như tác giả jQuery Ajaxy - Tôi đã triển khai các trang web ajax hoàn chỉnh trong nhiều năm nay - và tôi có thể đảm bảo không có người dùng cuối nào từng phàn nàn hoặc thậm chí có thể nhận thấy rằng có điều băm này xảy ra, người dùng không chăm sóc miễn là nó hoạt động và họ nhận được những gì họ đến.

Một giải pháp thích hợp mặc dù là HTML5 pushState/replaceState/popstate ;-) Mà không cần fragement-identifier nữa: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history Đối với một dự án HTML5 và HTML4 tương thích có hỗ trợ này HTML5 Nhà nước Chức năng kiểm tra https://github.com/browserstate/History.js: -)

Answer 8

Bạn có thể sử dụng các phương pháp HTML5 window.history.pushState và replaceState mới sáng bóng, như được mô tả trong ASCIIcasts 246: AJAX History State và on the GitHub blog. Điều này cho phép bạn thay đổi toàn bộ đường dẫn (trong cùng một máy chủ gốc) không chỉ là đoạn.Để thử tính năng này, browse around a GitHub repository bằng trình duyệt gần đây.

Answer 9

Đặt mã này vào phần đầu.

<script type="text/javascript"> 
    var uri = window.location.toString(); 
    if (uri.indexOf("?") > 0) { 
     var clean_uri = uri.substring(0, uri.indexOf("?")); 
     window.history.replaceState({}, document.title, clean_uri); 
    } 
</script>