0

我有一些使用 jquery mobile + phonegap 的代码并在我的 android 上运行它,我想将页面重定向到 div id 内容...我的意思是在我拍照后我想加载下一页...这里是我的代码...

<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="js/jquery.mobile-1.0.min.css" />
        <script src="js/jquery-1.6.4.min.js"></script>
        <script src="js/jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
        <script type="text/javascript" charset="utf-8">
        var deviceReady = false;

        /**
         * Take picture with camera
         */
        function takePicture() {
            navigator.camera.getPicture(

            function (uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
                window.location.href = "#page2";

            }, function (e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            }, {
                quality: 50,
                destinationType: navigator.camera.DestinationType.FILE_URI
            });
        };

        /**
         * Select picture from library
         */
        function selectPicture() {
            navigator.camera.getPicture(

            function (uri) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                img.src = uri;
                document.getElementById('camera_status').innerHTML = "Success";
                window.location.href = "#page2";
            }, function (e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            }, {
                quality: 50,
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
            });
        };

        /**
         * Upload current picture
         */
        function uploadPicture() {

            // Get URI of picture to upload
            var img = document.getElementById('camera_image');
            var imageURI = img.src;
            if (!imageURI || (img.style.display == "none")) {
                document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
                return;
            }

            // Verify server has been entered
            server = document.getElementById('serverUrl').value;
            if (server) {

                // Specify transfer options
                var options = new FileUploadOptions();
                options.fileKey = "file";
                options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
                options.mimeType = "image/jpeg";
                options.chunkedMode = false;

                // Transfer picture to server
                var ft = new FileTransfer();
                ft.upload(imageURI, server, function (r) {
                    document.getElementById('camera_status').innerHTML = "Upload successful: " + r.bytesSent + " bytes uploaded.";
                }, function (error) {
                    document.getElementById('camera_status').innerHTML = "Upload failed: Code = " + error.code;
                }, options);
            }
        }

        /**
         * View pictures uploaded to the server
         */
        function viewUploadedPictures() {

            // Get server URL
            server = document.getElementById('serverUrl').value;
            if (server) {

                // Get HTML that lists all pictures on server using XHR 
                var xmlhttp = new XMLHttpRequest();

                // Callback function when XMLHttpRequest is ready
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState === 4) {

                        // HTML is returned, which has pictures to display
                        if (xmlhttp.status === 200) {
                            document.getElementById('server_images').innerHTML = xmlhttp.responseText;
                        }

                        // If error
                        else {
                            document.getElementById('server_images').innerHTML = "Error retrieving pictures from server.";
                        }
                    }
                };
                xmlhttp.open("GET", server, true);
                xmlhttp.send();
            }
        }

        /**
         * Function called when page has finished loading.
         */
        function init() {
            document.addEventListener("deviceready", function () {
                deviceReady = true;
            }, false);
            window.setTimeout(function () {
                if (!deviceReady) {
                    alert("Error: PhoneGap did not initialize.  Demo will not run correctly.");
                }
            }, 2000);
        }
        </script>
    </head>
    <body onload="init();">
        <!-- Page 1 -->
        <div data-role="page" id="page1">
            <!-- Page 1 Header -->
            <div data-role="header">
                <h1>Ambil Gambar</h1>
            </div>
            <!-- Page 1 Content -->
            <div data-role="content">
                <center>
                    <a href="javascript:void(0)" onclick="takePicture();">
                       <img src="image/camera.png" width="150px" height="150px"></a>
                    <br>
                    <br>
                    <b>Atau</b>
                    <br>
                    <br>
                    <a href="javascript:void(0)" onclick="selectPicture();">
                       <img src="image/upload.png"></a>
                    <p>Find my friend Page 3
                        <a href="#page2">here</a>
                    </p>
                </center>
            </div>
            <!-- Page 1 Footer -->
            <div data-role="footer">
                <h4>Footer 1</h4>
            </div>
        </div>
        <!-- Page 2 -->
        <div data-role="page" id="page2">
            <!-- Page 2 Header -->
            <div data-role="header">
                <h1>Header 2</h1>
            </div>
            <!-- Page 2 Content -->
            <div data-role="content">
                <img style="width:100%;visibility:hidden;display:none;" id="camera_image" src="" />
                <p>Find my friend Page 3
                    <a href="#page3">here</a>
                </p>
            </div>
            <!-- Page 2 Footer -->
            <div data-role="footer">
                <h4>Footer 2</h4>
            </div>
        </div>
        <!-- Page 3 -->
        <div data-role="page" id="page3">
            <!-- Page 3 Header -->
            <div data-role="header">
                <h1>Header 3</h1>
            </div>
            <!-- Page 3 Content -->
            <div data-role="content">
                <h3>Server:</h3>
                <b>Images on server:</b>
                <div id="server_images"></div>
                <input type="button" onclick="uploadPicture();" value="Upload Picture" />
                <input type="button" onclick="viewUploadedPictures();" value="View Uploaded Pictures" />
            </div>
        </div>
    </body>

</html>

任何人都可以帮助我吗?之前谢谢...

4

1 回答 1

1

而不是 window.location.href 使用 window.location.hash。

于 2012-06-21T09:34:47.217 回答