jQuery Mobile: Get data passed to page via changePage mobile.changePage

本文转自:http://stackoverflow.com/questions/15840611/jquery-mobile-get-data-passed-to-page-via-changepage

Solution

Send them like this:

$.mobile.changePage('page2.html',{ dataUrl :"page2.html?parameter=123", data :{'paremeter':'123'}, reloadPage :true, changeHash :true});

And read them like this:

$("#index").live('pagebeforeshow',function(event, data){var parameters = $(this).data("url").split("?")[1];; parameter = parameters.replace("parameter=",""); alert(parameter);});

More examples can be found here: jQuery Mobile: document ready vs page events, just look for chapter: Data/Parameters manipulation between page transitions.

Example:

index.html

<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8"/>
<metaname="viewport"content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<metaname="apple-mobile-web-app-status-bar-style"content="black"/>
<title>
</title>
<link
rel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script><script> $(document).on('pagebeforeshow',"#index",function(){ $(document).on('click',"#changePage",function(){ $.mobile.changePage('second.html',{ dataUrl :"second.html?paremeter=123", data :{'paremeter':'123'}, reloadPage :false, changeHash :true});});}); $(document).on('pagebeforeshow',"#second",function(){var parameters = $(this).data("url").split("?")[1];; parameter = parameters.replace("parameter=",""); alert(parameter);});</script></head><body><!-- Home --><divdata-role="page"id="index"><divdata-role="header"><h3> First Page </h3></div><divdata-role="content"><adata-role="button"id="changePage">Test</a></div><!--content--></div><!--page--></body></html>

second.html

<!DOCTYPE html><html><head><meta charset="utf-8"/>
<meta
name="viewport"content="widdiv=device-widdiv, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable"content="yes"/>
<meta
name="apple-mobile-web-app-status-bar-style"content="black"/><title></title>
<link
rel="stylesheet"href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script
src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head>
<body><!-- Home --><div data-role="page"id="second"><div data-role="header"><h3> Second Page </h3></div><divdata-role="content"></div><!--content--></div><!--page--></body></html>

More info

If you want to learn more about this topic take a look at this article. You will find several solutions with examples.

你可能感兴趣的:(JQuery Mobile)