javascript - load Js file in HTML

My first PhoneGap application includes 2 HTML files.

The first one is named index.html which uses index.js. This file will display a list item. When I click an item in that list, it brings me to detail.html file by this:

   $.mobile.changePage("detail.html", { transition: "slideup"});

   location.href = "detail.html";

On the detail.html page, I load detal.js. However it did not work. I could not use functions in detail.js.

Please give me your advise and there are any example ?

Capture Photo

    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/getAbstract.min.css" />
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/jquery.mobile-1.3.0.min.js"></script>
    <script src="js/jquery.ba-dotimeout.js"></script>
    <script src="js/jquery.dst.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8"></script>


</head>
<body>

    <div data-role = "page" data-theme = "a" id = "pageContainer">
        <!--Start Page Header -->
        <div data-role = "header" id = "pageHeader" data-nobackbtn = "true" data-position = "fixed">
            <h1>Camera</h1>
        </div>
        <!--End Page Header -->

        <!--Start Page Content-->
        <div data-role = "content" id= "pageContent">
            <a data-role = "button" id = "btnCaptureEdit" href = "">Capture Edit</a>
            <a data-role = "button" id = "btnLibraryPhoto" href = "">Get Photo From Library</a>
            <a data-role = "button" id = "btnAlbumPhoto" href = "">Get Photo From Album</a>
        </div>
        <!--End Page Content-->

        <!--Start Page Footer-->
        <div data-role = "footer" id = "pageFooter">
        </div>
        <!--End Page Footer-->

    </div>
    <script src="js/detail.js"></script>

</body>

</html>

My first PhoneGap application includes 2 HTML files.

The first one is named index.html which uses index.js. This file will display a list item. When I click an item in that list, it brings me to detail.html file by this:

   $.mobile.changePage("detail.html", { transition: "slideup"});

   location.href = "detail.html";

On the detail.html page, I load detal.js. However it did not work. I could not use functions in detail.js.

Please give me your advise and there are any example ?

Capture Photo

    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/getAbstract.min.css" />
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/jquery.mobile-1.3.0.min.js"></script>
    <script src="js/jquery.ba-dotimeout.js"></script>
    <script src="js/jquery.dst.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
    <script type="text/javascript" charset="utf-8"></script>


</head>
<body>

    <div data-role = "page" data-theme = "a" id = "pageContainer">
        <!--Start Page Header -->
        <div data-role = "header" id = "pageHeader" data-nobackbtn = "true" data-position = "fixed">
            <h1>Camera</h1>
        </div>
        <!--End Page Header -->

        <!--Start Page Content-->
        <div data-role = "content" id= "pageContent">
            <a data-role = "button" id = "btnCaptureEdit" href = "">Capture Edit</a>
            <a data-role = "button" id = "btnLibraryPhoto" href = "">Get Photo From Library</a>
            <a data-role = "button" id = "btnAlbumPhoto" href = "">Get Photo From Album</a>
        </div>
        <!--End Page Content-->

        <!--Start Page Footer-->
        <div data-role = "footer" id = "pageFooter">
        </div>
        <!--End Page Footer-->

    </div>
    <script src="js/detail.js"></script>

</body>

</html>

Share Improve this question edited Apr 9, 2013 at 3:47 asked Apr 9, 2013 at 3:33 Thuong Tran 1391 gold badge3 silver badges11 bronze badges

3 Can you post your code please? Particularly detail.html. – Ilia Frenkel Commented Apr 9, 2013 at 3:35
All your script tags should have type attributes. The last script tag in the head is empty and could be removed. – Surreal Dreams Commented Apr 9, 2013 at 3:54

Add a comment |

2 Answers 2

Sorted by: Reset to default 10

If this is your detail.html I don't see where do you load detail.js? Maybe this

<script src="js/index.js"></script>

should be this

<script src="js/detail.js"></script>

I had the same problem, and found the answer. If you use node.js with express, you need to give it its own function in order for the js file to be reached. For example:

const script = path.join(__dirname, 'script.js');
const server = express().get('/', (req, res) => res.sendFile(script))

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - load Js file in HTML - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)