Firefox incompatibility? - javascript

http://ahmedstudio.za.pl/firefoxerror/
It works in chrome, opera but doesn't get along with Firefox.
The whole javascript thing is not applying.
This is directly in my javascript.js:
window.onload = function() {
todo("body", 50);
alert("alert!");
setTimeout(function () {
todo("body", 0);
}, 1000)
}
function todo(element, size) {
//blahblah
}

Even if it doesn't actually solve your problem I'd like to share my findings about replacing event handlers with invalid function calls. I've composed this little fiddle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery(function(){
$("body").on("load", function(){
$(this).append("Should not run")
});
});
</script>
</head>
<body onload="doesNotExist()">
</body>
</html>
Firefox, Explorer and Edge actually replace the <body> event handler. However, Chrome ignores the onload="doesNotExist()" and execute previous handler.
In the land of tag soup it's hard to decide which workaround is the correct one but it's definitively a bug that could explain your symptoms.

function load() {
//do stuff
}
and the appropriate
<body onload="load()"> </body>

This runs fine in me. I even tried to create a dummy page with this snippet but could not replicate it.Here is snippet.Since the snippet you shared does not contain jquery , i opt to use same code .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
window.onload = function(){
_todo({
a:'body',
b:50,
alertFrom:'window.onload'
});
setTimeout(function(){
_todo({
a:'body',
b:0,
alertFrom:'setTimeOut'
});
},1000);
};
function _todo(options){
var a = options.a;
var b = options.b;
var c=options.alertFrom
alert(c +" "+a +" "+b);
};
</script>
</body>
</html>
Also note that there is a importance of semicolon after a function.
Here are couple of snapshots

Related

JQuery: Using () => {} and function() syntax, latter works [duplicate]

This question already has answers here:
Javascript - arrow functions this in event handler?
(4 answers)
Closed 5 years ago.
Background
I'm just giving jQuery a go and for an hour, I could not hide an element using $([selector]).hide([milliseconds]), which in my sample code, is called when I click the element, in this case the anchor tag <a>. But I got it working in the end, but I don't understand why so. The only change I needed to make using the function keyword, instead, so this:
Note: Examples used this not "a", see edits
event => {
$(this).hide(2000);
}
into this
function(event){
$(this).hide(2000);
}
Question
Why does using function work and using an 'arrow' function doesn't? Is there a difference between the two?
My source code, for testing:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test{
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.10.2.js"></script>-->
</head>
<body>
jQuery
<script>
// $(document).ready(function () {
// // $("a").click(event => {
// // alert("Thanks for visiting!");
// // //prevents the opening of the link (what are the default events of other events types?)
// // event.preventDefault();
// // //Special Effects - http://api.jquery.com/category/effects/
// // });
// });
$("a").click(function(event){
event.preventDefault();
$( this ).hide(2000);
});
$("a").addClass("test");
</script>
</body>
</html>
Arrow function does not create a new scope tethered to this. So, to get around this, just use a normal function (like bellow). Alternatively, you could do $(event.currentTarget).hide(2000); inside your arrow function.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style>
a.test{
font-weight: bold;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="https://code.jquery.com/jquery-1.10.2.js"></script>-->
</head>
<body>
jQuery
<script>
$("a").click(function(event) {$(this).hide(2000)});
$("a").addClass("test");
</script>
</body>
</html>

HTML button not linking to JavaScript function

Hey guys just having an issue with my HTML button not actually running my javascript function when clicked on.
The HTML:
<html>
<head>
<meta charset="utf-8">
<title>PROJECT</title>
<script language="javascript" src="Hangman.js"></script>
</head>
<body>
<input id = "Begin" type = "button" value = "Play">
</body>
</html>
And here's the JS:
function start ()
{
document.getElementById("Begin").addEventListener("click",logic,false);
}
function logic ()
{
document.writeln("yo");
}
window.addEventListener("load", start, false);
Sorry if this is an amateur question, it just so happens I'm an amateur. Thanks you guys in advance!
check this jsfiddle
it is fixed
function start ()
{
document.getElementById("Begin").addEventListener("click",logic,false);
}
function logic ()
{
alert();
}
window.onLoad=start();

Cordova inappbrowser: executeScript on loadstart

Is it possible to executeScript() on loadstart event in Cordova inAppBrowser? Here is my standalone example I made to try to make it happen:
<!DOCTYPE html>
<html>
<head>
<title>Standalone Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
var iabRef = null;
function testFunction() {
iabRef.executeScript({
code: {'alert("It is alive! ALIVE!")'}
});
}
function onDeviceReady() {
iabRef = window.open('http://telegraph.co.uk', '_self', 'location=no', 'zoom=no', 'hardwareback=yes');
iabRef.addEventListener('loadstart', testFunction);
}
</script>
</head>
<body>
</body>
</html>
Doesn't work for me though. Config.xml allow origin is set to *. Any suggestions?
Thanks!
Yes, it possible to executeScript() on loadstart.Remove {} from alert part as follows:
function testFunction() {
iabRef.executeScript({
code: 'alert("It is alive! ALIVE!");'
});
}
Hope this works
After a little bit of wandering I found that changing "_self" to "_blank" makes it work. So:
iabRef = window.open('http://telegraph.co.uk', '_blank', 'location=no', 'zoom=no', 'hardwareback=yes');

AngularJS including javascript in HTML

Could someone explain why this is working:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appLogin">
<head>
<script src="../Scripts/jquery-2.1.0.min.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Global/config.js"></script>
</head>
<body>
</body>
</html>
But when I try to add my config.js script like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appLogin">
<head>
<script src="../Scripts/jquery-2.1.0.min.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script>
var element1 = document.createElement("script");
element1.src = "../Global/config.js";
document.head.appendChild(element1);
</script>
</head>
<body>
</body>
</html>
I get:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=appLogin&p1=Error%….c%20(http%3A%2F%2Flocalhost%3A49723%2FScripts%2Fangular.min.js%3A17%3A431)
appLogin is my angular module defined in config.js. In both cases when I use developer tools in my browser I see that the script is loaded but for some reason the second approach is not working?
the second example tries to download and create the module asynchronously.
so, there is a chance that 'appLogin' does not yet exist when angular tries to bootstrap.
unlike the first example, browsers wait for the script tag to finish. so, the document's ready event is not yet fired.
i can remember, that auto-bootstrap begins when the ready event is fired.
I got it now.
As all of you mentioned, the problem is that appLogin does not exist yet.
I solved my problem using document.readyState():
<script type="text/javascript">
function getConfig() {
var element1 = document.createElement("script");
element1.src = "../config.js";
document.body.appendChild(element1);
}
if (document.readyState === "complete") { getConfig(); }
</script>
Thank you guys. :)
you can try something like this
<script type="text/javascript">
function getConfig() {
var element = document.createElement("script");
element1.src = "../Global/config.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", getConfig, false);
else if (window.attachEvent)
window.attachEvent("onload", getConfig);
else window.onload = getConfig;
</script>

Why is nothing logged?

I tried to make it so that a string gets logged in the console every time I click on a button. However, nothing is logged. Why so?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function log_a_string_plz() {
console.log("some string i want logged");
}
document.onload = function() {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
</script>
<title>logging a string test</title>
</head>
<body>
<button id="my_wonderful_button">log a string!</button>
</body>
</html>
I've tried changing event handlers to no avail.
Try:
window.onload = function () {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
jsFiddle example

Categories

Resources