iframe postmesssage api works with lazy loaded iframes
This commit is contained in:
		
							
								
								
									
										54
									
								
								js/reveal.js
									
									
									
									
									
								
							
							
						
						
									
										54
									
								
								js/reveal.js
									
									
									
									
									
								
							| @@ -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' ); | ||||||
|  | 			} ); | ||||||
| 		} | 		} | ||||||
|  |  | ||||||
| 	} | 	} | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user