jquery.fullscreen.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. /**
  2. * 基于jQuery FullScreen修改
  3. * 新增支持IE全屏显示
  4. * Copyright (c) 2019 ruoyi
  5. */
  6. (function(jQuery) {
  7. /**
  8. * Sets or gets the fullscreen state.
  9. *
  10. * @param {boolean=} state
  11. * True to enable fullscreen mode, false to disable it. If not
  12. * specified then the current fullscreen state is returned.
  13. * @return {boolean|Element|jQuery|null}
  14. * When querying the fullscreen state then the current fullscreen
  15. * element (or true if browser doesn't support it) is returned
  16. * when browser is currently in full screen mode. False is returned
  17. * if browser is not in full screen mode. Null is returned if
  18. * browser doesn't support fullscreen mode at all. When setting
  19. * the fullscreen state then the current jQuery selection is
  20. * returned for chaining.
  21. * @this {jQuery}
  22. */
  23. function fullScreen(state)
  24. {
  25. var e, func, doc;
  26. // Do nothing when nothing was selected
  27. if (!this.length) return this;
  28. // We only use the first selected element because it doesn't make sense
  29. // to fullscreen multiple elements.
  30. e = (/** @type {Element} */ this[0]);
  31. // Find the real element and the document (Depends on whether the
  32. // document itself or a HTML element was selected)
  33. if (e.ownerDocument)
  34. {
  35. doc = e.ownerDocument;
  36. }
  37. else
  38. {
  39. doc = e;
  40. e = doc.documentElement;
  41. }
  42. // When no state was specified then return the current state.
  43. if (state == null)
  44. {
  45. // When fullscreen mode is not supported then return null
  46. if (!((/** @type {?Function} */ doc["exitFullscreen"])
  47. || (/** @type {?Function} */ doc["webkitExitFullscreen"])
  48. || (/** @type {?Function} */ doc["webkitCancelFullScreen"])
  49. || (/** @type {?Function} */ doc["msExitFullscreen"])
  50. || (/** @type {?Function} */ doc["mozCancelFullScreen"])))
  51. {
  52. return null;
  53. }
  54. // Check fullscreen state
  55. state = !!doc["fullscreenElement"]
  56. || !!doc["msFullscreenElement"]
  57. || !!doc["webkitIsFullScreen"]
  58. || !!doc["mozFullScreen"];
  59. if (!state) return state;
  60. // Return current fullscreen element or "true" if browser doesn't
  61. // support this
  62. return (/** @type {?Element} */ doc["fullscreenElement"])
  63. || (/** @type {?Element} */ doc["webkitFullscreenElement"])
  64. || (/** @type {?Element} */ doc["webkitCurrentFullScreenElement"])
  65. || (/** @type {?Element} */ doc["msFullscreenElement"])
  66. || (/** @type {?Element} */ doc["mozFullScreenElement"])
  67. || state;
  68. }
  69. // When state was specified then enter or exit fullscreen mode.
  70. if (state)
  71. {
  72. // Enter fullscreen
  73. func = (/** @type {?Function} */ e["requestFullscreen"])
  74. || (/** @type {?Function} */ e["webkitRequestFullscreen"])
  75. || (/** @type {?Function} */ e["webkitRequestFullScreen"])
  76. || (/** @type {?Function} */ e["msRequestFullscreen"])
  77. || (/** @type {?Function} */ e["mozRequestFullScreen"]);
  78. if (func)
  79. {
  80. func.call(e);
  81. }
  82. return this;
  83. }
  84. else
  85. {
  86. // Exit fullscreen
  87. func = (/** @type {?Function} */ doc["exitFullscreen"])
  88. || (/** @type {?Function} */ doc["webkitExitFullscreen"])
  89. || (/** @type {?Function} */ doc["webkitCancelFullScreen"])
  90. || (/** @type {?Function} */ doc["msExitFullscreen"])
  91. || (/** @type {?Function} */ doc["mozCancelFullScreen"]);
  92. if (func) func.call(doc);
  93. return this;
  94. }
  95. }
  96. /**
  97. * Toggles the fullscreen mode.
  98. *
  99. * @return {!jQuery}
  100. * The jQuery selection for chaining.
  101. * @this {jQuery}
  102. */
  103. function toggleFullScreen()
  104. {
  105. return (/** @type {!jQuery} */ fullScreen.call(this,
  106. !fullScreen.call(this)));
  107. }
  108. /**
  109. * Handles the browser-specific fullscreenchange event and triggers
  110. * a jquery event for it.
  111. *
  112. * @param {?Event} event
  113. * The fullscreenchange event.
  114. */
  115. function fullScreenChangeHandler(event)
  116. {
  117. jQuery(document).trigger(new jQuery.Event("fullscreenchange"));
  118. }
  119. /**
  120. * Handles the browser-specific fullscreenerror event and triggers
  121. * a jquery event for it.
  122. *
  123. * @param {?Event} event
  124. * The fullscreenerror event.
  125. */
  126. function fullScreenErrorHandler(event)
  127. {
  128. jQuery(document).trigger(new jQuery.Event("fullscreenerror"));
  129. }
  130. /**
  131. * Installs the fullscreenchange event handler.
  132. */
  133. function installFullScreenHandlers()
  134. {
  135. var e, change, error;
  136. // Determine event name
  137. e = document;
  138. if (e["webkitCancelFullScreen"])
  139. {
  140. change = "webkitfullscreenchange";
  141. error = "webkitfullscreenerror";
  142. }
  143. else if (e["msExitFullscreen"])
  144. {
  145. change = "MSFullscreenChange";
  146. error = "MSFullscreenError";
  147. }
  148. else if (e["mozCancelFullScreen"])
  149. {
  150. change = "mozfullscreenchange";
  151. error = "mozfullscreenerror";
  152. }
  153. else
  154. {
  155. change = "fullscreenchange";
  156. error = "fullscreenerror";
  157. }
  158. // Install the event handlers
  159. jQuery(document).bind(change, fullScreenChangeHandler);
  160. jQuery(document).bind(error, fullScreenErrorHandler);
  161. }
  162. jQuery.fn["fullScreen"] = fullScreen;
  163. jQuery.fn["toggleFullScreen"] = toggleFullScreen;
  164. installFullScreenHandlers();
  165. })(jQuery);