1

I am having a weird problem when trying to load an external JS file in a page which is loaded using $.mobile.changepage().

Following is my directory structure:

|_ /html
|   |_ conflist.html
|   |_ newpage.html
|_ /common
|   |_ jquery-1.7.2.min.js
|   |_ jquery.mobile-1.2.0.min.js
|   |_ jquery.mobile-1.2.0.min.css
|_ /platform
    |_ dummy.js

Here are the codes for conflist.html and newpage.html.

First, conflist.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="../common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../common/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        function changePage() {
            $.mobile.changePage("newpage.html", { transition: "slide" });
        }
    </script>
</head>
<body>
<div id="firstpage" data-role="page">
    <div data-role="content">
        <input type="button" onclick="changePage()" value="Change Page (JQM)" /><br />
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Next, newpage.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="../common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../common/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="newpage" data-role="page">
    <script type="text/javascript" charset="utf-8" src="../platform/dummy.js"></script>
    <script type="text/javascript" charset="utf-8">
        console.log("Inside test_newpage.html");
        var objDummy = new Dummy();
        objDummy.toString("test param");
    </script>
    <div data-role="content">
        <p>This is a new page !!</p>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Finally, dummy.js:

var Dummy = function () { };
Dummy.prototype.toString = function (param) {
    console.log("String representation of 'Dummy', got param: " + param);
};

console.log("Loaded dummy.js");

Problem:

  • If I load conflist.html (directly, using FF16.0.2 and IE9, not through a webserver), and click the button, I get an error saying: "ReferenceError: Dummy is not defined". Essentially, dummy.js is not read.
  • If I move dummy.js to the same folder as the html files, and modify the path accordingly in newpage.html, things work fine and I get all the outputs.

Wondering, why do I see this behavior? Why isn't the external js file loaded when it is placed in another folder and the relative path is given?

Update: I checked and this also works if I put dummy.js in a subfolder inside the html folder. Just can't have it outside it seems, unless I am missing something.

4

3 に答える 3

1

あなたを体ではなく頭に入れてみてください<script src="../platform/dummy.js"></script>...そして：あなたはもう必要ありtype="text/javascript" charset="utf-8"ません...

<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script src="../platform/dummy.js"></script>
    <script src="../common/jquery-1.7.2.min.js"></script>
    <script src="../common/jquery.mobile-1.2.0.min.js"></script>
</head>
于 2012-11-08T14:05:04.190 に答える
0

相対 URL を絶対 URL に変更します。これにより、毎回正しいファイルを参照していることを確認できます。

たとえば、外部ページは次のようになります。

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="/base/common/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="/base/common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/base/common/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="newpage" data-role="page">
    <script type="text/javascript" charset="utf-8" src="/base/platform/dummy.js"></script>
    <script type="text/javascript" charset="utf-8">
        console.log("Inside test_newpage.html");
        var objDummy = new Dummy();
        objDummy.toString("test param");
    </script>
    <div data-role="content">
        <p>This is a new page !!</p>
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

はドメイン/base/の最上位ディレクトリです。

于 2012-11-08T20:27:40.803 に答える
0

その理由は、js の相対パスである可能性があると思います。$.mobile.changePage(); を使用している場合、の間のターゲット ページのコンテンツのみが読み込まれます。つまり、ターゲット ページのすべてのヘッダー コンテンツは無視されるか、読み込まれません。また、ターゲット ページで js を参照する場合、相対パスはターゲット html に基づいている必要があります。この場合、「../」は機能していないようです。

于 2013-09-03T16:19:14.040 に答える