JQM：$ .mobile.changepage无法加载外部.JS文件

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，而不是通过Web服务器），然后单击该按钮，则会收到错误消息：“ ReferenceError：未定义虚拟”。 本质上，不会读取dummy.js。
如果我将dummy.js和html文件移到同一文件夹，然后在newpage.html中相应地修改路径，则一切正常，我将获得所有输出。

想知道为什么我会看到这种行为？ 将外部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

将您的相对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/是您域中的顶级目录。

Answer 3

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

JQM：$ .mobile.changepage无法加载外部.JS文件

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-11-08 14:05:04

解决方案2
0 2012-11-08 20:27:40

解决方案3
0 2013-09-03 16:19:14

JQM：$ .mobile.changepage无法加载外部.JS文件

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-11-08 14:05:04

解决方案2 0 2012-11-08 20:27:40

解决方案3 0 2013-09-03 16:19:14

解决方案1
1 已采纳 2012-11-08 14:05:04

解决方案2
0 2012-11-08 20:27:40

解决方案3
0 2013-09-03 16:19:14