IFrame.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. /*!
  2. * Ext JS Library 4.0
  3. * Copyright(c) 2006-2011 Sencha Inc.
  4. * licensing@sencha.com
  5. * http://www.sencha.com/license
  6. */
  7. /**
  8. * Barebones iframe implementation. For serious iframe work, see the
  9. * ManagedIFrame extension
  10. * (http://www.sencha.com/forum/showthread.php?71961).
  11. */
  12. Ext.define('Ext.ux.IFrame', {
  13. extend: 'Ext.Component',
  14. alias: 'widget.uxiframe',
  15. loadMask: 'Loading...',
  16. src: 'about:blank',
  17. renderTpl: [
  18. '<iframe src="{src}" name="{frameName}" width="100%" height="100%" frameborder="0"></iframe>'
  19. ],
  20. initComponent: function () {
  21. this.callParent();
  22. this.frameName = this.frameName || this.id + '-frame';
  23. this.addEvents(
  24. 'beforeload',
  25. 'load'
  26. );
  27. Ext.apply(this.renderSelectors, {
  28. iframeEl: 'iframe'
  29. });
  30. },
  31. close:function(){
  32. if(this.tab) {
  33. this.tab.fireEvent('close', this.tab);
  34. this.ownerCt.remove(this);
  35. }
  36. },
  37. initEvents : function() {
  38. var me = this;
  39. me.callParent();
  40. me.iframeEl.on('load', me.onLoad, me);
  41. },
  42. initRenderData: function() {
  43. return Ext.apply(this.callParent(), {
  44. src: this.src,
  45. frameName: this.frameName
  46. });
  47. },
  48. getBody: function() {
  49. var doc = this.getDoc();
  50. return doc.body || doc.documentElement;
  51. },
  52. getDoc: function() {
  53. try {
  54. return this.getWin().document;
  55. } catch (ex) {
  56. return null;
  57. }
  58. },
  59. getWin: function() {
  60. var me = this,
  61. name = me.frameName,
  62. win = Ext.isIE
  63. ? me.iframeEl.dom.contentWindow
  64. : window.frames[name];
  65. return win;
  66. },
  67. getFrame: function() {
  68. var me = this;
  69. return me.iframeEl.dom;
  70. },
  71. beforeDestroy: function () {
  72. this.cleanupListeners(true);
  73. this.callParent();
  74. },
  75. cleanupListeners: function(destroying){
  76. var doc, prop;
  77. if (this.rendered) {
  78. try {
  79. doc = this.getDoc();
  80. if (doc) {
  81. Ext.EventManager.removeAll(doc);
  82. if (destroying) {
  83. for (prop in doc) {
  84. if (doc.hasOwnProperty && doc.hasOwnProperty(prop)) {
  85. delete doc[prop];
  86. }
  87. }
  88. }
  89. }
  90. } catch(e) { }
  91. }
  92. },
  93. onLoad: function() {
  94. var me = this,
  95. doc = me.getDoc(),
  96. fn = me.onRelayedEvent;
  97. if (doc) {
  98. try {
  99. Ext.EventManager.removeAll(doc);
  100. // These events need to be relayed from the inner document (where they stop
  101. // bubbling) up to the outer document. This has to be done at the DOM level so
  102. // the event reaches listeners on elements like the document body. The effected
  103. // mechanisms that depend on this bubbling behavior are listed to the right
  104. // of the event.
  105. Ext.EventManager.on(doc, {
  106. mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
  107. mousemove: fn, // window resize drag detection
  108. mouseup: fn, // window resize termination
  109. click: fn, // not sure, but just to be safe
  110. dblclick: fn, // not sure again
  111. scope: me
  112. });
  113. } catch(e) {
  114. // cannot do this xss
  115. }
  116. // We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
  117. Ext.EventManager.on(this.getWin(), 'beforeunload', me.cleanupListeners, me);
  118. this.el.unmask();
  119. this.fireEvent('load', this);
  120. } else if(me.src && me.src != '') {
  121. this.el.unmask();
  122. this.fireEvent('error', this);
  123. }
  124. },
  125. onRelayedEvent: function (event) {
  126. // relay event from the iframe's document to the document that owns the iframe...
  127. var iframeEl = this.iframeEl,
  128. // Get the left-based iframe position
  129. iframeXY = Ext.Element.getTrueXY(iframeEl),
  130. originalEventXY = event.getXY(),
  131. // Get the left-based XY position.
  132. // This is because the consumer of the injected event (Ext.EventManager) will
  133. // perform its own RTL normalization.
  134. eventXY = Ext.EventManager.getPageXY(event.browserEvent);
  135. // the event from the inner document has XY relative to that document's origin,
  136. // so adjust it to use the origin of the iframe in the outer document:
  137. event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
  138. event.injectEvent(iframeEl); // blame the iframe for the event...
  139. event.xy = originalEventXY; // restore the original XY (just for safety)
  140. },
  141. load: function (src) {
  142. var me = this,
  143. text = me.loadMask,
  144. frame = me.getFrame();
  145. if (me.fireEvent('beforeload', me, src) !== false) {
  146. if (text && me.el) {
  147. me.el.mask(text);
  148. }
  149. frame.src = me.src = (src || me.src);
  150. }
  151. }
  152. });