admin管理员组文章数量:1329324
Hai i am new in phonegap and ratchet framework.I am trying to load external script with push.js. Here is my js file contents
function init(){
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
alert("device ready for use");
}
var checkPage = function(){
alert("push");
var scriptName;
var scriptsList = document.querySelectorAll('script.js-custom'); // Add a "js-custom" class to your script tag
for (var i = 0; i<scriptsList.length;i++) {
// Handle scripts in separate files by assigning the script file name to its id.
// We save it in a variable because the ".done" callback is asynchronous.
scriptName = scriptsList[i].id; // IMPORTANT: Only one loadable script per page!
$.getScript("js/" + scriptName)
.done(function (script, textStatus) {
eval(script);
alert("ok");
})
.fail(function(){
alert("error");
});
}
};
window.addEventListener('push', checkPage);
}
Here is my html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the piled Ratchet CSS -->
<link href="css/ratchet.min.css" rel="stylesheet">
<!-- Include the piled Ratchet JS -->
<script src="js/ratchet.min.js"></script>
<script src="js/jquery.js"></script>
<script src="cordova.js"></script>
</head>
<body onload="init()">
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="two.html">
<strong>Another page</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="/">
<strong>Ratchet on Github</strong>
</a>
</div>
</div>
Here is my two.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto
<link rel="stylesheet" href="//fonts.googleapis/css?family=Roboto:400,500,700"> -->
<link rel="stylesheet" href="ratchet.min.css">
<script src="ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">Two</h1>
</header>
</body>
<div class="content">
<script src="js/sample.js" class="js-custom" id="sample.js"></script>
</div>
</html>
But i run the project i get
Uncaught ReferenceError: CustomEvent is not defined at file:///android_asset/www/js/ratchet.min.js:10
please help me.
Hai i am new in phonegap and ratchet framework.I am trying to load external script with push.js. Here is my js file contents
function init(){
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady(){
alert("device ready for use");
}
var checkPage = function(){
alert("push");
var scriptName;
var scriptsList = document.querySelectorAll('script.js-custom'); // Add a "js-custom" class to your script tag
for (var i = 0; i<scriptsList.length;i++) {
// Handle scripts in separate files by assigning the script file name to its id.
// We save it in a variable because the ".done" callback is asynchronous.
scriptName = scriptsList[i].id; // IMPORTANT: Only one loadable script per page!
$.getScript("js/" + scriptName)
.done(function (script, textStatus) {
eval(script);
alert("ok");
})
.fail(function(){
alert("error");
});
}
};
window.addEventListener('push', checkPage);
}
Here is my html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Include the piled Ratchet CSS -->
<link href="css/ratchet.min.css" rel="stylesheet">
<!-- Include the piled Ratchet JS -->
<script src="js/ratchet.min.js"></script>
<script src="js/jquery.js"></script>
<script src="cordova.js"></script>
</head>
<body onload="init()">
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar bar-nav">
<h1 class="title">Ratchet</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<div class="card">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right" href="two.html">
<strong>Another page</strong>
</a>
</li>
<li class="table-view-cell">
<a class="push-right" href="https://github./twbs/ratchet/">
<strong>Ratchet on Github</strong>
</a>
</div>
</div>
Here is my two.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto
<link rel="stylesheet" href="//fonts.googleapis./css?family=Roboto:400,500,700"> -->
<link rel="stylesheet" href="ratchet.min.css">
<script src="ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">Two</h1>
</header>
</body>
<div class="content">
<script src="js/sample.js" class="js-custom" id="sample.js"></script>
</div>
</html>
But i run the project i get
Uncaught ReferenceError: CustomEvent is not defined at file:///android_asset/www/js/ratchet.min.js:10
please help me.
Share Improve this question edited Sep 13, 2014 at 18:13 Mo. 27.5k36 gold badges166 silver badges232 bronze badges asked Aug 30, 2014 at 7:16 shamon shamsudeenshamon shamsudeen 5,85820 gold badges74 silver badges144 bronze badges2 Answers
Reset to default 8It's because window.CustomEvent is missing in you WebView implementation.
Add this Polyfill and it works every times. I found the solution on Mozilla Developer Network:
/*
* Polyfill for adding CustomEvent
* see : https://developer.mozilla/fr/docs/Web/API/CustomEvent
*/
if (!window.CustomEvent) { // Create only if it doesn't exist
(function () {
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
}
You do not have cordova in your second html file. When you load two.html, your browser destroys the previous page and all the scripts associated with it. You should do everything in single page, I suggest using an mvvm framework such as angularjs, emberjs etc.
So, to be exact, your second html does not have cordova, so deviceready is never fired for that file. However, for the first html, you have deviceready and ratchet references. But, in there, you don't have your sample.js reference with js-custom. So, inside deviceready (when in first html), your ratchet is plaining about missing js-custom reference.
本文标签： javascriptUncaugth reference error custom event not defind in the file ratchetStack Overflow
版权声明：本文标题：javascript - Uncaugth reference error custom event not defind in the file ratchet - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742274247a2444890.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论