jquery.fullscreen.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /**
  2. * 基于jQuery FullScreen修改
  3. * 新增支持IE全屏显示
  4. * Copyright (c) 2019 ruoyi
  5. */
  6. /*jshint browser: true, jquery: true */
  7. (function($){
  8. "use strict";
  9. // These helper functions available only to our plugin scope.
  10. function supportFullScreen(){
  11. var doc = document.documentElement;
  12. return ('requestFullscreen' in doc) ||
  13. ('msRequestFullscreen' in doc) ||
  14. ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
  15. ('webkitRequestFullScreen' in doc);
  16. }
  17. function requestFullScreen(elem){
  18. if (elem.requestFullscreen) {
  19. elem.requestFullscreen();
  20. } else if (elem.mozRequestFullScreen) {
  21. elem.mozRequestFullScreen();
  22. } else if (elem.webkitRequestFullScreen) {
  23. elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  24. } else if (elem.msRequestFullscreen) {
  25. elem.msRequestFullscreen();
  26. }
  27. }
  28. function fullScreenStatus(){
  29. return document.fullscreen ||
  30. document.mozFullScreen ||
  31. document.webkitIsFullScreen ||
  32. document.msFullscreenElement ||
  33. false;
  34. }
  35. function cancelFullScreen(){
  36. if (document.exitFullscreen) {
  37. document.exitFullscreen();
  38. } else if (document.mozCancelFullScreen) {
  39. document.mozCancelFullScreen();
  40. } else if (document.webkitCancelFullScreen) {
  41. document.webkitCancelFullScreen();
  42. } else if (document.msExitFullscreen) {
  43. document.msExitFullscreen();
  44. }
  45. }
  46. function onFullScreenEvent(callback){
  47. $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
  48. // The full screen status is automatically
  49. // passed to our callback as an argument.
  50. callback(fullScreenStatus());
  51. });
  52. }
  53. // Adding a new test to the jQuery support object
  54. $.support.fullscreen = supportFullScreen();
  55. // Creating the plugin
  56. $.fn.fullScreen = function(props){
  57. if(!$.support.fullscreen || this.length !== 1) {
  58. // The plugin can be called only
  59. // on one element at a time
  60. return this;
  61. }
  62. if(fullScreenStatus()){
  63. // if we are already in fullscreen, exit
  64. cancelFullScreen();
  65. return this;
  66. }
  67. // You can potentially pas two arguments a color
  68. // for the background and a callback function
  69. var options = $.extend({
  70. 'background' : '#111',
  71. 'callback' : $.noop( ),
  72. 'fullscreenClass' : 'fullScreen'
  73. }, props),
  74. elem = this,
  75. // This temporary div is the element that is
  76. // actually going to be enlarged in full screen
  77. fs = $('<div>', {
  78. 'css' : {
  79. 'overflow-y' : 'auto',
  80. 'background' : options.background,
  81. 'width' : '100%',
  82. 'height' : '100%'
  83. }
  84. })
  85. .insertBefore(elem)
  86. .append(elem);
  87. // You can use the .fullScreen class to
  88. // apply styling to your element
  89. elem.addClass( options.fullscreenClass );
  90. // Inserting our element in the temporary
  91. // div, after which we zoom it in fullscreen
  92. requestFullScreen(fs.get(0));
  93. fs.click(function(e){
  94. if(e.target == this){
  95. // If the black bar was clicked
  96. cancelFullScreen();
  97. }
  98. });
  99. elem.cancel = function(){
  100. cancelFullScreen();
  101. return elem;
  102. };
  103. onFullScreenEvent(function(fullScreen){
  104. if(!fullScreen){
  105. // We have exited full screen.
  106. // Detach event listener
  107. $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' );
  108. // Remove the class and destroy
  109. // the temporary div
  110. elem.removeClass( options.fullscreenClass ).insertBefore(fs);
  111. fs.remove();
  112. }
  113. // Calling the facultative user supplied callback
  114. if(options.callback) {
  115. options.callback(fullScreen);
  116. }
  117. });
  118. return elem;
  119. };
  120. $.fn.cancelFullScreen = function( ) {
  121. cancelFullScreen();
  122. return this;
  123. };
  124. }(jQuery));