0


我有两个页面，A 和 B：
A --> 登录页面。
B --> 包含 HTML 元素和 iScoll “拉动刷新”代码。
evrey 一切正常，但是当我从 A 登录到 B 时，iScroll 内容没有出现，如果我刷新页面 B，内容会重新出现并且运行良好，这是 iScroll 代码：

<script type="text/javascript">

    var myScroll,
    pullDownEl, pullDownOffset,
    generatedCount = 0;

    function pullDownAction() {
        setTimeout(function () {    
            var el, li, i;
            el = document.getElementById('thelist');

            var returnedLIs = "";
            for (i = 0; i < 3; i++) {

                returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>';

            }
            $(returnedLIs).prependTo($('#thelist'));
            myScroll.refresh(); 
        }, 0); 
    }


    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            hideScrollbar:false,
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                } 

            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    this.minScrollY = -pullDownOffset;
                } 
                                },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                    pullDownAction(); // Execute custom function (ajax call?)
                } 

            }
        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);


</script>

任何人都可以帮助,,,


编辑：<head>A.aspx 部分-> 登录页面： 

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <link href="css/Site.css" rel="stylesheet" type="text/css" />

    <!-- Validition Library -->
    <script src="Validate/jquery.validVal-4.3.3.js" type="text/javascript"></script>
</head>


编辑：<head>B.aspx 部分： 

<head runat="server">

    <%--PULL TO REFREASH--%>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <%--PULL TO REFREASH--%>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <%--PULL TO REFREASH--%>
    <script type="text/javascript" src="jq/iscroll.js"></script>
    <%--PULL TO REFREASH--%>

    <link href="css/Site.css" rel="stylesheet" type="text/css" />

<%--pull to refresh--%>

<script type="text/javascript">



    var myScroll,
    pullDownEl, pullDownOffset,
    generatedCount = 0;

    function pullDownAction() {
        setTimeout(function () {    
            var el, li, i;
            el = document.getElementById('thelist');

            var returnedLIs = "";
            for (i = 0; i < 3; i++) {

                returnedLIs += '<li><a href="#" data-ajax="false" class="PDFLink"></a></li>';

            }
            $(returnedLIs).prependTo($('#thelist'));
            myScroll.refresh(); 
        }, 0);    
    }


    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;

        myScroll = new iScroll('wrapper', {
            hideScrollbar:false,
            useTransition: true,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                } 

            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                    this.minScrollY = -pullDownOffset;
                } 

            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                    pullDownAction(); // Execute custom function (ajax call?)
                } 
            }
        });

        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);


</script>
<%--pull to refresh--%>
</head>
4

1 回答 1

1

让我解释一下发生了什么。

您有 2 个单独的 HTML 页面。每个页面都有一个带有 javascript 内容的 HEAD。

您的问题在于 jQuery Mobile 如何处理页面加载。只有第一页完全加载。当下一页即将加载时，仅将其正文加载到 DOM 中，其余部分被丢弃。这是因为第一页已经在 DOM 中，没有必要将 HEAD 放在里面。

这可以通过以下几种方式解决：

  • 将您的第二页 javascript 移动到您的第一页的 HEAD
  • 将您的第二页 javascript 移动到第二页 BODY
  • 在进行页面转换时，将这些属性添加到您的链接中：data-ajax="false"或rel="external"。只是被削弱了，在这种情况下，转换不起作用，所以坚持解决方案 1. 或 2。

也看看，关于这个+示例我有另一个很好的答案：Why I have to put all the script to index.html in jquery mobile

于 2013-05-07T13:42:29.797 回答