我正在尝试跨平台框架phonegap，并且在多页方面存在一些问题。
我想要的是以下内容:
我使用的代码:
第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处理页面的方式就像使用一个索引一样有效，但不是首选...;)
我为导航栏链接尝试了以下解决方案:
每次使用外部链接执行此操作时，都会出现以下错误:
Exception building cordova JS globals: TypeError: Cannot redefine property: connection for key "connection"
似乎cordova / phonegap框架被加载了两次，但是我认为使用此链接会触发页面的完全重新加载，因此应该加载两次？
还是我对多页的使用有普遍的误解？应该可以将内容分隔到不同的文件中吗？
任何帮助真的很棒。
最佳答案
您需要将脚本放在head部分中，jquery mobile会在ajax加载的页面上忽略该脚本。
加载第二页时，正文中的所有内容都会插入DOM中，这就是Cordova尝试运行两次的原因。