<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js">/*!
|
* Ext JS Library 4.0
|
* Copyright(c) 2006-2011 Sencha Inc.
|
* licensing@sencha.com
|
* http://www.sencha.com/license
|
*/
|
|
<span id='Ext-ux-IFrame'>/**
|
</span> * Barebones iframe implementation. For serious iframe work, see the
|
* ManagedIFrame extension
|
* (http://www.sencha.com/forum/showthread.php?71961).
|
*/
|
Ext.define('Ext.ux.IFrame', {
|
extend: 'Ext.Component',
|
|
alias: 'widget.uxiframe',
|
|
<span id='Ext-ux-IFrame-property-loadMask'> loadMask: 'Loading...',
|
</span>
|
<span id='Ext-ux-IFrame-property-src'> src: 'about:blank',
|
</span>
|
<span id='Ext-ux-IFrame-cfg-renderTpl'> renderTpl: [
|
</span> '<iframe src="{src}" name="{frameName}" width="100%" height="100%" frameborder="0"></iframe>'
|
],
|
|
<span id='Ext-ux-IFrame-method-initComponent'> initComponent: function () {
|
</span> this.callParent();
|
|
this.frameName = this.frameName || this.id + '-frame';
|
|
this.addEvents(
|
'beforeload',
|
'load'
|
);
|
|
Ext.apply(this.renderSelectors, {
|
iframeEl: 'iframe'
|
});
|
},
|
|
<span id='Ext-ux-IFrame-method-initEvents'> initEvents : function() {
|
</span> var me = this;
|
me.callParent();
|
me.iframeEl.on('load', me.onLoad, me);
|
},
|
|
<span id='Ext-ux-IFrame-method-initRenderData'> initRenderData: function() {
|
</span> return Ext.apply(this.callParent(), {
|
src: this.src,
|
frameName: this.frameName
|
});
|
},
|
|
<span id='Ext-ux-IFrame-method-getBody'> getBody: function() {
|
</span> var doc = this.getDoc();
|
return doc.body || doc.documentElement;
|
},
|
|
<span id='Ext-ux-IFrame-method-getDoc'> getDoc: function() {
|
</span> try {
|
return this.getWin().document;
|
} catch (ex) {
|
return null;
|
}
|
},
|
|
<span id='Ext-ux-IFrame-method-getWin'> getWin: function() {
|
</span> var me = this,
|
name = me.frameName,
|
win = Ext.isIE
|
? me.iframeEl.dom.contentWindow
|
: window.frames[name];
|
return win;
|
},
|
|
<span id='Ext-ux-IFrame-method-getFrame'> getFrame: function() {
|
</span> var me = this;
|
return me.iframeEl.dom;
|
},
|
|
<span id='Ext-ux-IFrame-method-beforeDestroy'> beforeDestroy: function () {
|
</span> this.cleanupListeners(true);
|
this.callParent();
|
},
|
|
<span id='Ext-ux-IFrame-method-cleanupListeners'> cleanupListeners: function(destroying){
|
</span> var doc, prop;
|
|
if (this.rendered) {
|
try {
|
doc = this.getDoc();
|
if (doc) {
|
Ext.EventManager.removeAll(doc);
|
if (destroying) {
|
for (prop in doc) {
|
if (doc.hasOwnProperty && doc.hasOwnProperty(prop)) {
|
delete doc[prop];
|
}
|
}
|
}
|
}
|
} catch(e) { }
|
}
|
},
|
|
<span id='Ext-ux-IFrame-method-onLoad'> onLoad: function() {
|
</span> var me = this,
|
doc = me.getDoc(),
|
fn = me.onRelayedEvent;
|
|
if (doc) {
|
try {
|
Ext.EventManager.removeAll(doc);
|
|
// These events need to be relayed from the inner document (where they stop
|
// bubbling) up to the outer document. This has to be done at the DOM level so
|
// the event reaches listeners on elements like the document body. The effected
|
// mechanisms that depend on this bubbling behavior are listed to the right
|
// of the event.
|
Ext.EventManager.on(doc, {
|
mousedown: fn, // menu dismisal (MenuManager) and Window onMouseDown (toFront)
|
mousemove: fn, // window resize drag detection
|
mouseup: fn, // window resize termination
|
click: fn, // not sure, but just to be safe
|
dblclick: fn, // not sure again
|
scope: me
|
});
|
} catch(e) {
|
// cannot do this xss
|
}
|
|
// We need to be sure we remove all our events from the iframe on unload or we're going to LEAK!
|
Ext.EventManager.on(this.getWin(), 'beforeunload', me.cleanupListeners, me);
|
|
this.el.unmask();
|
this.fireEvent('load', this);
|
|
} else if(me.src && me.src != '') {
|
|
this.el.unmask();
|
this.fireEvent('error', this);
|
}
|
|
|
},
|
|
<span id='Ext-ux-IFrame-method-onRelayedEvent'> onRelayedEvent: function (event) {
|
</span> // relay event from the iframe's document to the document that owns the iframe...
|
|
var iframeEl = this.iframeEl,
|
|
// Get the left-based iframe position
|
iframeXY = Ext.Element.getTrueXY(iframeEl),
|
originalEventXY = event.getXY(),
|
|
// Get the left-based XY position.
|
// This is because the consumer of the injected event (Ext.EventManager) will
|
// perform its own RTL normalization.
|
eventXY = Ext.EventManager.getPageXY(event.browserEvent);
|
|
// the event from the inner document has XY relative to that document's origin,
|
// so adjust it to use the origin of the iframe in the outer document:
|
event.xy = [iframeXY[0] + eventXY[0], iframeXY[1] + eventXY[1]];
|
|
event.injectEvent(iframeEl); // blame the iframe for the event...
|
|
event.xy = originalEventXY; // restore the original XY (just for safety)
|
},
|
|
<span id='Ext-ux-IFrame-method-load'> load: function (src) {
|
</span> var me = this,
|
text = me.loadMask,
|
frame = me.getFrame();
|
|
if (me.fireEvent('beforeload', me, src) !== false) {
|
if (text && me.el) {
|
me.el.mask(text);
|
}
|
|
frame.src = me.src = (src || me.src);
|
}
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
