Develop Reference

HTML5 Video loadeddata event does not work in IOS Safari

I am trying to trigger an event once a video has loaded the first frame. The code I have used works in desktop browsers that I have tested in but it does not work in mobile safari on IOS. Is there something about the code that is not supported on mobile safari or is there another solution to achieve what I want?
function loadvideo (vidsource){
var vid = document.createElement('video');
vid.src = vidsource;
alert("Video about to load"); //This works fine in mobile safari
vid.addEventListener('loadeddata', function() {
alert("Video Loaded!"); //This does not display in mobile safari
//Will do something else here
}, false);
}

On iOS, it looks like the video doesn't get loaded unless the user hits play, or if the autoplay attribute has been added (which doesn't actually appear to autoplay it).
The following should work for you:
var vid = document.createElement('video');
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
vid.autoplay = true;
vid.addEventListener('loadeddata', function() {[...]}, false);
vid.src = videosource;
Alternatively, you can listen to the progress event instead of loadeddata, which seems to work fine on iOS Safari.

Add preload="metadata" to video tag and then listen to loadedmetadata event. It works in IOS Safari as well

try not to use addEventListener is this case, use older on style, AND set src AFTER you setup an event listener:
...
vid.onloadeddata = function () {
alert("Video Loaded!");
// do something
}
vid.src = vidsource;
...
If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase. - To learn more - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

iFrame OnLoad event in IE not firing after Tapestry Zone update

I have a Tapestry zone, inside which is an <iframe> element. I wanted to do run a simple JS function (just hiding and enabling some stuff, nothing fancy) when the iframe is done loading.
In chrome and firefox, it works just fine, but I'm having issues with IE 9.
function afterExportLoad() {
// hide throbber gif
// enable submit button
}
So, natually, I tried binding it to iframe like this (inline)
<iframe onload="afterExportLoad()" .../>
via PrototypeJS
exportFrame.observe('load', afterExportLoad);
via native JS
if (window.addEventListener) {
exportFrame.addEventListener("load", afterExportLoad, false);
} else if (window.attachEvent) {
exportFrame.attachEvent("onload", afterExportLoad);
} else {
exportFrame.onload = afterExportLoad;
}
Using any way above, it works in everything but IE, but in IE, after the iframe is loaded, the gif is "frozen" and the button is still disabled.
Is there a way to make it work in IE9 (and possibly any other IE versions)?
Thank you :)

So, I was fiddling around a bit and got to this solution:
Added browser checks in the function
function afterExportLoad() {
if (document.getElementsByName('downloadFrame').length > 0) {
var exportFrame = document.getElementsByName('downloadFrame')[0];
if ((Prototype.Browser.IE && exportFrame.readyState == "complete") || (!Prototype.Browser.IE)) {
// my stuff
}
}
}
Changed the event
<iframe onreadystatechange="afterExportLoad();" ...>
And in another function that listenes on zone update where iframe is
if (document.getElementsByName('downloadFrame').length > 0) {
var exportFrame = document.getElementsByName('downloadFrame')[0];
if (!Prototype.Browser.IE) {
exportFrame.stopObserving('readystatechange', exportLoad);
exportFrame.onload = exportLoad;
}
}
If any1 comes up with a better solution, let me know :)

Javascript .onload not firing in IE? window.open reference issue?

