Когда я вставляю ссылку HTML ниже в адресную строку или нажимаю кнопку браузера «Предыдущая страница», мой запрос GET ajax выполняется до полной загрузки html-содержимого, в результате чего возвращаемый ajax-контент отображается над панелью навигации и, следовательно, нарушает работу моего сайта. ,
Если тот же запрос выполняется изнутри сайта, то все в порядке.
Как я могу убедиться, что страница HTML и javascript загружаются до запуска ajax-запроса?
РЕДАКТИРОВАТЬ: РЕШЕНО (ответ в посте ниже)
HTML LINK
https://domainName/?action=listy&p=test
JS pushstate
var container = document.querySelector('.lnk');
var url = "";
container.addEventListener('click', function(e) {
if (e.target != e.currentTarget) {
e.preventDefault();
if (e.target.getAttribute('name')) {
var data = e.target.getAttribute('name')
url = "?action=list&p=" + data;
history.pushState(data, null, url);
}
}
e.stopPropagation();
}, false);window.addEventListener('popstate', function(e) {
window.location.replace(url);
});
JQuery AJAX
$(document).ready(function() {
// .....
success: function(dataBack) {
$('.content-area').html(dataBack);
},
});
PHP
if(isset($_GET['action']) && !empty($_GET['action'])) {
$action = $_GET['action'];
$var = $_GET['p'];
switch($action) {
case 'list' : list($var);break;}
}
Это работает для меня (обратите внимание, это использует библиотеку jquery):
$(document).ready(function () {
Your code here...
});
Это будет ждать загрузки страницы, а затем запустить функцию. Я лично использую это для анимации, но тогда анимация также занимает больше времени для меня, поэтому я должен также включить setTimeout
функционировать так:
setTimeout(function () {
Your code here...
}, 1000);
Он ожидает определенное количество миллисекунд перед выполнением функции.
Оказывается, проблема была в моей структуре index.php;
Я переместил код php в отдельных файлах и включил его в конце index.php
вместо верха.
Сейчас у меня другие проблемы, но основной вопрос решен.