IFrame.html 5.5 KB

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