当我尝试在使用 $.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
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>
下一步，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.js 不是 读。
- 如果我将 dummy.js 移至与 html 文件相同的文件夹，并且 在 newpage.html 中相应地修改路径，一切正常，我 获取所有输出。
想知道为什么我会看到这种行为？为什么外部js文件放在其他文件夹中并且给出了相对路径却没有加载？
更新:我检查过，如果我将 dummy.js 放在 html 文件夹内的子文件夹中，这也有效。看起来就是不能把它放在外面，除非我错过了一些东西。
最佳答案
尝试将您的<script src="../platform/dummy.js"></script>进入头部而不是 body ......并且:你不需要 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>
关于javascript - JQM : $. mobile.changepage 未加载外部 .JS 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13283483/