JQM：$ .mobile.changepage无法加载外部.JS文件
[英]JQM: $.mobile.changepage not loading external .JS file
问题描述
I am having a weird problem when trying to load an external JS file in a page which is loaded using $.mobile.changepage(). 
尝试在使用$ .mobile.changepage（）加载的页面中加载外部JS文件时遇到奇怪的问题。
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. 这是conflist.html和newpage.html的代码。
First, conflist.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>
Next, newpage.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>
Finally, dummy.js: 最后，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". 如果我加载conflist.html（直接使用FF16.0.2和IE9，而不是通过Web服务器），然后单击该按钮，则会收到错误消息：“ ReferenceError：未定义虚拟”。 Essentially, dummy.js is not read. 本质上，不会读取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. 如果我将dummy.js和html文件移到同一文件夹，然后在newpage.html中相应地修改路径，则一切正常，我将获得所有输出。
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? 将外部js文件放置在另一个文件夹中并给出相对路径后，为什么不加载它呢？
Update: I checked and this also works if I put dummy.js in a subfolder inside the html folder. 更新：我检查了一下，如果将dummy.js放在html文件夹内的子文件夹中，这也可以工作。 Just can't have it outside it seems, unless I am missing something. 似乎无法拥有它，除非我错过了一些东西。
3 个解决方案
解决方案1
1 已采纳 2012-11-08 14:05:04
try to put your <script src="../platform/dummy.js"></script> into the head instead of the body... and: you do not need type="text/javascript" charset="utf-8" anymore... 尝试将您的<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>
解决方案2
0 2012-11-08 20:27:40
Change your relative URLs to absolute ones. 将您的相对URL更改为绝对URL。 This will make sure you are referencing the correct file every time. 这将确保您每次都引用正确的文件。
Your external page would look like this for example: 您的外部页面如下所示：
<!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>
Where /base/ is a top-level directory on your domain. /base/是您域中的顶级目录。
解决方案3
0 2013-09-03 16:19:14
I think the reason might be the relative path of your js. 我认为原因可能是您的js的相对路径。 I found that if you are using $.mobile.changePage(); 我发现如果您使用的是$ .mobile.changePage（）; only contents in the target page between the will be loaded, which means all the header content in target page will be ignored/not loaded. 将仅加载目标页面之间的目标页面中的内容，这意味着将忽略/不加载目标页面中的所有标题内容。 And when you reference js in the on your target page, the relative path should be base on the target html. 而且，当您在目标页面上引用js时，相对路径应基于目标html。 and the "../" seems not working in this case. 在这种情况下，“ ../”似乎不起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.