HTML внутреннее перенаправление после загрузки страницы - PullRequest
0 голосов
/ 21 января 2020

Я новичок в HTML, и у меня есть этот код загрузчика, который я получил: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5

Я настраиваю его, чтобы иметь кнопку, и когда я нажимаю на эту кнопку, он отправляет внутренний GET запрос к моему коду /clients. Я хочу, чтобы тот же код работал, но без кнопки.

Я хочу, чтобы загрузчик завершил загрузку sh и затем перенаправил на страницу /clients, потому что теперь он зависит от нажатия кнопки. мой код:

</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
    <button>OK</button>
</form>
</body>
</div>

простое удаление строки кнопки ничего не делает, просто показывает пустую страницу, и в моем коде я вижу, что она не перенаправляет на /clients

как я могу это сделать ?

РЕДАКТИРОВАТЬ:

РЕШЕНО , изменив myFunction, как предложено @Bert Maurau

<script>
var myVar;
function myFunction() {
  myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}

Ответы [ 3 ]

1 голос
/ 21 января 2020

То есть вы в основном хотите перенаправить пользователя, если ваша «загрузка» завершена? Я вижу, что вы вызываете myFunction() при загрузке страницы.

Вы можете добавить базис c

setTimeout(function(){ window.location.href = '/clients' }, 1000);

в конце функции, чтобы перенаправить пользователя в / клиентов через одну секунду. (или когда ваша функция загрузки завершила обработку данных.

  myFunction() {

    // do stuff here
    // ...

    // wait for a second
    const timeout = setTimeout(() => {
      // redirect to clients
      window.location.href = '/clients';
    }, 1000);

  }
0 голосов
/ 21 января 2020

Решение:

</head>

<body onload="myFunction()" style="margin:0;">

Удалите дополнительный закрывающий тег для тела

<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
  <h2>Pres OK.</h2>
  <form method="get" action="/clients">
    <button>OK</button>
  </form>
  </body>
</div>

Вы можете использовать ниже Jquery Сценарий

<script>
   $(document).ready(function(){
      if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){ 
          // or any other check to ensure that the loader is finished.
          $('form').submit();
      }
   })
</script>

Пожалуйста, не стесняйтесь спрашивать, если вам нужно больше разъяснений.

0 голосов
/ 21 января 2020

Вы можете отправить свою форму из myFunction ().

<script>
function myFunction() {
  document.getElementById("form_id").submit();
}
</script>

Эта функция будет вызываться по завершении загрузки страницы и будет отправлять форму, не нажимая кнопку. Вы даже можете полностью удалить кнопку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...