iframeloader.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. (function() {
  2. /**
  3. * WYSIWYG 편집 영역에 해당하는 <iframe> 을 초기화한다.
  4. * document.write 방식을 이용하여 iframe을 초기화 하며, 용
  5. * IE + document.domain 이 지정된 경우 document.domain 이 지정된 iframe(catalyst)을 먼저 로딩하여
  6. * iframe 에 접근가능하도록 처리 한 후, document.write 를 실행한다.
  7. * @private
  8. * @class
  9. */
  10. Trex.WysiwygIframeLoader = Trex.Class.create({
  11. initialize: function(iframe, iframeUrl, doctype) {
  12. this.iframe = iframe;
  13. this.iframeUrl = iframeUrl;
  14. this.doctype = '';
  15. switch (doctype) {
  16. case "edge":
  17. case "loose":
  18. case "strict":
  19. this.doctype = doctype;
  20. // case "quirks":
  21. }
  22. },
  23. load: function(callback) {
  24. try {
  25. this.loadLocalIframe(callback, this.doctype);
  26. } catch (e) {
  27. this.reloadUsingCatalyst(callback);
  28. }
  29. },
  30. loadLocalIframe: function(callback, doctype) {
  31. var doc = this.iframe.contentWindow.document;
  32. doc.open();
  33. switch (doctype) {
  34. case "edge":
  35. doc.write(DOCTYPE_edge);
  36. break;
  37. case "loose":
  38. doc.write(DOCTYPE_loose);
  39. break;
  40. case "strict":
  41. doc.write(DOCTYPE_strict);
  42. break;
  43. }
  44. doc.write(wysiwygHTML);
  45. doc.close();
  46. // 하위 호환을 위하여 delay 처리한다. 기존 iframe observer 들이 loading 이 비동기라 가정하고 작성되어있다.
  47. setTimeout(function() {
  48. callback(doc);
  49. }, 0);
  50. },
  51. reloadUsingCatalyst: function(callback) {
  52. //console.log("retry with xss iframe catalyst");
  53. var self = this;
  54. _WIN.__tx_wysiwyg_iframe_load_complete = function() {
  55. self.loadLocalIframe(callback, ''); //이 시점에선 어차피 doctype 을 설정할 수 없음.
  56. };
  57. if (!this.iframeUrl) {
  58. var basePath = this.getIframePagePath();
  59. var doctype = this.doctype;
  60. switch (doctype) {
  61. case "edge":
  62. case "loose":
  63. case "strict":
  64. this.iframeUrl = basePath + "trex/iframe_loader_catalyst_" + doctype + ".html";
  65. break;
  66. default:
  67. this.iframeUrl = basePath + "trex/iframe_loader_catalyst.html";
  68. }
  69. }
  70. var explicitDocumentDomain = (document.location.hostname != document.domain);
  71. if (explicitDocumentDomain) {
  72. this.iframeUrl = this.iframeUrl + ((this.iframeUrl.indexOf("?") > -1) ? "&" : "?") + "xssDomain=" + document.domain;
  73. }
  74. this.iframe.src = this.iframeUrl;
  75. },
  76. getIframePagePath: function() {
  77. return EditorJSLoader.getPageBasePath('editor.js');
  78. },
  79. // 옛날 스타일
  80. loadRemoteIframe: function() {
  81. var iframe = this.el;
  82. iframe.setAttribute("src", this.canvasConfig.wysiwygUrl);
  83. }
  84. });
  85. function absolutizeURL(url) {
  86. var location = _DOC.location;
  87. if (/^(https?:|file:|)\/\//.test(url)) {
  88. } else if (url.indexOf("/") === 0) {
  89. url = "//" + location.host + ":" + (location.port || "80") + url;
  90. } else {
  91. var href = location.href;
  92. var cutPos = href.lastIndexOf("/");
  93. url = href.substring(0, cutPos + 1) + url;
  94. }
  95. return url;
  96. }
  97. var cssBasePath = absolutizeURL(EditorJSLoader.getCSSBasePath());
  98. var DOCTYPE_edge = '<!DOCTYPE html>';
  99. var DOCTYPE_loose = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
  100. var DOCTYPE_strict = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">';
  101. var wysiwygHTML =
  102. '<html lang="ko"><head>' +
  103. '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">' +
  104. '<title>DaumEditor Wygiwyg Panel</title>' +
  105. '<script id="txScriptForEval"></script>' +
  106. '<link rel="stylesheet" href="' + cssBasePath + 'content_view.css" type="text/css"></link>' +
  107. '<link rel="stylesheet" href="' + cssBasePath + 'content_wysiwyg.css" type="text/css"></link>' +
  108. '<style id="txStyleForSetRule"></style>' +
  109. '</head>' +
  110. '<body class="tx-content-container">' +
  111. $tom.EMPTY_PARAGRAPH_HTML +
  112. '</body></html>';
  113. })();