jquery.iframe-auto-height.plugin.1.9.5.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. /*jslint white: true, indent: 2, onevar: false, browser: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: false, newcap: true, immed: true */
  2. /*global window, console, jQuery, setTimeout */
  3. /*
  4. Plugin: iframe autoheight jQuery Plugin
  5. Version: 1.9.5
  6. Author and Contributors
  7. ========================================
  8. NATHAN SMITH (http://sonspring.com/)
  9. Jesse House (https://github.com/house9)
  10. aaron manela (https://github.com/aaronmanela)
  11. Hideki Abe (https://github.com/hideki-a)
  12. Patrick Clark (https://github.com/hellopat)
  13. ChristineP2 (https://github.com/ChristineP2)
  14. Mmjavellana (https://github.com/Mmjavellana)
  15. yiqing-95 (https://github.com/yiqing-95)
  16. jcaspian (https://github.com/jcaspian)
  17. adamjgray (https://github.com/adamjgray)
  18. Jens Bissinger (https://github.com/dpree)
  19. jbreton (https://github.com/jbreton)
  20. mindmelting (https://github.com/mindmelting)
  21. File: jquery.iframe-auto-height.plugin.js
  22. Remarks: original code from http://sonspring.com/journal/jquery-iframe-sizing
  23. Description: when the page loads set the height of an iframe based on the height of its contents
  24. see README: http://github.com/house9/jquery-iframe-auto-height
  25. */
  26. (function ($) {
  27. $.fn.iframeAutoHeight = function (spec) {
  28. var undef;
  29. if ($.browser === undef) {
  30. var message = [];
  31. message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
  32. message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
  33. message.push("Install jquery-browser: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js");
  34. alert(message.join("\n"));
  35. return $;
  36. }
  37. // set default option values
  38. var options = $.extend({
  39. heightOffset: 0,
  40. minHeight: 0,
  41. maxHeight: 0,
  42. callback: function (newHeight) {},
  43. animate: false,
  44. debug: false,
  45. diagnostics: false, // used for development only
  46. resetToMinHeight: false,
  47. triggerFunctions: [],
  48. heightCalculationOverrides: []
  49. }, spec);
  50. // logging
  51. function debug(message) {
  52. if (options.debug && options.debug === true && window.console) {
  53. console.log(message);
  54. }
  55. }
  56. // not used by production code
  57. function showDiagnostics(iframe, calledFrom) {
  58. debug("Diagnostics from '" + calledFrom + "'");
  59. try {
  60. debug(" " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");
  61. debug(" " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");
  62. debug(" " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");
  63. } catch (ex) {
  64. // ie fails when called during for each, ok later on
  65. // probably not an issue if called in a document ready block
  66. debug(" unable to check in this state");
  67. }
  68. debug("End diagnostics -> results vary by browser and when diagnostics are requested");
  69. }
  70. // show all option values
  71. debug(options);
  72. // ******************************************************
  73. // iterate over the matched elements passed to the plugin ; return will make it chainable
  74. return this.each(function () {
  75. // ******************************************************
  76. // http://api.jquery.com/jQuery.browser/
  77. var strategyKeys = ['webkit', 'mozilla', 'msie', 'opera'];
  78. var strategies = {};
  79. strategies['default'] = function (iframe, $iframeBody, options, browser) {
  80. // NOTE: this is how the plugin determines the iframe height, override if you need custom
  81. return $iframeBody[0].scrollHeight + options.heightOffset;
  82. };
  83. jQuery.each(strategyKeys, function (index, value) {
  84. // use the default strategy for all browsers, can be overridden if desired
  85. strategies[value] = strategies['default'];
  86. });
  87. // override strategies if registered in options
  88. jQuery.each(options.heightCalculationOverrides, function (index, value) {
  89. strategies[value.browser] = value.calculation;
  90. });
  91. function findStrategy(browser) {
  92. var strategy = null;
  93. jQuery.each(strategyKeys, function (index, value) {
  94. if (browser[value]) {
  95. strategy = strategies[value];
  96. return false;
  97. }
  98. });
  99. if (strategy === null) {
  100. strategy = strategies['default'];
  101. }
  102. return strategy;
  103. }
  104. // ******************************************************
  105. // for use by webkit only
  106. var loadCounter = 0;
  107. var iframeDoc = this.contentDocument || this.contentWindow.document;
  108. // resizeHeight
  109. function resizeHeight(iframe) {
  110. if (options.diagnostics) {
  111. showDiagnostics(iframe, "resizeHeight");
  112. }
  113. // set the iframe size to minHeight so it'll get smaller on resizes in FF and IE
  114. if (options.resetToMinHeight && options.resetToMinHeight === true) {
  115. iframe.style.height = options.minHeight + 'px';
  116. }
  117. // get the iframe body height and set inline style to that plus a little
  118. var $body = $(iframe, window.top.document).contents().find('body');
  119. var strategy = findStrategy($.browser);
  120. var newHeight = strategy(iframe, $body, options, $.browser);
  121. debug(newHeight);
  122. if (newHeight < options.minHeight) {
  123. debug("new height is less than minHeight");
  124. newHeight = options.minHeight;
  125. }
  126. if (options.maxHeight > 0 && newHeight > options.maxHeight) {
  127. debug("new height is greater than maxHeight");
  128. newHeight = options.maxHeight;
  129. }
  130. newHeight += options.heightOffset;
  131. debug("New Height: " + newHeight);
  132. if (options.animate) {
  133. $(iframe).animate({height: newHeight + 'px'}, {duration: 500});
  134. } else {
  135. iframe.style.height = newHeight + 'px';
  136. }
  137. options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);
  138. } // END resizeHeight
  139. // debug me
  140. debug(this);
  141. if (options.diagnostics) {
  142. showDiagnostics(this, "each iframe");
  143. }
  144. // if trigger functions are registered, invoke them
  145. if (options.triggerFunctions.length > 0) {
  146. debug(options.triggerFunctions.length + " trigger Functions");
  147. for (var i = 0; i < options.triggerFunctions.length; i++) {
  148. options.triggerFunctions[i](resizeHeight, this);
  149. }
  150. }
  151. // Check if browser is Webkit (Safari/Chrome) or Opera
  152. if ($.browser.webkit || $.browser.opera || $.browser.chrome) {
  153. debug("browser is webkit or opera");
  154. // Start timer when loaded.
  155. $(this).load(function () {
  156. var delay = 0;
  157. var iframe = this;
  158. var delayedResize = function () {
  159. resizeHeight(iframe);
  160. };
  161. if (loadCounter === 0) {
  162. // delay the first one
  163. delay = 500;
  164. } else {
  165. // Reset iframe height to 0 to force new frame size to fit window properly
  166. // this is only an issue when going from large to small iframe, not executed on page load
  167. iframe.style.height = options.minHeight + 'px';
  168. }
  169. debug("load delay: " + delay);
  170. setTimeout(delayedResize, delay);
  171. loadCounter++;
  172. });
  173. // Safari and Opera need a kick-start.
  174. var source = $(this).attr('src');
  175. $(this).attr('src', '');
  176. $(this).attr('src', source);
  177. } else {
  178. // For other browsers.
  179. if(iframeDoc.readyState === 'complete') {
  180. resizeHeight(this);
  181. } else {
  182. $(this).load(function () {
  183. resizeHeight(this);
  184. });
  185. }
  186. } // if browser
  187. }); // $(this).each(function () {
  188. }; // $.fn.iframeAutoHeight = function (options) {
  189. }(jQuery)); // (function ($) {