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.
Related
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>
I'm having following problem. I have following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Me test site</title>
</head>
<body>
Click Me
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
var handler = function codeclick(event) {
var link_new = $('a').attr('co-target');
if (link_new) {
window.open(link_new, '_blank');
}
}
$('a').bind('click.codeclick', handler);
});
</script>
</body>
</html>
You can see it in action here
The expected behaviour on desktop is that the page in co-target attribute is opened in new tab/window and the one in href attribute is opened in current tab.
On internal mobile facebook browser it should open just the co-target attribute page (intended). But on Google mobile iOS app it opens the page in href attribute (unintended).
Does anyone encountered similar problem before and maybe have some clues what should I do to make it right? There is no need that the page in co-target has to open. I just want it that on both facebook and google app it open one of it, not different one in each.
I have some problems calling a function of a specific iframe after reloading another iframe. It works on all major browser but behaves a little weird on Microsoft Edge. You will need the following constellation to get the error. All files are in the same directory on the same server. I haven't set any Content Security Policy.
If you load the Frame1.html everything will be fine and you will get the "alert" message.
But if you click the "Click me" a-tag on the frame4.html, the frame2.html will be reloaded and you will get the "permission denied" error because the parent object (var tmpParent = parent;) is not accessible. If you click the a-tag again it will work without any error.
I think it is a Edge bug, because all other browser can handle it and it only occur on the first click.
The error will also occur if you use top insted of parent.
The code of topFrame.js is used to find the top-most Frame of my site.
I cannot simply use top because it should be possible to embed my site.
Does anybody have a clue?
Thanks a lot!
Frame1.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
<script type="text/javascript">
var topFrame = this;
function myAlert() {
alert('alert');
}
</script>
</head>
<body>
<iframe id="overallContentWrapper" name="mainFrame" src="frame2.html" frameborder="0"></iframe>
</body>
</html>
Frame2.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
<script src="topFrame.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener("load", function load(event) {
window.removeEventListener("load", load, false);
try {
topFrame.myAlert();
} catch (e) {
alert(e);
}
}, false);
</script>
</head>
<body>
<iframe name="subFrame" src="frame3.html" frameborder="0"></iframe>
</body>
</html>
Frame3.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 3</title>
</head>
<body>
<iframe name="subsubFrame" src="frame4.html" frameborder="0"></iframe>
</body>
</html>
Frame4.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 4</title>
</head>
<body>
Click me
</body>
</html>
topFrame.js
try {
var tmpParent = parent;
var topFrame = tmpParent.topFrame;
while (topFrame === undefined) {
tmpParent = tmpParent.parent;
topFrame = tmpParent.topFrame;
}
} catch (e) {
alert(e);
}
Well i know im putting my neck on the line here trying to guess what IE is trying to tell you but i would assume that using this type of communications is going against what iframes are intended to do.
If you wish to communicate between child frames to parnet frames i suggest using postMessages instead. I think(I did say think) your script is getting blocked against XSS - cross site scripting. So if you wish to communicate some information between parent frame and child frames or the other way around i suggest having a look at postMessges.
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>
I'm testing a web page that hides and unhides a div container when a different one is clicked on. I tested this is Chrome and it worked nicely, but after I put it on my web server I get undefined errors. When I test it in Firefox from the web server, it works fine. It works fine with Chromium in Lubuntu, but Chrome in Windows is giving me an error.
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Chrome test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function hideDiv(nameId) {
var grouping = document.getElementById(nameId);
if(grouping.style.display == 'none') {
grouping.style.display = '';
} else {
grouping.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="group">
<div id="header" onclick="hideDiv('failingtoclose');">
<span>Testing</span>
</div>
<div id="failingtoclose">
<span>More testing</span>
</div>
</div>
</body>
</html>
The warning the developer's tools gives me:
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.
and the error:
Uncaught TypeError: Cannot read property 'display' of undefined (Line 9)
The web server is running apache 2.2.22 on Ubuntu.
it's working fine in chrome on windows (version 30.0.1599.69 m) and I doubt it has to do with the server since there is no interaction going on, at least in the code you provide. Changing the doctype to standards mode (<!DOCTYPE html>) might help, since some browsers get confused otherwise (though I doubt chrome does).