Làm cách nào để thay đổi url hiện tại trong javascript?

Tôi sẽ tham khảo thư viện webflow-utils có một số ví dụ về loại mã mà bạn sẽ cần để thực hiện các tác vụ này

Cách tiếp cận bạn thực hiện sẽ phụ thuộc rất nhiều vào số lượng liên kết bạn cần sửa đổi, mức độ dễ dàng xác định chúng trong trang của bạn, liệu chúng có thể có các phần khóa/giá trị chuỗi truy vấn khác hay không, v.v.

Tuy nhiên, có ba bước cơ bản cho những gì bạn muốn làm;

1. Xác định liên kết nào bạn muốn sửa đổi, có thể bằng ID hoặc lớp hoặc thuộc tính tùy chỉnh. Có lẽ ngay cả một cái gì đó độc đáo trong chính URL href. Làm cho các liên kết của bạn có thể nhận dạng được theo một cách nào đó để tập lệnh của bạn biết những liên kết nào cần sửa đổi và những liên kết nào không bị ảnh hưởng

2. Trong một sự kiện jQuery khi tải trang, bạn sẽ chọn các phần tử mong muốn của mình. Trước /cơ thể…

$(function () {
// your code here
});

1. Đối với mỗi yếu tố bạn khớp, hãy thay đổi

   
   /*
    * webflow-url
    * 
    * Sygnal Technology Group
    * http://sygnal.com
    * 
    * Url Utilities
    */
   
   // Process elements with the custom attr wfu-query-param
   export var processElements = function () {
   
       const urlParams = new URLSearchParams(window.location.search);
   
       // Skip if there is no querystring
       if (Array.from(urlParams).length == 0)
           return;
   
       // Loop all processable elements
   

   0 theo ý muốn

Bạn có thể tìm thấy một số mã ví dụ cho cả việc lựa chọn phần tử và các bước sửa đổi

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

công việc tốt đẹp. Tôi đã bẻ bút của bạn và tạo một số bản sửa đổi, hãy thử cái này;

Tôi đang sử dụng tài khoản chuyên nghiệp Codepen, vì vậy để thử nghiệm, bạn có thể nhận xét tập lệnh của mình, sau đó dán đoạn mã này vào mã trang của bạn trước ngày

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

<script src="https://codepen.io/memetican/pen/BargWvZ/eecc8cfd1f2a5d371ad9d5210660f3e4.js"></script>

Thay đổi chính;

• Tôi đang sử dụng jQuery, nó giống như một cú pháp gọn gàng hơn và Webflow đã bao gồm thư viện jQuery
• Đã thay thế trình xử lý sự kiện bằng cú pháp được tải trên DOM của jQuery, hy vọng điều đó sẽ giải quyết xung đột của bạn
• Hạn chế lựa chọn các yếu tố

  
  /*
   * webflow-url
   * 
   * Sygnal Technology Group
   * http://sygnal.com
   * 
   * Url Utilities
   */
  
  // Process elements with the custom attr wfu-query-param
  export var processElements = function () {
  
      const urlParams = new URLSearchParams(window.location.search);
  
      // Skip if there is no querystring
      if (Array.from(urlParams).length == 0)
          return;
  
      // Loop all processable elements
  

  3 đối với những yếu tố có

  
  /*
   * webflow-url
   * 
   * Sygnal Technology Group
   * http://sygnal.com
   * 
   * Url Utilities
   */
  
  // Process elements with the custom attr wfu-query-param
  export var processElements = function () {
  
      const urlParams = new URLSearchParams(window.location.search);
  
      // Skip if there is no querystring
      if (Array.from(urlParams).length == 0)
          return;
  
      // Loop all processable elements
  

  0 chứa văn bản

  
  /*
   * webflow-url
   * 
   * Sygnal Technology Group
   * http://sygnal.com
   * 
   * Url Utilities
   */
  
  // Process elements with the custom attr wfu-query-param
  export var processElements = function () {
  
      const urlParams = new URLSearchParams(window.location.search);
  
      // Skip if there is no querystring
      if (Array.from(urlParams).length == 0)
          return;
  
      // Loop all processable elements
  

  0. Điều này chỉ tập trung vào các yếu tố có khả năng nhất cần chuyển đổi
• Gần như mọi thứ còn lại như cũ, làm tốt lắm
• Đã thêm hỗ trợ để loại bỏ giao thức của bạn. Vì chúng tôi biết bất kỳ URL hợp pháp nào được mã hóa chính xác sẽ có một và chỉ một

  
  /*
   * webflow-url
   * 
   * Sygnal Technology Group
   * http://sygnal.com
   * 
   * Url Utilities
   */
  
  // Process elements with the custom attr wfu-query-param
  export var processElements = function () {
  
      const urlParams = new URLSearchParams(window.location.search);
  
      // Skip if there is no querystring
      if (Array.from(urlParams).length == 0)
          return;
  
      // Loop all processable elements
  

  1, chúng tôi chỉ có thể tách phần đó và lấy nửa sau

Lưu ý rằng việc sử dụng đối tượng URL sẽ mã hóa chính xác chuỗi URL của bạn, do đó, trong ví dụ mong muốn của bạn về;

https://app.example.com/?redirect=www.example.com/about/dog

Bạn thực sự sẽ hiểu đúng hơn;

https://app.example.com/?redirect=www.example.com%2Fabout%2Fdog

Ngoài ra, trong thiết kế hiện tại của bạn, nếu URL trang hiện tại của bạn có một chuỗi truy vấn, nó cũng sẽ được bao gồm trong

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

Các chuỗi truy vấn không phổ biến trong các trang Webflow, tuy nhiên, bạn có thể thấy chúng nếu e. g. bạn có một Quảng cáo Google trỏ đến trang của bạn và Google sẽ thêm một

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

Và một điểm phụ hoàn toàn thú vị. Nếu bạn chạy tập lệnh của mình trên một trang bên trong IFRAME, thì

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

/*
 * webflow-url
 * 
 * Sygnal Technology Group
 * http://sygnal.com
 * 
 * Url Utilities
 */

// Process elements with the custom attr wfu-query-param
export var processElements = function () {

    const urlParams = new URLSearchParams(window.location.search);

    // Skip if there is no querystring
    if (Array.from(urlParams).length == 0)
        return;

    // Loop all processable elements

Chúng tôi có thể thay đổi URL bằng JavaScript không?

Làm cách nào để thay đổi URL của tôi mà không cần tải lại trang?

Làm cách nào chúng tôi có thể lấy URL của trang hiện tại bằng JavaScript?