onbeforeunload issue with Chrome and Firefox - javascript

In last days I noticed that the confirmation alert that I supposed to see before leaving my website page is no more shown on Chrome and Firefox, but it's displayed on IE.
If I debug with Google Chrome Dev Tools, I can see that function confirm is executed, enters the if statement, but no alert box is displayed. I tried to restart Google Chrome and look for an option to reset alert messages, but I didn't find nothing.
Any ideas?
The code is this:
if (window.addEventListener) {
window.addEventListener('beforeunload', confirm, false);
}
else window.attachEvent("onbeforeunload", confirm);
...
function confirm(e) {
if (changed== true) {
return "You haven't saved your changes!";
}
}

I've found a working solution, but actually I don't understand why the attachEvent isn't working anymore. Anyway, this is the working solution, tested on IE, Chrome and Firefox:
I removed the addEventListener and attachEvent lines:
/* if (window.addEventListener) {
window.addEventListener('beforeunload', confirm, false);
}
else window.attachEvent("onbeforeunload", confirm); */
In the HTML, I add the attribute onbeforeunload to the body tag:
<body onbeforeunload="return confirmEvent()">
I also renamed the onbeforeunload function to avoid confusion with the confirm built-in javascript function:
function confirmEvent(e) {
if (changed== true) {
return "You haven't saved your changes!";
}
}

See https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
e.returnValue = confirmationMessage; // Gecko and Trident
return confirmationMessage; // Gecko and WebKit
});
Worked in every Browser i tested ;)
PS: I know its a little bit late

Related

onmousewheel event not working in firefox

Styling/Headers Lists Blockquotes Code HTML advanced help ยป
<script>
function event_branding() {
document.getElementById("branding_fade").style.bottom = "0%";
document.getElementById("branding_fade").style.opacity = "1";
document.getElementById("branding_fade").style.transition = "all 2s";
setTimeout(function () { $(".event_branding").css("visibility", "visible")},100);
}
</script>
Try this
<div class="col-xs-7" style="padding-right:3px;">
<img id="train_1_img" class="imageshow_temp" src="http://dummyimage.com/600x400/000/fff"/>
</div>
use this script
var image = document.getElementById("train_1_img");
if (image.addEventListener) {
// IE9, Chrome, Safari, Opera
image.addEventListener("mousewheel", MouseWheelEvent);
// Firefox
image.addEventListener("DOMMouseScroll", MouseWheelEvent);
}
function MouseWheelEvent(e) {
console.log('event', e)
// your statement here...
}
https://jsfiddle.net/fahadsaeed/f8ky3xkq/
Your code is not very clear. Anyways I will put my example here hope it helps
document.getElementById("myDIV").addEventListener("wheel", foo);
function foo() {
console.log("Wheel scrolled")
}
Try it out in JS FIDDLE
I tested and it works in Firefox and Chrome as well
A more detailed work on browser compatibility is explained HERE
This will work.
window.addEventListener('DOMMouseScroll', mouseWheelEvent);
Here is a Jquery example.
http://codepen.io/damianocel/pen/vLerPM
Now, why this is not working for everyone or all browsers is because this is not a standard feature.
Also, MDN says:
On Gecko 17 (Firefox 17) or later, you need to call preventDefault() of wheel events which must be fired for every native event.
On Gecko 16 or earlier, you need to call preventDefault() of MozMousePixelScroll event which must be fired for every native event.
To summarize, browser support is very bad, do not use this for production sites.

onbeforeunload not working at all

