加载后刷新jquery移动页面 [英] refresh jquery mobile page after load
本文介绍了加载后刷新jquery移动页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两页，A和B:
A->登录页面.
B->包含HTML元素和iScoll拉动刷新"代码.
evrey的东西工作正常，但是当我从A登录到B时，iScroll内容未出现，如果我确实刷新了页面B，则该内容又出现并运行良好，这是iScroll代码:
I have two pages, A and B:
A --> login page.
B --> contain HTML elements and iScoll "pull to refreash" code.
evrey thing works fine but when I login from A to B the iScroll content Not appear, if i do refresh for page B the content appear back and work well, this is iScroll code:
<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>
有谁能帮忙，
编辑:A.aspx的<head>部分->登录页面:
edit: <head> section for A.aspx --> Login page:
<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>
编辑:B.aspx的<head>部分:
edit: <head> section for 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>
推荐答案
让我解释一下正在发生的事情.
Let me explain you what is happening.
您有2个单独的HTML页面.每个页面都有一个包含javascript内容的HEAD.
You have 2 separate HTML pages. Every page has a HEAD with javascript content.
您的问题涉及jQuery Mobile如何处理页面加载.仅第一页已完全加载.当仅要加载下一页时，其主体将加载到DOM中，其余的将被丢弃.这是因为首页已经在DOM内，而不必在HEAD内.
Your problems comes to how jQuery Mobile handles page loading. Only first page is fully loaded. When next page is about to be loaded ONLY its body is loaded into the DOM and rest is discarded. This is because first page is already inside the DOM, there's no point in having to HEAD's inside.
可以通过几种方法解决此问题:
This can be fixed in few ways:
- 将第二页javascript移至第一页的标题
- 将第二页javascript移至第二页正文
- 进行页面转换时，请将以下属性添加到链接中: data-ajax ="false" 或 rel ="external" .只是需要，在这种情况下过渡将无法工作，因此请坚持使用解决方案1或2.
- Move your second page javascript to the HEAD of your first page
- Move your second page javascript to the second page BODY
- When making page transition add these attributes into your link: data-ajax="false" or rel="external". Just be waned, in this case transitions wont work so stick to solution 1. or 2.
也请看一下，关于这个+示例，我还有另一个很好的答案: 为什么我必须将所有脚本放到jQuery mobile中的index.html
Also take a look, I have another great answer regarding this + examples: Why I have to put all the script to index.html in jquery mobile
这篇关于加载后刷新jquery移动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