I haven't been able to make sense of the answers to related questions so far(down to my knowledge level), so...
I have a simple script(using jQuery) that opens a new window and adds certain content from the parent into a specified container inside the child. I'm not sure if it's my approach that's wrong or I'm just missing a step - the script to run on the new window runs in IE when it's outside of the window.onload function, but this breaks FF, and FF is happy when it's inside of the window.onload, but then the new window in IE doesn't appear to be doing anything(no alert, no add of content, nada).
Please can anybody explain to me why this is the case/what I'm doing wrong? Is it something to do with the reference to window.open?
This is the script:
var printPage = function(container){
$('.printButton').click(function(){
var printWindow = window.open('printWindow.html');
var contentFromParent = $(container).eq(0).html();
/*works for IE, but not FF
printWindow.alert('works for IE, but not FF');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;*/
/*works for FF and Chrome but not IE:*/
printWindow.onload = function(){
printWindow.alert('works for FF and Chrome but not IE');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}
/*I also tried:
$(printWindow.document).ready(function(){
printWindow.alert('load the page, fill the div');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}); //works for IE, not working for FF/Chrome*/
})
}
printPage('#printableDiv');
The HTML:
<div id="wrap">
<button href="#" class="printButton">Print</button>
<div id="printableDiv">
<p>I want to see this content in my new window please</p>
</div>
</div>
UPDATE
Thanks for your pointers about onload in the new window - I've gone with this solution for now: Setting OnLoad event for newly opened window in IE6 - simply checking the DOM and delaying the onload - working for IE7/8/9.
I'm not sure if you'd call it an 'elegant' solution, but it's working! Further comments, especially if you think this is flawed, would be appreciated. Thanks.
var newWinBody;
function ieLoaded(){
newWinBody = printWindow.document.getElementsByTagName('body');
if (newWinBody[0]==null){
//page not yet ready
setTimeout(ieLoaded, 10);
} else {
printWindow.onload = function(){
printWindow.alert('now working for all?');
printWindow.document.getElementById('wrap').innerHTML = contentFromParent;
}
}
}
IEloaded();

Can it be that the page you open fires the 'onload' event before you set the event handler printWindow.onload = ... ?
You might consider including some javascript in your 'printWindow.html' page. Let's say you add a short <script>var printWindowLoaded = true;</script> at the end of your page. Then your main script would do something like this:
function doStuff() {
//...
}
if (printWindow.printWindowLoaded)
doStuff();
else
printWindow.onload = doStuff;

HTML5 Audio events not triggering on Chrome

I'm trying to have a load progress bar in my game, and I have a function assigned to the onloadeddata attribute on my audio, but it is not triggering in Chrome. It works in other browsers. I also tried many other events such as oncanplay, oncanplaythrough, onloadedmetadata, etc. None of them trigger.
I think it might have to do with the caching. Tried looking around and there was some reports of this from 2-3 years ago but nothing recent.
Is there any other way I could detect if the audio is loaded, or make these events work?
EDIT: Here's a quick example: http://jsfiddle.net/3vxCu/1/
Works in Opera and Firefox, but not in Chrome. It should give an alert when sound if finished loading.

It seems that the onloadeddata property does not work for some reason. But attaching an event handler through addEventListener (or via jQuery) works: http://jsfiddle.net/3vxCu/4/
bgSound = new Audio();
bgSound.src = "http://www.ehsankia.com/hawkthorne/audio/level.ogg";
bgSound.preload = "auto";
// Standard browsers (not IE before version 9):
// bgSound.addEventListener("loadeddata", testFunction, false);
// jQuery:
$(bgSound).on("loadeddata", testFunction);
function testFunction () {
alert("Data loaded");
}

If the attached jsfiddle is how you have implemented your code then I think I know what is wrong.
Your jsfiddle shows:
bgSound = document.createElement('audio');
bgSound.src = "http://www.ehsankia.com/hawkthorne/audio/level.ogg";
bgSound.onloadeddata = testFunction;
function testFunction(){
alert("Data loaded");
}
It should be like this:
bgSound = document.createElement('audio');
bgSound.onloadeddata = testFunction; // Event listener is attached _before_ loading the resource
bgSound.src = "http://www.ehsankia.com/hawkthorne/audio/level.ogg";
function testFunction(){
alert("Data loaded");
}
Basically, you are attaching the event listener after the src is specified. Specifying the source should be the last thing you do since it sets everything in motion. Chrome is probably already past the point of calling listeners for that event by the time it is attached in your code.

Why does IE8 hangs on jquery window.resize event?

I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
console.log('Handler for .resize() called');
});
});
</script>
<div id="log">
</div>
</body>
</html>
Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.
Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).
UPDATE
One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.
var ieVersion = getInternetExplorerVersion();
if (ieVersion == 8) {
document.body.onresize = function () {
};
}
else {
$(window).resize(function () {
});
}
But this does not answer my question: is the continuous firing of resize() a bug in IE8?

If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).
To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize
This article says Chrome, Safari & Opera suffer from this too.

I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the log div that you have there, which means that it is resizing the div and triggering the window resize event.
The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:
var handleResize = function(){
$(window).one("resize", function() {
console.log('Handler for .resize() called');
setTimeout("handleResize()",100);
});
}
handleResize();
This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.