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")
Related
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.
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;
};
})();
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
I have a page where I generate textareas via AJAX and fire events if those textareas are changed. This works great on IE9+ and other browsers such as Firefox, Chrome, Safari, etc. The problem is IE8 and under. They don't fire the change event. The code is:
Textarea looks like:
<textarea name="answer8158" id="answer8158"></textarea>
Javascript looks like:
document.observe('change', function(e, el) {
if (el = e.findElement('textarea')) {
//Do Something
}
});
Is there a workaround to make the change event work? I would be fine with PrototypeJS or pure javascript solution.
Thanks.
The solution is to go back to hard coding the onchange events in the AJAX. Unfortunately the document observe (blur/change) doesn't work for IE8 and under. Not how I like to write code, but is the only solution I have found.
You should explain more about how you are using the AJAX response, the following works fine in IE 6 with Prototype.js v 1.7.1. I've used DOM and innerHTML to emulate what you might be doing with the AJAX response:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
document.observe('change', function(e, el) {
if (el = e.findElement('textarea')) {
alert(el.value);
}
});
function addTextarea(el){
var ta = document.createElement('textarea');
ta.name = 'ta2';
el.parentNode.insertBefore(ta, el.nextSibling);
}
function addTextarea2(){
document.getElementById('s0').innerHTML = '<textarea></textarea>';
}
</script>
<textarea name="answer8158" id="answer8158"></textarea><br>
<button onclick="addTextarea(this);">Add using DOM</button><br>
<button onclick="addTextarea2();">Add using innerHTML</button><span id="s0"></span>
If you are programmatically changing the value and expecting a change event to fire, that is entirely different. BTW, I would write the observer as:
document.observe('change', function(e) {
var el = e.findElement('textarea');
if (el) {
alert(el.value);
}
});
which is only a few extra characters and a lot clearer.
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);