Javascript jQuery移动内部页面问题_Javascript_Jquery_Html_Ajax_Jquery Mobile

Javascript jQuery移动内部页面问题

javascript jquery html ajax jquery-mobile

Javascript jQuery移动内部页面问题,javascript,jquery,html,ajax,jquery-mobile,Javascript,Jquery,Html,Ajax,Jquery Mobile,我在jquerymobile中使用了内部页面功能，该功能运行良好，但仅适用于特定情况。应用程序中的大多数链接使用jQuery的“标准”加载特性（其中所需页面通过AJAX加载，第一个带有data role=“page”的容器放置在DOM中）但是，有几个页面包含多个容器，其中包含一个data role=“page”，用于内部页面。换句话说，HTML文档中的第一个页面容器包含链接，这些链接将在内部链接到DOM中的其他页面使用上述“标准”加载方法，内部链接不起作用。但是，重新加载页面以便加载整个DO

我在jquerymobile中使用了内部页面功能，该功能运行良好，但仅适用于特定情况。应用程序中的大多数链接使用jQuery的“标准”加载特性（其中所需页面通过AJAX加载，第一个带有

data role=“page”

的容器放置在DOM中）

但是，有几个页面包含多个容器，其中包含一个

data role=“page”

，用于内部页面。换句话说，HTML文档中的第一个

页面容器包含链接，这些链接将在内部链接到DOM中的其他页面
使用上述“标准”加载方法，内部链接不起作用。但是，重新加载页面以便加载整个DOM可以解决此问题
我知道我可以通过在链接中添加一个rel=“external”
属性来链接到这个页面，但这样做会删除jQuery Mobile通过“标准”加载方法提供的所有良好转换
如何在不添加rel=“external”
属性的情况下解决此问题
谢谢您的时间。
jQuery Mobile默认情况下仅从外部文档加载第一个data role=“page”
或第一个data role=“dialog”
元素。甚至省略了
部分
解决方法是将所有页面放在一个HTML文档中，或者将每个伪页面放在它自己的HTML文档中
您可以编写一些代码，手动获取外部文档中的所有伪页面：
HTML--


JS--
//当伪页面初始化时，此代码将运行
$（document）.delegate（'.ui page'，pageinit'，function（）{
//查找用上述类标记的元素并绑定到它们的“click”事件
$（this）.find（'.multi-page link'）.bind（'click'，function（）{
//显示加载微调器
$.mobile.showPageLoadingMsg（）；
//为链接的href创建AJAX请求
$.ajax({
url:this.href，
数据类型：“html”，
成功：功能（响应）{
//成功响应后，找到外部文档中的所有伪页面元素，并将它们附加到``
var$pseudoPages=$（response）.filter（'[datarole=“page”]，[datarole=“dialog”]'）。appendTo（'body'）；
//现在隐藏加载微调器
$.mobile.hidePageLoadingMsg（）；
//并导航到刚刚添加到DOM的第一个伪页面
$.mobile.changePage（$pseudoPages.eq（0））；
},
错误：函数（a，b，c）{/*不允许get处理错误*/}
});
返回false；
});
});

我认为这是一个插件，但我不知道它在哪里，也不知道它是否受到支持。
我发现这个解决方案是处理我的情况最有效的方式。它不需要在锚标记上使用类来指示链接是否包含单独的页面。这段代码只需在单个HTTP请求中查找其他页面
贾斯珀让我的车轮朝着正确的方向旋转
(function($) {
/**
 * This code will load all of the internal pages within the DOM of an HTML element
 * and transition the first one into place, just as the "standard" way of loading
 * a page, but it includes all internal pages
*/

  $(document).bind('pageload', function(event, ui) {
  //Find all of the pages and dialogs in the DOM
    var response = ui.xhr.responseText;
    var data = $(response).filter('section[data-role="page"], section[data-role="dialog"]');

  //Make sure that the given psuedo page does not already exist before adding it
  //Skip the first matched element, since jQM automatically inserted it for us
    for (var i = 1; i <= data.length - 1; i++) {
      var current = data.eq(i);

      if (current.attr('id') && !document.getElementById(current.attr('id'))) {
        current.appendTo('body');
      }
    }
  });
})(jQuery);

