Question

我试图将多个html / xhtml / xml页面加载到一个网页中。这是我要遵循的方法

这是我的基本页面

<html>
    <head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">



    var lastScrollTop = 0;
    var indexup = 4;
    var indexdown = 4;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        console.log($(window).scrollTop()+ " <><><>  " + $(window).height()+"  ===   "+$(document).height());
       // downscroll code
       var total = $(window).scrollTop()+$(window).height();
       var diff = Math.abs(total-$(document).height());

        if(diff<=2) {

     //  alert("bottom!");
       indexdown = indexdown+1;
       if(indexdown>7)
       {
           alert("This is the last page")
       }
       else
       {
       appendNext(indexdown);
        }
   }

   } else {
      // upscroll code
     if ($(window).scrollTop() == 0)
                {
                    console.log($(window).scrollTop() + $(window).height()+"  ===   "+$(document).height());
                   //  alert('Scrolled to Page Top');
                     indexup = indexup-1;
                     if(indexup==0)
                     {
                       alert('This is the first page');  
                     }
                     else
                     {
                       appendPrevious(indexup);  
                     }

                 }

   }
   lastScrollTop = st;
});        

                function appendNext(index)
                {
                $.get("html/01.PAGE."+index+".html", function (data) {
                    $("#appendToThis").append(data);
                });

                }

                function appendPrevious(index)
                {
                $.get("html/01.PAGE."+index+".html", function (data) {

                    var old_height = $(document).height();  //store document height before modifications
                    var old_scroll = $(window).scrollTop();
                    $("#appendToThis").prepend(data);
                    $(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"

                });

                }



        </script>
    </head>
    <body>
        <div id="loadDiv">

        </div>
        <script type="text/javascript">

$("#loadDiv").load("xhtml/01.PAGE.4.html");
            </script>
    </body>
</html>

这按预期工作正常。我先加载01.PAGE.4.html，在loadDiv和01.PAGE.3.html之前添加01.PAGE.5.html。

但是实际上那些01.PAGE.4.html是01.PAGE.4.xhtml。

我将扩展范围从xhtml更改为html以进行测试，发现jquery可以加载xhtml代码，但不能追加或添加相同的内容。

那是当我尝试重新运行代码时，因为xhtml代码给了我这个错误

uncaught typeerror cannot read property 'ownerdocument' of null jquery（选中控制台）

这是我的疑问，如何从#Document中获取价值

当我注销它时，它具有整个页面数据，但是我不知道如何用jquery附加或添加它。但是，即使对于jquery的xhtml页面加载功能，它也能正常工作。有人请帮助

如何从#Document获取数据以进行jquery追加和前置？

Answer 1

$.get ("xhtml/01.PAGE.xhtml", function (data)
{
     $("#appendToThis").html($(data).children());
}, 'xml');

尝试一下。有关更多详细信息，请参见https://api.jquery.com/jquery.get/。

如何在jquery中获取数据并从xhtml页面添加

1 个答案: