dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

iframe postmesssage api works with lazy loaded iframes

This commit is contained in:
Hakim El Hattab 2015-05-07 10:09:50 +02:00
parent bf6a426cf2
commit af270a909c
1 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
js/reveal.js
View File

@ -2910,29 +2910,42 @@
} }
} ); } );
// Lazy loading iframes // Normal iframes
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) { toArray( slide.querySelectorAll( 'iframe[src]' ) ).forEach( function( el ) {
element.setAttribute( 'src', element.getAttribute( 'data-src' ) ); startEmbeddedIframe( { target: el } );
} ); } );
// Generic postMessage API for non-lazy loaded iframes // Lazy loading iframes
toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) { toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
el.contentWindow.postMessage( 'slide:start', '*' ); if( el.getAttribute( 'src' ) !== el.getAttribute( 'data-src' ) ) {
}); el.removeEventListener( 'load', startEmbeddedIframe ); // remove first to avoid dupes
el.addEventListener( 'load', startEmbeddedIframe );
el.setAttribute( 'src', el.getAttribute( 'data-src' ) );
}
} );
}
}
/**
* "Starts" the content of an embedded iframe using the
* postmessage API.
*/
function startEmbeddedIframe( event ) {
var iframe = event.target;
// YouTube postMessage API // YouTube postMessage API
toArray( slide.querySelectorAll( 'iframe[src*="youtube.com/embed/"]' ) ).forEach( function( el ) { if( /youtube\.com\/embed\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
if( el.hasAttribute( 'data-autoplay' ) ) { iframe.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
el.contentWindow.postMessage( '{"event":"command","func":"playVideo","args":""}', '*' );
} }
});
// Vimeo postMessage API // Vimeo postMessage API
toArray( slide.querySelectorAll( 'iframe[src*="player.vimeo.com/"]' ) ).forEach( function( el ) { else if( /player\.vimeo\.com\//.test( iframe.getAttribute( 'src' ) ) && iframe.hasAttribute( 'data-autoplay' ) ) {
if( el.hasAttribute( 'data-autoplay' ) ) { iframe.contentWindow.postMessage( '{"method":"play"}', '*' );
el.contentWindow.postMessage( '{"method":"play"}', '*' );
} }
}); // Generic postMessage API
else {
iframe.contentWindow.postMessage( 'slide:start', '*' );
} }
} }
@ -2951,14 +2964,10 @@
} }
} ); } );
// Lazy loading iframes
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( element ) {
element.removeAttribute( 'src' );
} );
// Generic postMessage API for non-lazy loaded iframes // Generic postMessage API for non-lazy loaded iframes
toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) { toArray( slide.querySelectorAll( 'iframe' ) ).forEach( function( el ) {
el.contentWindow.postMessage( 'slide:stop', '*' ); el.contentWindow.postMessage( 'slide:stop', '*' );
el.removeEventListener( 'load', startEmbeddedIframe );
}); });
// YouTube postMessage API // YouTube postMessage API
@ -2974,6 +2983,11 @@
el.contentWindow.postMessage( '{"method":"pause"}', '*' ); el.contentWindow.postMessage( '{"method":"pause"}', '*' );
} }
}); });
// Lazy loading iframes
toArray( slide.querySelectorAll( 'iframe[data-src]' ) ).forEach( function( el ) {
el.removeAttribute( 'src' );
} );
} }
} }