（函数（$）{
/**
*此代码将加载HTML元素DOM中的所有内部页面
*并将第一种方式转换到位，就像“标准”加载方式一样
*一个页面，但它包括所有内部页面
*/
$（文档）.bind（'pageload'，函数（事件，用户界面）{
//查找DOM中的所有页面和对话框
var response=ui.xhr.responseText；
var data=$（response）.filter（'section[data role=“page”]，section[data role=“dialog”]）；
//添加之前，请确保给定的psuedo页不存在
//跳过第一个匹配的元素，因为jQM会自动为我们插入它
对于（var i=1；i Ahh…好主意！让我试试，我会让你知道我的结果。只是出于好奇。如果用户在一个会话中多次访问该页面。这看起来会继续将内部页面添加到DOM，即使这些页面已经存在并且具有相同的ID。我可能应该在添加页面时检查这一点o DOM，不是吗？我实际上刚刚在jQM文档页面上找到了这个：@spryno724是的，您需要检查DOM中是否已经存在伪页面。这很简单，您可以通过ID进行选择，如果出现问题，只需将其替换为新页面或保留旧页面。@spryno724我还没有使用pushState
插件在jQuery Mobile中包含at，但它允许您在更改页面时更新URL，并重新启用“后退”按钮。@spryno724event.preventDefault（）
/event.stopPropagation（）
是不必要的，因为return false；
两者都有。您只需确保将return false
放在函数的末尾，因为它结束了函数的执行。这意味着如果在事件处理程序结束之前发生错误，将不会读取return false
，默认行为将被忽略ppen，但这只是调试过程中的一个问题。还有$（this.attr（'href'））
将返回一个相对URL，this.href
将返回一个完整URL，但两者都指向同一个位置，this.href
更快。您的文档.pageload
事件处理程序将在每次页面初始化时绑定。您有if/then
语句，因此不会多次添加伪页面e次，但您仍然为每个初始化的伪页面运行一次document.pageload
事件。因此，到第四页时，document.pageload
事件处理程序将运行4次而不是一次。基本上，您可以将外部委托事件处理程序作为文档删除。pageload几乎相同好东西。不过，把它清理干净一点，我一定会把它清理干净的
//when a pseudo-page initializes this code will run
$(document).delegate('.ui-page', 'pageinit', function () {

    //find elements tagged with the above class and bind to their `click` events
    $(this).find('.multi-page-link').bind('click', function () {

        //show the loading spinner
        $.mobile.showPageLoadingMsg();

        //create AJAX request for href of link
        $.ajax({
            url      : this.href,
            dataType : 'html',
            success  : function (response) {

                //on successful response, find all the pseudo-page elements in the external document and append them to the `<BODY>`
                var $pseudoPages = $(response).filter('[data-role="page"], [data-role="dialog"]').appendTo('body');

                //now hide the loading spinner
                $.mobile.hidePageLoadingMsg();

                //and navigate to the first pseudo-page that was just added to the DOM
                $.mobile.changePage($pseudoPages.eq(0));
            },
            error    : function (a, b, c) { /*Don't for get to handle errors*/ }
        });
        return false;
    });
});

(function($) {
/**
 * This code will load all of the internal pages within the DOM of an HTML element
 * and transition the first one into place, just as the "standard" way of loading
 * a page, but it includes all internal pages
*/

  $(document).bind('pageload', function(event, ui) {
  //Find all of the pages and dialogs in the DOM
    var response = ui.xhr.responseText;
    var data = $(response).filter('section[data-role="page"], section[data-role="dialog"]');

  //Make sure that the given psuedo page does not already exist before adding it
  //Skip the first matched element, since jQM automatically inserted it for us
    for (var i = 1; i <= data.length - 1; i++) {
      var current = data.eq(i);

      if (current.attr('id') && !document.getElementById(current.attr('id'))) {
        current.appendTo('body');
      }
    }
  });
})(jQuery);