저는 이탈리아의 웹 개발자입니다 ... href 예제로로드하는 데 문제가 있습니다.이 코드에 one.html이 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
</head>
<body>
<!-- LOGIN -->
<div data-role="page" id="loginPage">
<div data-role="content">
<div style=" text-align:center">
<img style="width: 70%;" src="http://www.laboncloud.it/dkrmobile/css/images/logdkr.png">
</div>
<form action="#pageFile">
<div data-role="fieldcontain">
<label for="userNameLogin">
Username
</label>
<input name="" id="userNameLogin" placeholder="" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="passwordLogin">
Password
</label>
<input name="" id="passwordLogin" placeholder="" value="" type="password">
</div>
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch="trues">
Login
</a>
</form>
</div>
</div>
</body>
</html>
이 코드가있는 two.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>dkrMobile</title>
<!--caricamento librerie-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jqm-icon-pack-fa.css">
<script type="text/javascript" src="js/tolito-1.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/tolito-1.0.5.min.css" />
<!--css userinterface-->
<link rel="stylesheet" href="css/ui.css" />
</head>
<body>
<div data-role="page" id="loadingPage">
<div data-role="content">
<h1>caricamento di tutti i contenuti in corso</h1>
<a data-role="button" data-theme="a" data-transition="fade" href="#pageFile">skip</a>
</div>
</div>
<div data-role="page" id="pageFile">
<div data-role="content">
<h1>dueeee</h1>
</div>
</div>
<!-- FILE-->
</body>
</html>
이제 로그인을 탭하면 two.html이로드되지 않습니다.
데모를 원하십니까? 여기 데모
two.html에서 skip을 클릭하면 아무것도 표시되지 않습니다 (페이지를 새로 고치면 작업이 시작됩니다).
유일한 방법은 data-ajax = "false"입니까? 왜?
이것은 오류가 아닙니다. 이 문제를 이해하려면 jQuery Mobile의 작동 방식을 이해해야합니다.
다중 HTML템플릿은 다중 페이지 템플릿과 혼합 할 수 없습니다. 예를 들어 여러 HTML페이지로 작업 할 때 첫 번째 페이지 만 두 페이지 이상을 가질 수 있습니다. jQuery Mobile이 다른 HTML파일을 로드 할 때 HEAD를 제거하고 (첫 번째 HTMLHEAD 콘텐츠가 이미 DOM에로드 되었기 때문에 필요하지 않음) 파일에서 찾을 수있는 첫 번째 페이지 만로드하고 다른 모든 페이지는 삭제됩니다.
data-prefetch여기서는 도움이되지 않습니다. 또한 잘못 초기화하고 있습니다. data-prefetch 속성에는 값이 없습니다 data-prefetch. 예를 들면 다음과 같습니다.
<a data-role="button" data-theme="a" data-transition="fade" href="two.html" data-prefetch>Login</a>
jQuery Mobile이 여러 HTML 및 여러 페이지 템플릿을 처리하는 방법에 대해 자세히 알아 보려면이 기사 또는 이 기사를 참조하십시오 . 투명하게하기 위해 그들은 내 개인 블로그 기사입니다. 당신이 알아야 할 모든 것을 거기에서 찾을 수 있습니다.
기본적으로 문제에 대한 해결책은 모든 페이지를 단일 HTML파일에 포함하거나 two.html을 두 개의 개별 HTML파일 로 분리 하는 것입니다. 자신에게 가장 적합한 솔루션을 결정합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다