Question

我正在尝试使用跨平台框架的phonegap，并且遇到多重问题。

我想要的只是以下内容：

第1页：静态内容
第2页：listview

我使用的代码：

第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处理页面的方式就像使用一个索引一样有效，但不是首选......;）

我为导航栏链接尝试了以下解决方案：

a href with：rel =“external”
a href with：data-ajax =“false”
a href with：rel =“external”和data-ajax =“false”

每次我使用外部链接执行此操作时，都会收到以下错误：

Exception building cordova JS globals: TypeError: Cannot redefine property: connection for key "connection"

似乎cordova / phonegap框架被加载了两次，但我认为使用这个链接触发了一个完整的页面重载，那么应该加载两次???

或者我对乘法的使用有一般性的误解？应该可以分隔不同文件中的内容，还是？

任何帮助都会很棒。

Answer 1

您需要将脚本放在head部分中，jquery mobile会在加载ajax的页面上忽略它。

当第二页加载时，正文中的任何内容都会插入到DOM中，这就是Cordova尝试运行两次的原因。

Multipages with Phonegap / Cordova 2.2.0

1 个答案: