Trying to run a following simple code on IE11 browser:
<!DOCTYPE html>
<html>
<head>
<title>Popup Example</title>
<script>
function ButtonClick2() {
var thewin = window.open("http://www.google.com",'thewin','width=400, height=420,status=no');
window.thewin.focus();
}
</script>
</head>
<body>
<button onclick="ButtonClick2()">Click Me!</button>
</body>
</html>
ISSUE:On IE11 it gives the error statement "Unable to get property 'focus' of undefined or null reference"
This answer's late, but I thought that I'd post it just in case somebody came across this question in the future.
According to the answer here: https://stackoverflow.com/a/7025648/1600090,
and my own experience, one possible cause could be that you're trying to open a window in a different internet zone for which Protected Mode is enabled. By default, IE11 enables Protected Mode for the Internet and Restricted zones but disables it for Local Intranet and Trusted Sites. So, for example, if your page (and/or site) are running in your Local Intranet zone and you're trying to open a new window in the Internet zone, window.open is going to return a null reference. If the page/site which is launching the new window is in the Internet zone, in my experience, window.open will return a reference. So, #ssut's example in jsfiddle is going to work because jsfiddle.com and google.com are probably both in the same zone (I'm assuming the Internet zone).
Please check the variable scope. This issue is not browser's problem.
In your code, var thewin = window.open(.. in the ButtonClick2 function, but window.thewin.focus(); is point to window object's thewin variable.
Change the code to thewin.focus(); then it works perfectly.
New code:
PE html>
<html>
<head>
<title>Popup Example</title>
<script>
function ButtonClick2() {
var thewin = window.open("http://www.google.com",'thewin','width=400, height=420,status=no');
thewin.focus();
}
</script>
</head>
<body>
<button onclick="ButtonClick2()">Click Me!</button>
</body>
</html>
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 am using window.postMessage for cross domain popup communication. Everything seems to be working fine on firefox and chrome. The main problem is with IE11.
I tested on multiple systems IE11,for few systems its working fine, but for other systems it does not seems listen the message on the parent page.
As we all(who tested) are under a same network, we have the same version of IE.
The exact version: 11.0.9600.18314CO. Its very frustrating since last 2 days.
Update:
I am seeing the document mode is different in the different browser. On my browser the website loads with EDGE and everything working fine. In some other system its loading with IE7 mode and that is causing the issue.
Now i am not sure why for the same website the document mode is different on different system IE.
Here is an example:
http://plnkr.co/edit/pK4XBJDrqFrE7awvMlZj?p=preview
Page 1:
<!DOCTYPE html>
<html>
<head>
<script>
var popup = window.open("popup.html", "popup", "width=200,height=200");
function receiveMessage(event) {
if (event.origin === "http://run.plnkr.co") {
console.log(event, event.data);
this.location.href = event.data;
}
}
window.addEventListener("message", receiveMessage, false);
</script>
</head>
<body>
</body>
</html>
Page 2:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Save">
</form>
<script>
console.log(window.opener);
var button = document.querySelector("form input[type=button]");
button.onclick = function(e) {
e.preventDefault();
e.stopPropagation();
window.opener.postMessage("redirect.html"
, window.opener.location.href);
window.close();
}
</script>
</body>
</html>
Page 3:
<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<style type='text/css'></style>
</head>
<body>
redirected
</body>
</html>
Any help would be appreciated..
I had same conditions - cross domain popup window dialog and very similar code, which also did not work in IE11 (older versions not relevant for me).
In my case I found out it does not work because of Internet Explorer security zones.
My opener page was among Trusted sites, the dialog page was not. Found out it works if both sites have the same zone (either trusted or internet).
From my tests it seems to me, that your code does not work because of window.opener.location.href. Probably you cannot access window opener properties. If I changed it to particular domain, it started to work.
I have a question we must have seen many a time that when we are about to close the window and Just hover mouse over the cross on Browser Tab, a pop up appears asking for us to subscribe or highlighting some coupon. This Functionality is based on which feature of the browser, does it exploits some PHP code or some artificial intelligence.
It is run on client-side as everything that interact with user interface.
The example bellow shows how to do this with pure javascript (not tested with all browsers, but works well with Chrome)
<!DOCTYPE html>
<html>
<head>
<title>Page exit example</title>
<script type="text/javascript">
var showMessage = true;
window.onmouseout = function(){
if(showMessage){
showMessage = false;
document.getElementsByTagName('body')[0].innerHTML = "Dont leave yet!";
}
};
</script>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
This code is the core of a much larger script that works great in almost all browsers. Yet it didn't work in IE. So I've stripped it down and found that the image.onload isn't firing in IE.
I've done some research, and I've guarded against it being an image caching problem. For one, the error occurs first time round before anything is cached, and, more importantly, the onload event is attached before the src.
I'm also reasonably sure I'm attaching the onload event in an IE compatible manner, so what gives, why don't I get an alert?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function generate(){
var imageGen = document.createElement("img");
imageGen.setAttribute('onload',"primer()");
imageGen.setAttribute('src', "http://www.google.co.uk/images/srpr/logo3w.png");
document.getElementById('image').appendChild(imageGen);
}
function primer() {
alert("here now");
}
</script>
</head>
<body onload="generate()">
<div id="image">
</div>
</body>
</html>
I'm hosting a version here
I only have access to IE8 unfortunately, so I don't know if it persists across other versions, even so it needs to be fixed.
First of all, events are not attributes and must not be set using setAttribute. It might, or might not work.
Second, try creating image object instead of image element:
var imageGen = new Image();
imageGen.src = "http://www.google.co.uk/images/srpr/logo3w.png";
imageGen.onload = primer;
document.getElementById('image').appendChild(imageGen);
Live test case - worked fine for me on IE9 and IE9 compatibility mode which should be like IE8.
Can you try imageGen.onload = primer instead of imageGen.setAttribute('onload',"primer()"); ?
The following code works fine in Firefox and IE but it doesn't work in Google Chrome, anyone have an idea of how to make it work? or an alternate way to move a window in Google Chrome?
Thanks!
<html>
<head>
<title>Open windows for clicks</title>
</head>
<script type="text/javascript">
function moveWindow()
{
this.resizeTo(400,300);
this.moveTo(0,300);
}
</script>
<body onload="moveWindow();">
<br>
</body>
</html>
That's not possible because if it was it would be abused by ad-companies, hackers, designers without taste and god knows what else.
I doubt it even works in firefox, can't remember if i changed it myself but for me that code does nothing with my firefox.
You can maybe move windows you've created yourself with window.open but dont expect window.resize/move to work just by opening a website.
I guess it's rather a bug, with number 1137420 to be precise, as the explanation of the start-maximized command line argument seems to indicate. (see ao http://www.ostreff.info/?p=1737)
Google guys need themselves a feature like that to test their browser...
try this
<script type="text/javascript">
function moveWindow()
{
setTimeout(function(){
this.resizeTo(400,300);
this.moveTo(0,300);}
,100);
}
</script>