带有GET参数的HTML链接：在执行ajax请求之前加载页面html和javascript

Question

当我在地址栏中粘贴下面的HTML链接或按下浏览器“上一页”按钮时，我的ajax GET请求在html内容完全加载之前执行，导致我的ajax返回的内容显示在我的导航栏上方，因此破坏了我的网站。如果从网站内执行相同的请求，那么一切都很好。如何在激活ajax请求之前确保页面HTML和javascript加载？

编辑：已解决（在下面的帖子中回答）

HTML链接

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;


}
}

Answer 1

这对我有用（注意这使用了jquery库）：

$(document).ready(function () {
     Your code here...
});

这将等待页面加载然后运行该功能。我个人用它来制作动画但是动画也需要更多的时间给我，所以我还要包括像这样的setTimeout函数：

setTimeout(function () {
       Your code here...
}, 1000);

它在执行函数之前等待特定的毫秒数。

Answer 2

事实证明这个问题来自我的index.php结构;

我将php代码移动到单独的文件中，并将其包含在index.php的末尾而不是顶部。

现在我有其他问题，但主要问题已经解决。