jQuery bind("load") - javascript

var imgLoader = $("<img />");
$(imgLoader).attr("src", "http://localhost/malevil/Content/Images/img_adrenalin.jpg");
$(imgLoader).unbind('load');
$(imgLoader).bind('load', function () {
alert("event fired");
});
But this work only in chrome, where is the problem ?
In IE, Firefox and Opera load event never fired.

You need to bind the load event before you set the src property.
As a side note, there are known issues with the load event on images that you need to be aware of:
javascript, image onload() doesnt fire in webkit if loading same image
And, quoting from the jQuery manual on load():
It doesn't work consistently nor
reliably cross-browser
It doesn't
fire correctly in WebKit if the image
src is set to the same src as before
It doesn't correctly bubble up the
DOM tree
Can cease to fire for images
that already live in the browser's
cache

I would set the handler before you set the src attribute --as it might be that the image loads before your event handler gets set.

Related

vimeo/YouTube iframe video wheel event

I'm doing a Firefox addon to intercept wheel mouse events over an embedded iframe video of Youtube or Vimeo.
I got it working over normal YT/vimeo pages (attaching the listener to the window and then looking at event.target to identify the video), the problem is with the < iframe> tag: it doesn't intercept the "wheel" event (while for example "mouseover" works).
i.e. there is a similar HTML code in a page:
<iframe src="//player.vimeo.com/video/89055435/fallback?noscript" frameborder="0"></iframe>
This works:
iframes[i].addEventListener("mouseover", func, false);
For "wheel" I do the similar:
iframes[i].addEventListener("wheel", myFunc, false);
or
iframes[i].contentWindow.addEventListener("wheel", myFunc, false);
No result. I tried also capturing instead of bubbling: nothing.
I tried also this:
window.addEventListener("wheel", myFunc, false);
This works over every obj of the page, but nothing over the iframe itself.
I made also a setTimeout with the listener, to see if the iframe was not fully loaded: nothing changes.
http://jsfiddle.net/chtNP/121/
So, what should I do to have my wheel event when I'm over an iframe with a video inside it or how to get all wheels from the window including those over the iframe?
I had the same problem, here is my solution:
var iframe = document.querySelector('iframe');
iframe.contentDocument.addEventListener('wheel', event =>
iframe.dispatchEvent(new WheelEvent('wheel', event))
);
this will forward every wheel-event on the iframes document to the iframe element in the parent document.
Notes:
it is not possible to 'recicle' the event, it needs to be cloned
the WheelEvent constructor copies many, but not all of the original events properties
the cloned event is not isTrusted
the event forwarding is attached to the iframes document. It will only work as long as the document doesn't change. So you should run the above code once the final document is loaded
accessing the iframes document may get you in cross-domain-trouble

How to listen to a load event of an object with a SVG image?

I want to manipulate a SVG image after it's loaded with snap.svg. Unfortunately the callback of the load event is never called. How can I register a load event to the svg object?
I have created this minimal example of my problem.
HTML:
<object data="http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" type="image/svg+xml" id="animation" />
Javascript:
alert('loading');
$('#animation').on('load', function() {
alert('loaded');
});
From this post jQuery SVG-object tag load event
It seems like jQuery simply prevents to bind a "load" event to a
non-image-or-document element, so I just use the "official"
addEventListener() function...
Also unsure if that's still the case but your issue was mostly that in jsfiddle you were executing the code on document "loaded" instead of document "ready". Document loaded means all the resources are loaded prior executing the code so the svg image would already be loaded.
Works fine with this updated jsfiddle http://jsfiddle.net/47jSh/2/
alert('loading');
$('#animation')[0].addEventListener('load', function() {
alert("loaded");
}, true);

what happens to window events when changing documents?

