jquery.iframe-transport.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /*
  2. * jQuery Iframe Transport Plugin 1.8.2
  3. * https://github.com/blueimp/jQuery-File-Upload
  4. *
  5. * Copyright 2011, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * http://www.opensource.org/licenses/MIT
  10. */
  11. /* global define, window, document */
  12. (function (factory) {
  13. 'use strict';
  14. if (typeof define === 'function' && define.amd) {
  15. // Register as an anonymous AMD module:
  16. define(['jquery'], factory);
  17. } else {
  18. // Browser globals:
  19. factory(window.jQuery);
  20. }
  21. }(function ($) {
  22. 'use strict';
  23. // Helper variable to create unique names for the transport iframes:
  24. var counter = 0;
  25. // The iframe transport accepts four additional options:
  26. // options.fileInput: a jQuery collection of file input fields
  27. // options.paramName: the parameter name for the file form data,
  28. // overrides the name property of the file input field(s),
  29. // can be a string or an array of strings.
  30. // options.formData: an array of objects with name and value properties,
  31. // equivalent to the return data of .serializeArray(), e.g.:
  32. // [{name: 'a', value: 1}, {name: 'b', value: 2}]
  33. // options.initialIframeSrc: the URL of the initial iframe src,
  34. // by default set to "javascript:false;"
  35. $.ajaxTransport('iframe', function (options) {
  36. if (options.async) {
  37. // javascript:false as initial iframe src
  38. // prevents warning popups on HTTPS in IE6:
  39. /*jshint scripturl: true */
  40. var initialIframeSrc = options.initialIframeSrc || 'javascript:false;',
  41. /*jshint scripturl: false */
  42. form,
  43. iframe,
  44. addParamChar;
  45. return {
  46. send: function (_, completeCallback) {
  47. form = $('<form style="display:none;"></form>');
  48. form.attr('accept-charset', options.formAcceptCharset);
  49. addParamChar = /\?/.test(options.url) ? '&' : '?';
  50. // XDomainRequest only supports GET and POST:
  51. if (options.type === 'DELETE') {
  52. options.url = options.url + addParamChar + '_method=DELETE';
  53. options.type = 'POST';
  54. } else if (options.type === 'PUT') {
  55. options.url = options.url + addParamChar + '_method=PUT';
  56. options.type = 'POST';
  57. } else if (options.type === 'PATCH') {
  58. options.url = options.url + addParamChar + '_method=PATCH';
  59. options.type = 'POST';
  60. }
  61. // IE versions below IE8 cannot set the name property of
  62. // elements that have already been added to the DOM,
  63. // so we set the name along with the iframe HTML markup:
  64. counter += 1;
  65. iframe = $(
  66. '<iframe src="' + initialIframeSrc +
  67. '" name="iframe-transport-' + counter + '"></iframe>'
  68. ).bind('load', function () {
  69. var fileInputClones,
  70. paramNames = $.isArray(options.paramName) ?
  71. options.paramName : [options.paramName];
  72. iframe
  73. .unbind('load')
  74. .bind('load', function () {
  75. var response;
  76. // Wrap in a try/catch block to catch exceptions thrown
  77. // when trying to access cross-domain iframe contents:
  78. try {
  79. response = iframe.contents();
  80. // Google Chrome and Firefox do not throw an
  81. // exception when calling iframe.contents() on
  82. // cross-domain requests, so we unify the response:
  83. if (!response.length || !response[0].firstChild) {
  84. throw new Error();
  85. }
  86. } catch (e) {
  87. response = undefined;
  88. }
  89. // The complete callback returns the
  90. // iframe content document as response object:
  91. completeCallback(
  92. 200,
  93. 'success',
  94. {'iframe': response}
  95. );
  96. // Fix for IE endless progress bar activity bug
  97. // (happens on form submits to iframe targets):
  98. $('<iframe src="' + initialIframeSrc + '"></iframe>')
  99. .appendTo(form);
  100. window.setTimeout(function () {
  101. // Removing the form in a setTimeout call
  102. // allows Chrome's developer tools to display
  103. // the response result
  104. form.remove();
  105. }, 0);
  106. });
  107. form
  108. .prop('target', iframe.prop('name'))
  109. .prop('action', options.url)
  110. .prop('method', options.type);
  111. if (options.formData) {
  112. $.each(options.formData, function (index, field) {
  113. $('<input type="hidden"/>')
  114. .prop('name', field.name)
  115. .val(field.value)
  116. .appendTo(form);
  117. });
  118. }
  119. if (options.fileInput && options.fileInput.length &&
  120. options.type === 'POST') {
  121. fileInputClones = options.fileInput.clone();
  122. // Insert a clone for each file input field:
  123. options.fileInput.after(function (index) {
  124. return fileInputClones[index];
  125. });
  126. if (options.paramName) {
  127. options.fileInput.each(function (index) {
  128. $(this).prop(
  129. 'name',
  130. paramNames[index] || options.paramName
  131. );
  132. });
  133. }
  134. // Appending the file input fields to the hidden form
  135. // removes them from their original location:
  136. form
  137. .append(options.fileInput)
  138. .prop('enctype', 'multipart/form-data')
  139. // enctype must be set as encoding for IE:
  140. .prop('encoding', 'multipart/form-data');
  141. // Remove the HTML5 form attribute from the input(s):
  142. options.fileInput.removeAttr('form');
  143. }
  144. form.submit();
  145. // Insert the file input fields at their original location
  146. // by replacing the clones with the originals:
  147. if (fileInputClones && fileInputClones.length) {
  148. options.fileInput.each(function (index, input) {
  149. var clone = $(fileInputClones[index]);
  150. // Restore the original name and form properties:
  151. $(input)
  152. .prop('name', clone.prop('name'))
  153. .attr('form', clone.attr('form'));
  154. clone.replaceWith(input);
  155. });
  156. }
  157. });
  158. form.append(iframe).appendTo(document.body);
  159. },
  160. abort: function () {
  161. if (iframe) {
  162. // javascript:false as iframe src aborts the request
  163. // and prevents warning popups on HTTPS in IE6.
  164. // concat is used to avoid the "Script URL" JSLint error:
  165. iframe
  166. .unbind('load')
  167. .prop('src', initialIframeSrc);
  168. }
  169. if (form) {
  170. form.remove();
  171. }
  172. }
  173. };
  174. }
  175. });
  176. // The iframe transport returns the iframe content document as response.
  177. // The following adds converters from iframe to text, json, html, xml
  178. // and script.
  179. // Please note that the Content-Type for JSON responses has to be text/plain
  180. // or text/html, if the browser doesn't include application/json in the
  181. // Accept header, else IE will show a download dialog.
  182. // The Content-Type for XML responses on the other hand has to be always
  183. // application/xml or text/xml, so IE properly parses the XML response.
  184. // See also
  185. // https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation
  186. $.ajaxSetup({
  187. converters: {
  188. 'iframe text': function (iframe) {
  189. return iframe && $(iframe[0].body).text();
  190. },
  191. 'iframe json': function (iframe) {
  192. return iframe && $.parseJSON($(iframe[0].body).text());
  193. },
  194. 'iframe html': function (iframe) {
  195. return iframe && $(iframe[0].body).html();
  196. },
  197. 'iframe xml': function (iframe) {
  198. var xmlDoc = iframe && iframe[0];
  199. return xmlDoc && $.isXMLDoc(xmlDoc) ? xmlDoc :
  200. $.parseXML((xmlDoc.XMLDocument && xmlDoc.XMLDocument.xml) ||
  201. $(xmlDoc.body).html());
  202. },
  203. 'iframe script': function (iframe) {
  204. return iframe && $.globalEval($(iframe[0].body).text());
  205. }
  206. }
  207. });
  208. }));