Last active
August 1, 2025 11:22
-
-
Save markhowellsmead/10880b95d05a3f0bb09077731e3eb408 to your computer and use it in GitHub Desktop.
Link opens an iframe in browser's fullscreen mode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* jQuery plugin, adds a click handler to a link with a | |
* data attribute 'fullscreeniframe'. The attribute should | |
* be a CSS identifier of the target element within the link's parent | |
* which will be opened full-screen when the link is clicked. | |
* | |
* $('[data-fullscreeniframe]').fullScreenIframe(); | |
* | |
* <div class="iframe-parent-with-no-own-function"> | |
* <a data-fullscreeniframe=".myiframe">Click</a> | |
* <iframe class="myiframe" src="…" ></iframe> | |
* </div> | |
*/ | |
(function($) { | |
$.extend($.fn, { | |
fullScreenIframe: function() { | |
var currentElement; | |
var FShandler = function(){ | |
if (currentElement && currentElement.parent() && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)){ | |
currentElement.parent().removeClass('is-fullscreen'); | |
} | |
}; | |
document.addEventListener("fullscreenchange", FShandler); | |
document.addEventListener("webkitfullscreenchange", FShandler); | |
document.addEventListener("mozfullscreenchange", FShandler); | |
document.addEventListener("MSFullscreenChange", FShandler); | |
$(this).on('click.gofullscreen', function(e) { | |
e.preventDefault(); | |
var target = $(this).data('fullscreeniframe'); | |
if (target && $(this).parent().find($(target)).length === 1) { | |
e.preventDefault(); | |
currentElement = $(this).parent().find($(target)); | |
var launchIntoFullscreen = function(element) { | |
if (element.requestFullscreen) { | |
element.requestFullscreen(); | |
} else if (element.mozRequestFullScreen) { | |
element.mozRequestFullScreen(); | |
} else if (element.webkitRequestFullscreen) { | |
element.webkitRequestFullscreen(); | |
} else if (element.msRequestFullscreen) { | |
element.msRequestFullscreen(); | |
} | |
}; | |
launchIntoFullscreen(currentElement.get(0)); | |
currentElement.parent().addClass('is-fullscreen'); | |
} | |
}); | |
} | |
}); | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This was the script that worked for me, after testing/modifying about 5 others. Thanks!