尝试在使用 $.mobile.changepage() 加载的页面中加载外部 JS 文件时,我遇到了一个奇怪的问题。
以下是我的目录结构:
|_ /html | |_ conflist.html | |_ 新页面.html |_ /常见 | |_ jquery-1.7.2.min.js | |_ jquery.mobile-1.2.0.min.js | |_ jquery.mobile-1.2.0.min.css |_ /平台 |_ 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,而不是通过网络服务器),然后单击按钮,我会收到一条错误消息:“ReferenceError: Dummy is not defined”。本质上,不读取 dummy.js。
- 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.