jquery.iframe-transport.js 8.4 KB

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