我正在尝试跨平台框架phonegap，但多页存在一些问题。
我想要的只是以下内容：
- 第 1 页：静态内容
- 第 2 页：列表视图
我使用的代码：
第 1 页：index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>Page 1</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="static" data-role="page">
<div data-role="header" data-position="fixed">
<h1 id="header-text">Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<div id="static-content"></div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul class="navbar">
<li><a href="index.html" class="ui-btn-active" data-transition="none">Static</a></li>
<li><a href="list.html" data-transition="none">Listview</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
$('static-content').html('Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.');
}
</script>
</body>
对于第 2 页：list.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<title>Page 2</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="listview" data-role="page">
<div data-role="header" data-position="fixed">
<h1 id="header-text">Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<div id="list-container">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul class="navbar">
<li><a href="index.html" data-transition="none">Static</a></li>
<li><a href="list.html" class="ui-btn-active" data-transition="none">Listview</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
console.log('deviceready');
}
</script>
</body>
我想将不同文件中的内容分开只是为了更好的结构。jquery mobile 处理页面的方式就像使用一个索引一样有效，但不是首选... ;)
我为导航栏链接尝试了以下解决方案：
- 带有以下内容的href：rel =“外部”
- 带有：data-ajax="false" 的 href
- 带有：rel="external" 和 data-ajax="false" 的 href
每次我使用外部链接执行此操作时，都会收到以下错误：
Exception building cordova JS globals: TypeError: Cannot redefine property: connection for key "connection"
似乎cordova/phonegap框架被加载了两次，但我认为使用这个链接会触发页面的完全重新加载，那么应该加载两次呢？
还是我对多页的使用有一个普遍的误解？应该可以将不同文件中的内容分开，或者？
任何帮助都会很棒。