why the following code works in safari but not in IE6? - javascript

why the following code works in safari but not in IE6 ? It opens the window but doesnt trigger the alert.
<script>
function fnOpenChild()
{
var openChild = window.open('child.htm');
openChild.onload = function() {
alert("im the child window");
};
}
</script>
<input type="button" onClick="fnOpenChild()">
Thank You

try it!
to move onload event to child.htm

I know this isn't actually an answer, but I really suggest you don't use IE6 anymore, and just go with IE8+.
Afterwards, add code that will warn the user that he/she is using an out-dated web browser. You can detect the browser version using navigator.appVersion
If you want to know why you or anyone else shouldn't use it anymore:
http://www.google.nl/#hl=nl&source=hp&biw=1024&bih=837&q=Why+IE6+must+die
Edit: Aah, I guess you fixed it, but I still suggest you take a look at the link above. :)

IE6 has some... rather interesting issues and it requires some workarounds. Have you tried googleing, "IE6 window onload"? http://www.webdeveloper.com/forum/showthread.php?t=183578 seems to have a working suggestion.

Try applying onreadystatechange as well. IE6 has some issue with onload.
openChild.onload = openChild.onreadystatechange = function() { ...

There could be two possible work-arounds:
1. Move the onload script ot the childwindow
**child.htm**
<html>
<script type="text/javascript">
window.onload = function(){
alert('im the child window');
}
</script>
<body>
....
</body>
</html>
2. Declare a function in the opener window and call it on the the child's onload
**parent.htm**
<script type="text/javascript">
function forChildWindow(params){
alert('im the child window' + params);
}
</script>
**child.htm**
<html>
<script type="text/javascript">
window.onload = function(){
var load = window.opener.forChildWindow;
var someparams = " param1";
if(load) {
load(someparams);
}
}
</script>
<body>
....
</body>
</html>

Related

JavaScript Code is not working in IE8

The below piece of code is not working in IE8, but, it is working perfectly on FireFox and Google Chorome, Even, there is no error thrown by IE8, but, output is not coming. Any Idea? What is the actual problem?
<html>
<head/>
<body>
<script type="text/javascript">
(function(){
var inpEle = document.createElement("div");
inpEle.setAttribute("id", "div1");
var texEle = document.createTextNode("This is my Sample Para. I am testing it again my own level that prove How i am capable of.");
inpEle.appendChild(texEle);
document.body.appendChild(inpEle);
})();
(function(){
var inpEle1 = document.createElement("input");
inpEle1.setAttribute("type", "button");inpEle1.setAttribute("value", "Show");inpEle1.setAttribute("onclick", "Show()");
document.body.appendChild(inpEle1);
var inpEle2 = document.createElement("input");
inpEle2.setAttribute("type", "button");inpEle2.setAttribute("value", "Hide");inpEle2.setAttribute("onclick", "Hide()");
document.body.appendChild(inpEle2);
})();
</script>
<script type="text/javascript">
window.onload= function(){
document.getElementById('div1').style.display="none";
}
Show = function (){
document.getElementById('div1').style.border="2pt solid green";
document.getElementById('div1').style.display="";
}
Hide = function(){
document.getElementById('div1').style.border="";
document.getElementById('div1').style.display="none";
}
</script>
</body>
</html>
You may not be able to use document.body.appendChild() in IE8 before the </body> tag has been parsed and your code is trying to append to the body while it is still being parsed. Early versions of IE like IE6 might just abort (e.g. literally crash) when you did this. Later versions (like IE8) will just simply ignore your request.
You can use document.write() to add content while the body is being parsed.
You can postpone calling your code until after the body has finished loading and parsing (such a <body onload="xxx()"> handler) or when an event such as window.onload fires.
You can appendChild() to an element that has finished parsing (something that is before your script).
The simplest solution is probably to put a <div id="container"></div> in the body before your script and append to that instead of the body or put your code in a function and have the body onload event call your function.
See this article for description of the issue.
don't use setattribute use anonymous function for events
inpEle1.onclick = function() {
Show();
};
Also it works in IE tester in IE8, but not IE7, do you have it using IE7 compatibility
Go to Internet Options - Security Tab - Internet - click on the "Custom" button then scroll down to the Miscellaneous section."Allow script-initiated windows without size or position constraints" Find "Active Scripting" then check enable.
I noticed than element.style.display doesn't always work with IE8.
Here is a method to improve compatibility :
if (element.style.setAttribute)
element.style.setAttribute("display", value);
else
element.style.display = value;
Best regards,

Move DOM Node to Popup Window

I am trying to move a DOM node from the "root" page to a new pop-up that is created via window.open(). Here is the code I am using.
var win = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
win.document.close();
setTimeout(function () {
var el = win.document.createElement("table");
el.innerHTML = table.html();
win.document.body.appendChild(el);
}, 40);
It works in Chrome, but in IE8, I receive the following error: "Unknown runtime error."
I've also tried it this way:
var p = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
setTimeout(function () {
p.document.body.appendChild(table.clone(false)[0]);
}, 100);
Doing it this way, I receive "No such interface supported" in IE8. Again, Chrome works fine.
Does anyone have a way to do what I'm trying to achieve?
Here is the HTML for the pop-up window just for the sake of completeness:
<!DOCTYPE html>
<html>
<head>
<title>Print Results</title>
</head>
<body>
</body>
</html>
I tested your code on IE9 ( and IE8/7 browser mode).
Instead of el.innerHTML = table.html();
using jquery $(el).html(table.html()); fixed the issue.
To be able to use iframes and new windows, you should initialise them with addres: about:blank, before you write() to them. Also note that loading/opening the window/frame takes time, so you cannot write to them at right away. set a timeout, or check onload.
Please see this answer for more info.
Good luck!

Open a window behind the current window using Javascript/jQuery

I want to open a window on click, but I want to open it behind the current window, or when the new window opens it should minimize itself. I have made a function but it actually did not work.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function wn(){
var mm=window.open('http://www.google.com','newwindow','width=200, height=200', "_blank");
}
</script>
</head>
<body>
click
</body>
EDIT
Parent window HTML
<script language="JavaScript" type="text/javascript">
function openPopUP() {
window.open('mywindow.html','NewWin',
'toolbar=no,status=no,width=350,height=135')
}
</script>
<body onLoad="openPopUP();">
or
Click to open popup
Child Window i.e PopUp Window File
The below script should be in the child window. The child window will open and will automatically be hidden after 1 second. The value 1000 specified in the setTimeout method is the duration in milliseconds for which the child window will be open. You can increase this timeout duration if you want the child window to be open longer.
<body onLoad="setTimeout('window.blur()', 1000);"
onFocus="setTimeout('window.blur()', 1000);">
This might work for you: Add this line of code in the onload event of your child window...
window.parent.opener.focus();
popunder = window.open('http://www.google.com','newwindow','width=200, height=200', "_blank");
popunder.blur();
window.focus();
Try something like this.
window.open(url);
self.focus();
Although it causes security issues, but I guess one of the way to do it is :
popup = window.open('http://www.google.com', 'newwindow', "_blank");
popup.blur();
This will work only in IE. For other browsers you need to set the security level to minimum.
popunder = window.open('your_site_url','newwindow','width=500, height=500', "_blank");
popunder.blur();
window.focus();
or simply
window.open(url); self.focus();
If you want real popunder capabilities there is a great jQuery plugin to handle it at https://github.com/hpbuniat/jquery-popunder
It uses a combination of various techniques to accomplish it across various browsers. Not all browsers can handle it the same but the results are very similar.
Current browser compatibility is listed as: (last updated April '18)
Mozilla Firefox 3-57
Google Chrome 10-62
Microsoft Internet Explorer 6-11 -- MSIE 6-8 requires jquery 1.x
Apple Safari 5
Finally , it was working for me only in chrome browser. Add this code in Parent window:
<script type="text/javascript" language="javascript">
function popWindow()
{
var popupo = window.open("popup.html", 'newwindow','toolbar=no,status=no,width=650,height=450', "_blank");
popupo.moveTo(0, 0);
popunder.blur();
window.focus();
}
</script>
Add this code in child window body onload event as
<body onLoad="setTimeout('window.blur()', 1000);" onFocus="setTimeout('window.blur()', 1000);">
Insted of a new window, we can create an iframe and open your url in the iframe and then make the iframe display none also print the iframe content if you want.
var ifrmId = 1;
jQuery(document).on('click', '.myFunc', function(e) {
var url = 'www.xyz.com';
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", url);
ifrm.setAttribute("id", ifrmId);
document.body.appendChild(ifrm);
window.frames[ifrmId].focus();
window.frames[ifrmId].contentWindow.print();
document.getElementById(ifrmId).style.display = "none";
ifrmId = ifrmId + 1;
});

JavaScript event window.onload not triggered

I've got the following code in a website:
window.onload = resize;
window.onresize = resize;
function resize(){
heightWithoutHeader = (window.innerHeight - 85) + "px";
document.getElementById("main-table").style.height = heightWithoutHeader;
document.getElementById("navigation").style.height = heightWithoutHeader;
}
The onresize works fine, but the onload event never fires. I've tried it in Firefox and Chrome and neither of them works.
Thank you for your help and go for the reputation! ;D
I think what's probably happening here is that your window.onload is being overridden later, check to make sure that it's not via things like <body onload="">
You can check this by alert(window.onload) in your re-size function, to see what's actually attached there.
I had this happen when I added 3rd party jQuery code we needed for a partner. I could have easily converted my antiquated window.onload to a jQuery document ready. That said, I wanted to know if there is a modern day, cross browser compatible solution.
There IS!
window.addEventListener ?
window.addEventListener("load",yourFunction,false) :
window.attachEvent && window.attachEvent("onload",yourFunction);
Now that I know ... I can convert my code to use the jQuery route. And, I will ask our partner to refactor their code so they stop affecting sites.
Source where I found the fix --> http://ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/
Move the window.onload line to the end of the javascript file or after the initial function and it will work:
function resize(){
heightWithoutHeader = (window.innerHeight - 85) + "px";
document.getElementById("main-table").style.height = heightWithoutHeader;
document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.onload = resize;
window.onresize = resize;
But it's a best practice if you don't replace the onload too. Instead attach your function to the onload event:
function resize(){
heightWithoutHeader = (window.innerHeight - 85) + "px";
document.getElementById("main-table").style.height = heightWithoutHeader;
document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.addEventListener ?
window.addEventListener("load",resize,false)
:
window.attachEvent && window.attachEvent("onload",resize);
That worked for me and sorry for my english.
This answer is for those who came here because their window.onload does not trigger.
I have found that for the following to work
window.onload = myInitFunction;
or
window.addEventListener("load", myInitFunction);
the referred function (myInitFunction in this case) must reside (or be defined) within the same <script>-element or in a <script>-element that occurs before the <script>-element where the onload event is established. Otherwise it will not work.
So, this will not work:
<html>
<head>
<title>onload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.addEventListener("load", myInitFunction)
</script>
<script>
function myInitFunction() {
alert('myInitFunction');
}
</script>
</head>
<body>
onload test
</body>
</html>
But this will work:
<html>
<head>
<title>onload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function myInitFunction() {
alert('myInitFunction');
}
</script>
<script>
window.addEventListener("load", myInitFunction)
</script>
</head>
<body>
onload test
</body>
</html>
And this will work (since we only have one <script>-element):
<html>
<head>
<title>onload test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
window.addEventListener("load", myInitFunction)
function myInitFunction() {
alert('myInitFunction');
}
</script>
</head>
<body>
onload test
</body>
</html>
If you for some reason have two <script>-elements and cannot (or do not want to) merge them and you want the onload to be defined high up (i.e. in the first element), then you can solve it by
instead of writing
window.onload = myInitFunction;
you write
window.onload = function() { myInitFunction() };
or, instead of writing
window.addEventListener("load", myInitFunction);
you write
window.addEventListener("load", function() { myInitFunction() });
Another way to solve it is to use the old
<body onload="myInitFunction()">
For me, window.onload was not working when wrote inside script type="text/javascript tag.
Instead, needed to write the same in script language="Javascript" type="text/javascript tag and it worked fine.
In my case
window.addEventListener("load", function() {
myDropdownFunction();
});
surprisingly (for me) didn't help (I tried to set a value for dropdown when user uses browser backwards button). And window.onload didn't work for the reason Nick Craver♦ explained here above - it was overridden by <body onload="...">.
So I tried this using jQuery and it worked like a charm:
$(window).on('pageshow', function() {
alert("I'm happy");
});
This works for me, i think your problem is somewhere else:
function resize(){
var tester = document.getElementById("tester"),
html = tester.innerHTML
tester.innerHTML = html + "resize <br />"
}
window.onload = resize;
window.onresize = resize;
you can test it yourself here:
http://jsfiddle.net/Dzpeg/2/
are you sure its the only event called onLoad ? Maybe an other onLoad event creates a conflict
put "_blank" as the target param has solved in my case
let wind = open(url,"_blank","options here")
wind.onload = .... // works fine now
Just in case someone finds it useful, I was calling twice the function, instead of once:
window.onload = function() {...}
In my case the problem was that my script was being loaded dynamically by another one (e.g.: with $.getScript()) and when it ran the window 'load' event had already fired.
My solution:
if (
document.readyState === "complete" ||
document.readyState === "interactive"
) {
// load event already fired, this may happen if this script is loaded dynamically.
// Run immediately.
execOnLoad();
} else {
// SEE: https://stackoverflow.com/questions/2810825/javascript-event-window-onload-not-triggered
window.addEventListener
? window.addEventListener("load", execOnLoad, false)
: window.attachEvent && window.attachEvent("onload", execOnLoad);
}
This will be work when you call the "window.onload" next to the function resize()
If it's really in that order, it's definitely not going to work. You can't assign a function to an event handler before the function itself is declared.

Giving a child window focus in IE8

I'm trying to launch a popup window from a Javascript function and ensure it has focus using the following call:
window.open(popupUrl, popupName, "...").focus();
It works in every other browser, but IE8 leaves the new window in the background with the flashing orange taskbar notification. Apparently this is a feature of IE8:
http://msdn.microsoft.com/en-us/library/ms536425(VS.85).aspx
It says that I should be able to focus the window by making a focus() call originating from the new page, but that doesn't seem to work either. I've tried inserting window.focus() in script tags in the page and the body's onload but it has no effect. Is there something I'm missing about making a focus() call as the page loads, or another way to launch a popup that IE8 won't hide?
The IE8 is not allowing this feature because of security issues
Windows Internet Explorer 8 and later. The focus method no longer brings child windows (such as those created with the open method) to the foreground. Child windows now request focus from the user, usually by flashing the title bar. To directly bring the window to the foreground, add script to the child window that calls the focus method of its window object
http://msdn.microsoft.com/en-us/library/ms536425%28VS.85%29.aspx
You might try this. Not sure if it will work though>
var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;
function setFocusEvents() {
active_element = document.activeElement;
if (isIE) {
document.onfocusout = function() { onWindowBlur(); }
document.onfocusin = function() { onWindowFocus(); }
} else {
window.onblur = function() { onWindowBlur(); }
window.onfocus = function() { onWindowFocus(); }
}
}
function onWindowFocus() {
hasFocus = true;
}
function onWindowBlur() {
if (active_element != document.activeElement) {
active_element = document.activeElement;
return;
}
hasFocus = false;
}
Yeah I can't test this on IE8 at the moment either but have a play with this document.ready method instead of the body.onload:
test1.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function openNewWindow()
{
window.open("test2.html", null, "height=200, width=200");
}
</script>
</head>
<body>
<a onclick="openNewWindow()">Open</a>
</body>
</html>
test2.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ window.focus(); });
</script>
</head>
<body>
<div id="container" style="background:blue;height:200px;width:300px">
</div>
</body>
</html>
I figured out what the issue was - turns out the reason running window.focus() in the onload wasn't working was because the first window.open().focus() call caused it to start flashing in the background, and after that any subsequent focus calls wouldn't work. If I don't try to focus it from the calling window but only from the popup it comes to the front normally. What an annoying "feature"...
The problem is the Window.focus method does not work in Internet Explorer 8 (IE 8). It's not a pop up blocker or any settings in IE 8 or above; it's due to some security I believe to stop annoying pop-ups being brought back up to the top.
after a lot of hair pulling and googling i found the following:
Microsoft suggest updates but this doesn't appear to work plus how do they seriously expect me to ask all of the users my site to update their machines!
so I've come up with this work around or fix.
What i do with the window is:
first I check if the window is open
if it's open, close it
open a new fresh version of the window on top.
javascript code to include at header or in separate file:
function nameoflink()
{
var nameofwindow = window.open('pagetolinkto.htm','nameofwindow','menubar=1,resizable=1,width=350,height=250');
if (nameofwindow) {
nameofwindow.close();
}
window.open('pagetolinkto.htm','nameofwindow,'menubar=1,resizable=1,width=350,height=250');
return false;
}
link on the page:
Click Here to go to name of link
Tested in MS Windows 7 with IE8 not sure of exact version.

Categories

Resources