Question

尝试在使用$ .mobile.changepage（）加载的页面中加载外部JS文件时，我遇到了一个奇怪的问题。

以下是我的目录结构：

|_ /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

以下是conflist.html和newpage.html的代码。

首先，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>

接下来，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>

最后，dummy.js：

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

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

问题：

如果我加载conflist.html（直接使用FF16.0.2和IE9，而不是通过 webserver），然后单击按钮，我收到一条错误消息： “ReferenceError：Dummy未定义”。从本质上讲，dummy.js不是读。
如果我将dummy.js移动到与html文件相同的文件夹中，并且在newpage.html中相应地修改路径，事情很好，我得到所有的输出。

想知道，为什么我会看到这种行为？当外部js文件放在另一个文件夹中并且给出相对路径时，为什么不加载外部js文件？

更新：我检查过，如果我将dummy.js放在html文件夹中的子文件夹中，这也有效。除非我遗漏了一些东西，否则看起来不可能在外面。

Answer 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>

Answer 2

将您的相对网址更改为绝对网址。这将确保您每次都引用正确的文件。

您的外部页面如下所示：

<!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/是您网域中的顶级目录。

Answer 3

我认为原因可能是你的js的相对路径。我发现如果你使用$ .mobile.changePage（）;只会加载目标页面中的内容，这意味着目标页面中的所有标题内容都将被忽略/未加载。当您在目标页面上引用js时，相对路径应基于目标html。并且“../”在这种情况下似乎不起作用。

JQM：$ .mobile.changepage没有加载外部.JS文件

3 个答案: