Question

好吧，我是Ajax和JQuery的新手，我很难编译它。我尝试使用ajax导航加载URL，并使用popstate检索后退和前导航。下面的代码效果很好，但我的问题是整合页面的进度指示器，我试图在使用Pace Page Progress Bar Plugin点击链接时加载。

<html>
<head>
<meta charset="utf-8" />
<div id="render-me">
<title>jQuery Ajax Test</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.gossipper.com/content/css/inspired-mob/styles/pace-theme-center-atom.css" />

  <script>
    paceOptions = {
  ajax: true, // disabled
  document: true, // disabled
  eventLag: true, // disabled
  elements: {
    selectors: ['#render-me']
  }
};
  </script>
  <script src="https://www.gossipper.com/content/css/inspired-mob/js/pace.js"></script>

<script type="text/javascript"><!--

$(document).ready(function(e){
    $.ajaxSetup ({
        cache: false
    });
    var page;
    $('a.lnk').click(function(){

        page = $(this).attr('href');

        $('#render-me').load(page + ' #render-me');

        if(page != location.href){
          window.history.pushState({path:page},'',page);
          $(window).bind("popstate", function() {
              link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
    $('#render-me').load(link + ' #render-me');
});
        }       

        return false;
    });
    document.addEventListener('gg', function(){
      document.querySelector('.pace').classList.remove('pace-inactive');
      document.querySelector('.pace').classList.add('pace-active');

      document.querySelector('.pace-progress').setAttribute('data-progress-text', percentComplete.value + '%');
      document.querySelector('.pace-progress').setAttribute('style', '-webkit-transform: translate3d(' + percentComplete.value + '%, 0px, 0px)');
    });
    $(window).on({
        popstate:function(e){
            page = location.href;
            $('#render-me').load(page + ' #render-me');
        }
    });

});
</script>
</head>
<body>
<h1>Web page test.html</h1>
<a href="https://www.gossipper.com/forum/general/news/22853-dino-melaye-injured-rushed-to-hospital-after-jumping-off-a-police-vehicle" title="Get extern" class="lnk">Get extern</a>

<div id="content">Initial content in test.html</div>

</body>
</div>
</html>

正如我上面所说，我是Ajax，JQuery和Javascript的新手。我努力编译这个，我需要帮助让这个工作。

Answer 1

您的代码中的问题是您的脚本来源，节奏的css来源和正确放置html元素。

我试图进入你的脚本和css的来源，但它没有找到。您无需将所有元素封装在<div id="render-me">。

中

基于https://www.w3schools.com/html/html_head.asp

<head>元素是元数据的容器（有关数据的数据），位于<html>标记和<body>标记之间。 HTML元数据是有关HTML文档的数据。不显示元数据。元数据通常定义文档标题，字符集，样式，链接，脚本和其他元信息。以下代码描述了元数据：<title>，<style>，<meta>，<link>，<script>和<base>

所以你必须删除头部的div，修复源并将<div id="render-me">放在体内。

以下是我修复的代码：https://jsfiddle.net/uqbysq1a/1/

使用Ajax获取页面加载进度

1 个答案: