IE8 strange behavior, my problem or bug? - javascript

OK guys this is intreting,
I'm testing this page
http://static.nemesisdesign.net/demos/ie8-strange/test.html
on IE8 / windows XP.
This is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
</body>
</html>
If I open this page with IE8 I get an error.
If I change the code of the script to:
<script>
// note that I added var prefix
var thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
It works fine.
This happens only on IE 7/8, didn't test it on IE6.
What do you think?
Does it happen to you also? Or is it just my browser that has gone crazy?
Addition
You're saying that is just not using the var prefix that cause the error?
I'm sorry guys but you're wrong, you didn't take time to test the code.
I uploaded a test2 page
http://static.nemesisdesign.net/demos/ie8-strange/test2.html
with the follwing cocde
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test 2</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisdoesntgiveanyerror = 'test';
alert('This alert will be fired correcly');
</script>
</body>
</html>
That works fine.
So what is actually causing the error? The variable name without the var prefix having the same name as the ID of the DIV element.
Isn't this strange?

May be the answers to this SO-question can help?

You should always precede your variable declarations with var to specify their scope or you might observe inconsistent behavior between different browsers.

use var to declare variables instead of just plugging their name

I'd say the JavaScript interpreter in IE is slightly stricter than on FireFox and others, meaning the script returns an error when it comes to the variable definition line. Putting var in will ensure it actually is a variable.
It's very good practice to declare all your variables with var
James
EDIT
I can't get to IE at the moment, but I can recommend you change your <script> tag to <script type="text/javascript">.

Related

Calling a javascript function in a document created with document.write

I have a web page with a button. The click code is:
var html = ...html string containing visual and script elements...
var view = window.open();
view.document.write(html);
view.init(<parameters>); // see next code block
the html content is:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="id1"></div>
<script>
function init(<parameters>) {
...work...
}
</script>
</body>
</html>
The problem is with the init function call in chrome: all good if I am in IE, but in chrome I get "init function not defined" exception.
How should I do to get this working in all browsers? Of course I am looking for a solution that doesn't require a server round trip.
IM a noob so idk if this is exaclty true but i have read that ie allows you to do alot more then chrome or firefox. It might be one of those example where ie will let you do something.
using document.write does in fact work when it comes to create the page I want. Problem is when I want to call a function defined in a javascript block inside that page. Different browsers give different results so I guess this is a matter not completely standardized yet. There are posts in the internet about this, but I couldn't find a clear and common answer.
I then solved my impasse with a workaround. The initial markup contains now placeholders for the parameters:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="id1"></div>
<script>
(init = function () {
var parameter1 = ${{placeholder1}}
var parameter2 = ${{placeholder2}}
...
...work...
})();
</script>
</body>
</html>
The creating code, then, replaces the placeholders with actual values:
var html = ...html string containing placeholders...
html = html.replace("${{placeholder1}}", actual1);
html = html.replace("${{placeholder2}}", actual2);
...
var view = window.open();
view.document.write(html);
Now the init function is called in the same page context, and this works in Chrome as well.
It is not possible to write to a new window if its not on the same domain. What I suggest is that you can open an iframe an work inside that.
How to write to iframe
How to write to page on same domain

Why the Javascript does not run?

I am a newbie in web development and tried my hand the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Generic Page </title>
<script type="text/javascript">
setTimeOut(wakeUpUser, 5000);
function wakeUpUser() {
alert("Time to make life interesting");
}
</script>
</head>
<body>
<h1>Just a generic heading </h1>
<p>Just a normal paragraph</p>
</body>
</html>
But the script does not run only a boring static HTML page.I am following the HeadFirst Javascript Programming.Is the book wrong on this example?
You have a typo in your JavaScript. setTimeout should be written with a small "o".
This is the Script error in your code, modify the "SetTimeout" to an actual case.
I have attached both the result of your code and Bug Fixed code results, where SetTimeout code fix suggested works fine.
setTimeout(wakeUpUser, 5000);
Your Code Before Fix:
Result After Bug Fix:
Just a super small typo in your code, instead of 'setTimeOut', it needs to be a lowercase 'O', so 'setTimeout'. Here's the complete snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Generic Page </title>
<script type="text/javascript">
setTimeout(wakeUpUser, 5000);
function wakeUpUser() {
alert("Time to make life interesting");
}
</script>
</head>
<body>
<h1>Just a generic heading </h1>
<p>Just a normal paragraph</p>
</body>
</html>
I think you much call setTimeout use o insteh of O after declare function :) ... If you don't have jQuery library. try to use setInterval function :) more exaple
http://www.w3schools.com/jsref/met_win_setinterval.asp
Try moving the setTimeout to be after the function is declared.
Your browser's developer tools should show you any errors encountered. Specifically the 'console'.
Happy coding!
Edit: see also the other answers about the small o in setTimeout

How to display variables from external JavaScript in HTML. Internet Explorer 7

I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it

Page has two scripts. One runs on all browsers. One fails on IE7.

I'm no js expert but I've minimised my faulty script and tried to localise the fault without success. You can find the actual page at www.trinitywoking.org.uk. but my minimal test case is
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>MinTestCase</title>
<script>window.onload = function () { // Don't run script until page is loaded
var votd = new Array();
votd[129]="Mount Sinai was all smoke because God had come down on it as fire.";
// Prepare today's string for display
document.getElementById("keyverse").innerHTML="<p> " + votd[(129)] + "</p> ";
}
</script>
</head>
<body>
<h1>Target paragraph follows </h1>
<p id="keyverse">
</p>
</body>
</html>
This runs and displays correctly on all browsers except IE lte 8.
A second script runs on all browsers so it doesn't look like a permissions issue.
I'll be very grateful for any help with this.
Thanks.
Remove the <p> tags in document.getElementById() line:
document.getElementById("keyverse").innerHTML=votd[(129)];
There are already tags where you try to edit the innerHTML. IE is a very picky browser.

Not setting focus to text field in Firefox

I faced a very interesting issue.
I'm trying to set the focus on a input field using Javascript (no jQuery, I tried that also but not worked) using window.onLoad.
Just take a look at this fiddle : setFocusOnLoad
It's working fine in chrome browser but not in Firefox. Is there any issue in Firefox? How can I resolve it.
Edited:
Here is the code I copied in html file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function onloadFocus(){
var name = document.getElementById('name');
// name.value='window.onload called';
name.focus();
}
window.onload=onloadFocus();
</script>
</head>
<body>
<div><input type='text' value='' id='name' name='name'></div>
</body>
</html>
Try adding a slight delay:
function onloadFocus(){
setTimeout(function() {
document.getElementById('name').focus()
}, 10);
}
Update jsFiddle
You must wrap the function-call into a function, otherwise it will be called immediately, not onLoad(the input is still unknown at this time):
window.onload=function(){onloadFocus();}
you should use window.onload=onloadFocus; instead of window.onload=onloadFocus(); because in case of window.onload=onloadFocus(); onloadFocus will run immediately and at that time input field may not be available.
jsfiddle
I got the solution for it. If you want to focus in Firefox. Write the focus function at the starting of the script tag.
<script type="text/javascript">
document.getElementById('name').focus();
// rest of the code here.
</script>
Hope this will help you.

Categories

Resources