Hey i have the following statechange event set on the window :
History.Adapter.bind(window,'statechange',function(e){
console.log("statechange event occured ");
//more code
var newDoc = document.open();
newDoc.write(file);
newDoc.close();
});
i'm using history.js but that doesn't matter in this case as it binds the statechange regulary, i am getting the value of file like should be and works fine.
Now i have this code (and other code) inside an external js file,
inside the file i'm iterating through all a tags and apply the following click event :
$(element).on("click",function(e){
e.preventDefault();
//more code
History.pushState({file : file},title, fullHref);
});
Now when i click the document is getting changed as expected but when trying to use back/forward buttons statechange event does not fire.
I should mention that this js is included in the files im loading as well.
So my initial thought was that as the document changes but the window doesn't, the event remains. which is not true as it applies the statechange event multipile times. So i tried applying the event once using cookie but that still does the same thing.
Now if instead of changing the document i simply apply it with jQuerys .html() the statechange event gets fired as exepected so i guess it's related to the document.
Why could this happen? I believe if i understood more about what happens to window events when changing documents i could solve this problem.
Tries :
I have now also tried binding to the popstate event via regular History API, still same results give or take. pushState doesn't fire popstate but back button does but without state.
I have come to the conclusion that i shouldn't be using history.js as i susspect the problem came from there so i "solved" my problems with popstate which still causing problems as document.open seems to be firing popstate. still looking for more information
I've tried using on, same result
Information :
the fact this example us using History is because of history.js, if i use regular history API still same problems.
I have read in mdn that :
{{ gecko_minversion_note("1.9.2", "Starting with Gecko 1.9.2, document.open() uses the
principal of the document whose URI it uses, instead of fetching the
principal off the stack. As a result, you can no longer call
document.write() into an untrusted document from chrome, even using
wrappedJSObject.") }}
Which im not sure but i think could be realted to this problem
Well, in the end i discovered that all though you only change document, window events gets deleted as they lay inside the document.
I encoutred my problems with History.js i think because the fact that im changing documents break it at some point.
What i did was use native HTML5 history API and rebinded the popstate event in the new document.
have you tried to bind the element with LIVE ?
$(element).click(function(e){
e.preventDefault();
//more code
History.pushState({file : file},title, fullHref);
});
becomes
$(element).live('click',function(e){
e.preventDefault();
//more code
History.pushState({file : file},title, fullHref);
});
You have to use iframe to load your document and easily can change its document. Then, you can listen for a click event like this,
$("#iframe").load(function () {
$(this.contentWindow).click(function () {
// do your click events here
});
});
The iframe will reload if you change the src attribute value as another document.
Have you tried setting a target in the document.open() method (see
http://www.w3schools.com/jsref/met_doc_open.asp)?
If not' you're actually writing to a blank window, where you might be losing the History object.

Live Detect iframe page onload

I have a div element that contains some iframes. At times, I destroy those iframes and create new one, but I always need to know when each of them (also those added later) has finished loading. I thought that the following code would work but I get nothing logged to the debug console. Any help?
// doesn't work
$('#viewport').on('load', 'iframe', function() {
console.log('LOADED!');
return true;
});
// doesn't work either
$('#viewport').on('ready', 'iframe', function() {
console.log('LOADED!');
return true;
});
It might be that the frame finishes loading before you add the event.
Try to add the event before you add it to the DOM.
var iframe = document.createElement("iframe");
// set iframe properties
$(iframe ).on('ready', 'iframe', function() {
console.log('LOADED!');
});
document.body.appendChild(iframe);
I'm pretty convinced that this can't be done with dynamic iframes. From the jQuery site (under the deprecated load() function:
Note: The .live() and .delegate() methods cannot be used to detect the load event of an iframe. The load event does not correctly bubble up the parent document and the event.target isn't set by Firefox, IE9 or Chrome, which is required to do event delegation.
I can't get a similar project to work, either.

Using .live() for iFrame.load() event?

I know an iFrame is added to my page via javascript somewhere in my page, I want to be notified when it is loaded, but this doesn't work:
$("iframe").live("load",
function () {
alert(this.name + ": Im loaded!");
});
No alert is shown
Any idea why? any idea how can we achieve this?
I think you can do a callback after adding the iframe to your page.
As mentioned here, it's not possible to bind live() to iframe load().
Note: The .live() and .delegate() methods cannot be used to detect the
load event of an iframe. The load event does not correctly bubble up
the parent document and the event.target isn't set by Firefox, IE9 or
Chrome, which is required to do event delegation.
So in your callback, you have to call this, maybe set a timeout to make sure it fires after the iframe has been loaded.
$("iframe").load(function () {
alert(this.name + ": Im loaded!");
});
It won't work, for load event only works on Window object.
If you wish to be noticed when page inside the iframe is loaded, then you should write code on the inside page, which calls window.parent to notify its parent page.

Categories

Resources