Рубрики

Как сделать обходной путь для window.location.href?

При наличии URL-адреса задача состоит в том, чтобы использовать текущий адрес страницы и выполнить операцию с использованием этого адреса .

Пример 1. Этот пример указывает на один и тот же URL-адрес и перенаправляет только на один и тот же адрес. URL = https://gitstr.herokuapp.com

<!DOCTYPE html>

<html lang="en">

  

<head>

    <title>Example 1:</title>

</head>

  

<body bgcolor="white" ;>

    <div class="loginbox">

        <img class="avatar">

        <h1>GitStar</h1>

        <br>

  

        <form id="todoInputForm">

            <div class="avatar"></div>

            <p>Username</p>

            <input type="text"

                   placeholder="Enter your Github Username" 

                   class="input-username"

                   id="login" />

          <input type="submit" 

                 id="searchbtn name=" 

                 value="Search" />

      <a href=

"https://help.github.com/en/articles/changing-your-github-username ">

        Forgot your Username

          </a>

       <br>

      <a href="https://github.com/join ">Don't have an account?</a>

     <br>

    </form>

  </div>

 <script>

    $(document).ready(function () {

      $('#todoInputForm').submit(function (e) {

        e.preventDefault()

        var input = $('#login').val()

        window.location.href = '/'

      })

    })

  </script>

</body>

</html>

Выход:

  • Перед нажатием на кнопку Поиск: Поиск
  • После нажатия на кнопку поиска :

    как вы можете видеть после нажатия кнопки поиска, URL-адрес не изменяется из-за строки 38: window.location.href = '/' .

Пример 2: В этом примере мы хотели бы использовать свойство window.location.href
указать на какой-то другой адрес, так что давайте посмотрим, как это работает.

<!DOCTYPE html>

<html lang="en">

  

<head>

    <title>Example 2:</title>

</head>

  

<body bgcolor="white" ;>

    <div class="loginbox">

        <img class="avatar">

        <h1>GitStar</h1>

        <br>

  

        <form id="todoInputForm">

            <div class="avatar"></div>

            <p>Username</p>

            <input type="text"

                   placeholder="Enter your Github Username"

                   class="input-username" 

                   id="login" />

          <input type="submit"

                 id="searchbtn name" 

                 value="Search" />

      <a href="https://help.github.com/en/articles/changing-your-github-username">

        Forgot your Username

          </a>

          <br>

      <a href="https://github.com/join ">Don't have an account?</a>

      <br>

    </form>

  </div>

 <script>

    $(document).ready(function () {

      $('#todoInputForm').submit(function (e) {

        e.preventDefault()

        var input = $('#login').val()

        window.location.href = '/' + input;

      })

    })

  </script>

Выход:

  • Перед нажатием на кнопку: Поиск
  • После нажатия на кнопку: Поиск

    как вы можете видеть после нажатия кнопки поиска, URL-адрес действительно меняется, потому что
    строки 37: window.location.href = '/' + input , теперь это относится к расположению окна по умолчанию + input.

так что это был краткий пример, показывающий, как я использую свойство window.location.href в своих проектах, если вы хотите лучше понять тему и как она на самом деле работает, когда задействован полный backend и frontend, тогда обратитесь к этому репозиторию Github ,

Рекомендуемые посты:

Как сделать обходной путь для window.location.href?

0.00 (0%) 0 votes