I have this code:
(function() {
window.onbeforeunload = function () {
alert("hi")
console.log("unloading");
};
})();
I also have this code:
window.addEventListener("beforeunload", function() {
alert("hi")
console.log("unloading")
});
None of them seem to work. All I want to do is log when the user tries to leave the page, but this isn't happening (latest Chrome, latest Firefox, Edge....), can anybody shed some light on why it's not working?
Since 25 May 2011, the HTML5 specification states that calls to
window.alert(), window.confirm(), and window.prompt() methods may be
ignored during this event. See the HTML5 specification for more
details.
Note also that various mobile browsers ignore the result of the event
(that is, they do not ask the user for confirmation). Firefox has a
hidden preference in about:config to do the same. In essence this
means the user always confirms that the document may be unloaded.
Source
Also, use return statement to prompt user before leaving
window.addEventListener("beforeunload", function() {
return "hi";
});
Do it this way:
window.onbeforeunload = function (e) {
console.log("unloading");
return "Hi";
};
That will alert Hi when page unloads and also prints unloading in console
function myFunction() {
return "Write something clever here...";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onbeforeunload="return myFunction()">
</body>
You have to return from the onbeforeunload:
(function() {
window.onbeforeunload = function () {
alert("hi")
console.log("unloading");
return null;
};
})();

window.print(); does not work in Safari

The print method does not work on window when using an onclick link Safari. What is the alternative to have a webpage print, in safari via onclick code that is placed on a button? Another odd behavior that's occurring is that when I try and close the window, the print dialog native to the browser then appears.
Try this solution:
try {
// Print for Safari browser
document.execCommand('print', false, null)
} catch {
window.print()
}
I was facing a similar issue with the Safari browser (and not any others).
In my case, aborting all API calls currently in progress immidiately showed the native print dialog.
I'm guessing the reason why your dialog showed up when trying to close the tab/page is that all the network requests are cancelled then.
Here's an example of how to create a pool of ajax requests (when using jQuery):
Stop all active ajax requests in jQuery
Also, to make it work consistently, I had to wrap the $.xhrPool.abortAll function in a short timeout (100ms).
My click handler function (simplified) looks something like this:
function myFunction() {
window.print();
window.setTimeout(function () {
$.xhrPool.abortAll()
}, 100);
}
If you return the result of window.print() to the onclick handler, Safari will not display the print window. I use React and had to make the following change:
//code that does not work:
<button type="button" onClick={() => window.print()}>Print!</button>
//code that does work:
<button type="button" onClick={() => { window.print(); }}>Print!</button>
All other browsers I tested (except Safari on iOS) worked fine either way, such as Chrome on iOS or Chrome for desktop.
My best guess is that as window.print is known to be asynchronous in Safari, perhaps window.print() returns falsy to the onclick handler, which cancels any "popups" from being displayed. This may be why the sample above with the myFunction() code may work when having onclick="window.print()" may not work.
This currently works in Firefox, Chrome and Safari:
try {
if(!document.execCommand('print', false, null)) {
window.print()
}
} catch {
window.print()
}
var frame1 = document.createElement('iframe');
frame1.name = "frame3";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var mywindow = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.documentElement ? frame1.contentDocument.documentElement : frame1.contentDocument;
mywindow.document.open();
mywindow.document.write('<html><head><title>' + strTitle + '</title>');
mywindow.document.write('</head><body>');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
setTimeout(function () {
window.frames["frame3"].focus(); // necessary for IE >= 10
window.frames["frame3"].print(); // necessary for IE >= 10
}, 500);
setTimeout(function () {
document.body.removeChild(frame1);
}, 20000);
Have no problem with window.print() with Safari. Sorry I could not try on Windows OS but follow code works for me with MacOS:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button>
Click link
<script>
function myFunction() {
window.print();
}
</script>
</body>
</html>

window.attachEvent doesn't seem to be working in IE8

Top page:
...
<script>
if (window.addEventListener) {
// addEventListener equivalent of code below
} else if (window.attachEvent) {
window.attachEvent("message", function(e) {
if (e.origin != "page2.html") { return; }
alert(e.data);
});
}
</script>
<iframe src="page2.html"></iframe>
page2.html:
<script>
var message = "hello!";
parent.postMessage(message, '*');
</script>
This code works fine in Chrome, Firefox and Opera. Of course IE has its own way of doing things so this code doesn't work despite using its own .attachEvent.
The page2.html is actually a page on another domain; I'm sending the correct P3P headers (shouldn't matter, but there's that).
How do I find out why postMessage doesn't seem to be reaching the parent page?
attachEvent takes its event name in the form "onmessage", as opposed to addEventListener (which uses "message")

dynamically change onload for an iframe

I have a page containing a couple of <iframe> tags. I want to change their onload actions dynamically. I have the following code that works fine in FF, Safari, Chrome, Opera, but IE (8) refuses to comply.
document.getElementById('myiframe').onload = function() {
return function() { file_onLoad(data); }
}();
I've been using something similar for setting the onchange of an <input> element and this works well in all the browsers I've tested, including IE.
document.getElementById('myinput').onchange = function() {
return function() { file_onChange(data); }
}();
So I guess it has something to do with the way I'm getting the frame element / object.
I've also tried frames['myiframe'] but with no success.
Thanks for your help!
It works fine on mine...
I tried:
function whatever(){
document.getElementById('myiframe').src="http://www.google.com/"
document.getElementById('myiframe').onload = function() {
return function() { alert("Done."); }
}();
}
and it works. (I tried on IE9 with IE8 mode turned on)
If it does not work for you, try this:
document.getElementById('myiframe').addEventListener('load', file_onLoad, false);

Categories