dynamically change onload for an iframe - javascript

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);

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.

FXSCopyButton Not working in IE, how to copy to clipboard in IE

I have the following code on my page that displays a text box with a copy button after it(places the contents on your clipboard)...
public showDialog(): DataLab.Util.Promise<IDialogResult> {
var p = DialogViews.ShowApiCode.show(this);
$("#short-code").fxsCopyButton({
ariaLabelledBy: "short-code-label",
labelElement: $("#short-code-input"),
getClipboardText: function () { return $("#short-code-text").val(); }
});
$("#short-code-text").click(function () {
$(this).select();
});
return p;
}
This good works fine in Safari and in Chrome, but in IE the text box is empty. I know that if I remove the following the text books works fine...
$("#short-code").fxsCopyButton({
Is my best option here to do a switch based on the browser and just not do clipboard in IE? Can I am I doing something wrong here, or is there a better way to do copy to clipboard for all browsers?
You can use the clipboardData object instead:
http://msdn.microsoft.com/en-us/library/ie/ms535220(v=vs.85).aspx

onbeforeunload issue with Chrome and Firefox

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

Firefox element.event works but element.addEventlistener does not

I am having some problems with addEventListener in Firefox.
I have an iframe on my site for a WYSIWYG area I built myself.
I want the iframe to look more like a normal textarea so I want a border around the iframe on focus. First tp (textpreview) is found like this (and works well):
var tp = document.getElementById('iframe-textpreview');
var iframe = tp;
if(tp.contentDocument){ // normal
tp = tp.contentDocument;
}
else if(tp.contentWindow){ // old IE
tp = tp.contentWindow.document;
}
//Open and close for Firefox
tp.open();
tp.close();
tp.designMode = 'on';
Then I try to attach an eventlistener and log when the event fires. This works in Chrome, Opera and the most recent IE but not in Firefox:
//Doesn't work in Firefox
tp.body.addEventListener('focus', function(){ console.log('focus...')});
tp.body.addEventListener('blur', function(){ console.log('blur...')});
This does work however:
//Firefox
tp.body.onfocus = function(){ console.log('focus...')};
tp.body.onblur = function(){ console.log('blur...')};
I have cleared the cache on Firefox and tried with another computer, still no luck to get the first option working.
Firefox doesn't fire the event handler on the body element for some reason, instead you have to attach the event handler to the iframe itself or an actual element inside the iframe.
Focusing on the iframe itself, and not the body, seems to work in all browsers
tp.addEventListener('focus', function(){ console.log('focus...')});
tp.addEventListener('blur', function(){ console.log('blur...')});

Refresh an element in Javascript

Thanks to Refresh (reload) a page once using jQuery? answer I could solve an issue.
I have a popup window with a checkbox I want to reflect changes from referred main page, almost instantly.
It works great in Safari, Firefox, Chrome, Opera but Internet Explorer.
Thank you
function updateDiv(){
var ord = getCookie('ordinals');
if( ord.indexOf("<?=$ordinal?>")==-1 ){
 document.getElementById("chk<?=$ordinal?>").checked=false//no checked
}
else {
document.getElementById("chk<?=$ordinal?>").checked=true//checked
}
$('chk<?=$ordinal?>').html(newContent);
}
setInterval('updateDiv()', 1000); // that's 1 second
......
......
<body onload="updateDiv(); ....
I think your problem is with:
$('chk<?=$ordinal?>').html(newContent);
Try with this:
var jEl = $('chk<?=$ordinal?>');
jEl.empty();
jEl.append(newContent);

Categories