It seems that Firefox treats any error that occurs in the window.onerror event handler as a fatal exception even if the exception is caught. The following code sample works as expected in IE, Chrome, and Safari. In Firefox, the call to the non-existent abc() method halts the execution immediately instead of executing the catch block and the remainder of the onerror handler.
Is this expected behavior in Firefox or am I doing something wrong?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.onerror = function() {
console.log('begin onerror');
try {
abc(); // create a runtime error by calling a method that doesn't exist
} catch(e) {
console.log('catch block');
}
console.log('end onerror');
};
$('#btn').click(function() {
xyz(); // create a runtime error by calling a method that doesn't exist
});
});
</script>
</head>
<body>
<form action="" name="frmEdit">
<input type="button" value="Test" id="btn" name="btn" />
</form>
</body>
</html>
As this testcase demonstrates, it's related to jQuery.
Replacing the jQuery dependency with the minimal code necessary to trigger this behavior will either explain this or make this easier to debug and fix on the Firefox side.
[edit] Thanks to jrotello, dmethvin, and Firefox developers, the underlying issue should be fixed in Firefox 14 (you can test it before it's released using http://nightly.mozilla.org/)
Related
I have a very simple script(setUser) which is called on click of a button.This script is working fine in chrome but in IE 11 i am getting a console error.
Another weird thing is i am getting that error only when dev tool is open.It works fine if devtool is not open.
Error is :-
SCRIPT5009: 'id' is undefined
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function setUser(eventType){
console.log(eventType);
}
</script>
</head>
<body>
<button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>
Simple Workaround for this is to declare a
var id; just below the script.But i need the proper documented reason why this doesnot work in ie11 but same works in chrome.And is a better solution than what i tried
Workaround :- by adding var id at the top
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var id;
function setUser(eventType){
console.log(eventType);
}
</script>
</head>
<body>
<button id="vish" onclick="setUser(id)" style="height:40px;width:200px">Click Me</button>
</body>
</html>
expected :-
when dev tool is open in ie11 and when we click the button we should get the console log as "vish"
actual result :-
SCRIPT5009: 'id' is undefined js error
id is simply undefined, as the error message says. If you declare it, the error is gone, but it won't behave like you expected. If you declare it, it exists with value undefined. You probably wanted
onclick="setUser(this.id)"
this.id means the button context, while simply id tries to find it in global context. In case of your error, id is not declared, whereas
var id; // or var id=undefined;
declares it, and leaves it undefined, so the browser at least knows it is a variable. By saying id is undefined Explorer means it is not declared.
I believe the reason is that the browser searches for variables and named elements (referenced by name or id attribute; this is not standard, but browsers do it), which actually doesn't exist in global context and are looked up by reference and Explorer obviously can't handle this situation. If it is declared as var, javascript knows it is not a named element reference.
Example below shows the non-standard behaviour: it should end with error test is not defined (it really is not), but browsers say hello.
<input id="test" value="hello">
<script>
alert(test.value);
</script>
The cause of it not working in IE11 is because you do not specify a doctype for the HTML document in the block of code that threw the error.
If I add <!DOCTYPE html> to the start of the HTML, as in the workaround you show; it works in IE11 as well for me, without adding the var id;
The exact reason is unknown to me, but without the doctype, IE will run the page in quirks mode. And that seems to mess up the determination of the function scope when the browser tries to parse onclick="setUser(id)" into valid JS code.
This would not happen if the doctype is correct and the page can hence be run in the correct mode.
This would also no happen if the browsers HTML engine did not have to parse the HTML string setUser(id) into valid JS code before it can be used. Hence it's not a common issue anymore since the standard these days is to not use inline event handler attributes on HTML tags.
So prefer explicit event binding with javascript when possible to not run into issues like this, where a totally unrelated part, the doctype, messes up your code.
Using onclick="setUser(this.id)" should work.
However, a cleaner workaround would be to do all the onclick handling in JavaScript:
onload = function() {
var buttons = document.getElementsByTagName("button");
for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
console.log(this.id);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="vish" style="height:40px;width:200px">Click Me</button>
<button id="vish2" style="height:40px;width:200px">Click Me 2</button>
</body>
</html>
I tried my code on chrome, opera, firefox and edge but it's not working. My onload code works perfectly, but onunload doesn't work on all. Do not know why?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="loaded()" onunload="unloaded()">
<script type="text/javascript">
function loaded(){
alert("The page loaded!");
}
function unloaded(){
alert("Come again!");
}
</script>
</body>
</html>
Some operations are not allowed on onunload event showing alert is one of them. Check this answer.
You can use below code to display a warning message to users.
window.onbeforeunload = function(e) {
return 'Bye now!';
};
when you invoke the unload function,the DOM is completely unload now.
So there can't show an alert window for you.
But you can see the log printed in the console if you use
---> console.info("Come again!");
My code is:-
<html>
<head>
<script>
function welcome()
{
alert("Successfully loaded");
}
function bye()
{
alert("Unload");
}
</script>
</head>
<body onload="welcome()" onunload="bye()">
</body>
when i execute this only the function for "onload()" is called. Can you tell me how to trigger "onunload()" event also...
It really depends on what browser you test it
The onunload event is supported in IE, Firefox, and Safari, but not supported properly in Chrome or Opera.
please try onbeforeunload
<body onload="welcome()" onbeforeunload="bye()">
</body>
https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload
My myclickHandler function works perfectly but when I go on to my error console I get this error:
document.getElementsByName("prequestion")[0] is undefined;
Below is my code
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
if(validation()){
openSessionPopup();
}
</script>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>
</form>
</body>
My question is what do I need to remove this error? because my function works does it matter if it shows an error in the error console?
Chances are you're loading the javascript before the DOM (or even possibly the HTML) has loaded properly.
For example, the following reproduces the same error as described in your question :
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
}
</script>
<input type="" name="prequestion" />
Whereas the following does not. The error is not present and the code works fine.
<input type="" name="prequestion" />
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
}
</script>
Trying to attach the event listener to an element which doesn't technically exist yet causes problems. You can check for the browser reporting the page has been loaded before attaching the event if needs be but be aware that browsers report this in different ways. Librarys such as jQuery provide useful means to test this such as $(document).ready(function(){});
Edit: I've just seen that you've added the relevant HTML too. It appears that this is in fact the case and the reason you're still seeing the expected behavior is because you're also using the onclick="" attribute on the input element. This is where the function is being called on click, and the event handler isn't being attached as you expect.
Edit #2: You also appear to be missing a closing } for your function. And I've now tested with your exact HTML and moving the script to just above the body tag resolves the error and correctly attaches the function to the click event.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" /></p>
</form>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
alert('test');
} // This was missing
</script>
</body>
I suspect that the problem is that there are no elements with the name attribute set to "prequestion".
If you're getting that error, then your script doesn't actually work, so you should fix it.
I'm running into an odd problem where window.addEventListener (or window.attachEvent) doesn't seem to be firing when called from within an if/else block. For example, say I have the following html and javascript files:
test.html
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="cache-control" CONTENT="no-store">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
var tst = new Tester();
if (window.addEventListener) {
window.addEventListener("load", tst.onloadFunc, false);
console.log("addEventListener in conditional");
} else if (window.attachEvent) {
window.attachEvent(window.attachEvent("onload", tst.onloadFunc));
console.log("addEvent in conditional");
}
//window.addEventListener("load", tst.onLoadFunc, false);
</script>
</head>
<body>
</body>
</html>
test.js
function Tester() {
this.onLoadFunc = function() {
console.log("in Tester");
}
}
If I visit test.html and fire up a javascript inspector, I see "addEventListener in conditional" logged. However, I do not see "in Tester" logged.
Now, if I uncomment the addEventListener line outside of the if/else, I do see "in Tester" logged.
Can someone explain why this is happening? Is there any way around it or a better way of accomplishing the same thing?
Javascript is case-sensitive.
You should pass tst.onLoadFunc instead of tst.onloadFunc as an argument to addEventListener.
Your capitalization of onLoadFunc is wrong in the conditional window.addEventListener call.