Within Internet Explorer 9 & 10, the localStorage implementation fires events unexpectedly (great thread here: Bug with Chrome's localStorage implementation?)
Does anybody know of a way to stop the storage event from firing on tabs that initiated the change within internet explorer?
For example the following shouldn't show an alert when the add button is clicked, but it does in IE:
fiddle: http://jsfiddle.net/MKFLs/
<!DOCTYPE html>
<html>
<head>
<title>Chrome localStorage Test</title>
<script type="text/javascript" >
var handle_storage = function () {
alert('storage event');
};
window.addEventListener("storage", handle_storage, false);
</script>
</head>
<body>
<button id="add" onclick="localStorage.setItem('a','test')">Add</button>
<button id="clear" onclick="localStorage.clear()">Clear</button>
</body>
</html>
EDIT:
On a side note, I've opened a bug with MS here. https://connect.microsoft.com/IE/feedback/details/798684/ie-localstorage-event-misfired
Maybe it won't get closed.....
Changing your script to the following prevents the handling of any storage events in the focused window.
This isn't precisely what you asked, as I believe that would require a patch to the browser, but it causes IE 9/10 to conform to the spec while having no adverse effects on other browsers (other than the global and listeners).
<script type="text/javascript" >
var focused;
window.addEventListener('focus', function(){focused=1;}, false);
window.addEventListener('blur', function(){focused=0;}, false);
var handle_storage = function (e) {
if(!focused)
alert("Storage",focused);
};
window.addEventListener("storage", handle_storage, false);
</script>
See this fiddle for the updated, conforming behavior.
Edit: The following also works and avoids the listeners at the cost of a runtime check of window focus:
<script type="text/javascript" >
var handle_storage = function (e) {
if(!document.hasFocus())
alert("Storage");
};
window.addEventListener("storage", handle_storage, false);
</script>
Related
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!");
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.
The event that should be fired when localStorage is changed seems to be lacking information in Firefox.
I set up the following event handler:
function storageEventHandler(e){
alert("key " + e.key);
alert("oldValue " + e.oldValue);
alert("newValue " + e.newValue);
alert("url " + e.url);
}
window.addEventListener('storage', storageEventHandler, false);
which should be triggered by this:
localStorage.setItem('foo', 'bar');
However, all the properties in the event (e.g. e.key and everything else) are all undefined. I am using Firefox 3.16. Why are the event properties undefined?
EDIT. Here is all the code I am using. The storage event fires in Firefox 3.16 but not in Firefox 4.0b8
Also, important, I am running it from XAMPP http://localhost/index.html
Running it from file:// make it die localStorage Getting NULL?
<!DOCTYPE html5>
<html lang="en">
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
var edit = document.getElementById('edit');
$(edit).blur(function() {
localStorage.setItem('todoData', this.innerHTML);
});
// when the page loads
if (localStorage.getItem('todoData')) {
edit.innerHTML = localStorage.getItem('todoData');
}
window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(e){
alert('localStorage event fired')
}
});
</script>
</head>
<body>
<header>
<h1> My Simple To-Do List </h1>
</header>
<section>
<ul id="edit" contenteditable="true">
<li></li>
</ul>
</section>
<em>Add some items, and refresh the page. It'll remember what you typed.</em>
</body>
</html>
EDIT #2: Here's a simpler example that shows the problem between the browsers...
<html>
<head>
<script>
function storageEventHandler(e){
alert('localStorage event fired')
}
window.addEventListener('storage', storageEventHandler, false);
localStorage.setItem('foo', 'bar');
alert('ok')
</script>
</head>
<body>
Test
</body>
</html>
Firefox 3.6 (Gecko 1.9.2) doesn't implement these properties (the specification was changing and most other browsers at the time didn't implement these properties either). This is fixed in Firefox 4 (Gecko 2). See https://bugzilla.mozilla.org/show_bug.cgi?id=501423
[edit] your testcase is a single-page. The spec says:
When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a local storage area, if the methods did something, then in every HTMLDocument object whose Window object's localStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired, as described below.
So you need a separate page on the same domain to observe the event.
I want to capture when a user pastes data into a text input field using mootools event system.
Anyone have experience of this?
The paste event has become better supported in recent times: IE has had it since around 2000 (IE 5.5, I think), Firefox since 3.0, WebKit for a couple of years (not sure exactly when). You should use it where possible and fall back to detecting ctrl-v or shift-ins in other cases, or polling the input box's value using a timer.
The function will get fired whenever the keys 'ctrl+v' are pressed.
Mootools docs : http://www.mootools.net/docs/more/Interface/Keyboard
EDIT : HTML and JS Code
<html>
<head>
<script type='text/javascript' src='core.js'></script>
<script type='text/javascript' src='more.js'></script>
<script type='text/javascript'>
function keyPressed(e)
{
var evt = Event(e);
evt.stop();
}
window.addEvent('domready', function()
{
var myKeyboardEvents = new Keyboard(
{
eventType: 'keyup',
events:
{
'ctrl+v': keyPressed
}
});
myKeyboardEvents.activate()
});
</script>
</head>
<body>
<form id='myForm'>
<input type='text' name='some' id='username' value='stack#over.com'/>
</form>
</body>
</html>
i have the problem that IE cant bring up opener window when i call
opener.focus() method
window.opener.focus(); // After that, child window stay in front.
html1.htm file:
<script type="text/javascript" language="JavaScript"><!--
function toCompare() {
wCompare = window.open("html2.htm", "wCompare", "width=800,height=600,resizable=yes,directories=no,status=no,toolbar=no,menubar=0,location=no,scrollbars=yes");
wCompare.focus();
};
//--></script>
</head>
<body>
open child window
</body>
html2.htm
<script type="text/javascript" language="JavaScript"><!--
function show_Parent(url) {
window.opener.location.href = url;
window.opener.focus(); // After that, child window stay in front.
}
//--></script>
</head>
<body>
<a onclick="return show_Parent('html3.htm');">go back to parent window</a>
</body>
This works fine for me, but I have seen similar behavior. Try creating a function in the parent page that grabs it's own focus and changes the URL
html1.htm
function focusAndGo(url) {
window.focus();
// EDIT: changed document.location.href= to window.location.href=
// Reference:
// https://developer.mozilla.org/En/Document.location
// document.location was originally a read-only property,
// although Gecko browsers allow you to assign to it as well.
// For cross-browser safety, use window.location instead.
window.location.href=url;
}
and call this from html2.htm
window.opener.focusAndGo(url);
Try to blur the current window first, maybe that helps.
window.blur();
window.opener.focus();