[2.0 only] ux.ManagedIframe/Panel (1.2.7)

[hendricd]

ux.ManagedIFrame/Panel (Current Release 1.2.7, for Ext 2.2.x or under only)

A version for Ext 3.0 can be found here.

The latest build is also available on code.google.

Some features available:

• UpdateManager.update and load support (to IFrames document).
• advanced scripting support.
• loadMask support.
• Cross-frame messaging

Supported events:

• documentloaded
• domready (fired when used with Updatemanager.update method, or when the document DOM reports ready)
• message[: subject]
• exception
• blur (fired when the frame window loses focus)
• focus (fired when the frame window receives focus)
• unload (fired when the frame document is unloaded)

ux.ManagedIframePanel (Current Release 1.2, extends Ext.Panel) leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of the panel. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex body layouts surrounding an IFrame.

Licensing: MIF/MIFP v1.2 or higher is dual-licensed: LGPL 3.0 or CDL for commercial use.

Related Links:

• Wiki Manual here.
• MIF Frame Security and the "same-origin" policy.
• FF IFRAME Refresh Troubles?
• For an advanced demonstration, see post: "Load Ext once, and apply it to your frames".
• Previous 1.0 Baseline Forum thread.

Usage Example:

var newFrame = yourTabPanel.add({
    xtype       : 'iframepanel',
    id            : 'mifp_1',
    title         : 'Loading...',
    loadMask  : true,
    frameConfig: {{autoCreate:{id: 'frame1'}},  //optional, give the frame your own id and name
    defaultSrc : 'assets/someURL.html',
    listeners: {
       domready : function(frame){ //only raised for "same-origin" documents
            //Set the tab Title to the Document Title
             var doc= frame.getDocument();
             if(doc){ frame.ownerCt.setTitle(doc.title); }
 
            //Add some custom CSS Rules to the frame document
            var rule = 'p.fancyP {padding:5px 10px 5px 10px;border:1px solid;' +
                               'font:normal 11px tahoma,arial,helvetica,sans-serif;}';
            frame.CSS.createStyleSheet( rule, 'fancyP' );
 
            //Find all the 'p' tags in the frame docuement, and add the fancyP className to them
            frame.select('p').addClass('fancyP');              
       }
    }
});
yourTabPanel.doLayout();  //if TabPanel is already rendered
yourTabPanel.setActiveTab(newFrame); 

More Examples:
Extract the current source and demo files from miframe1_2.zip directly into a new/existing: /examples/miframe directory of your standard 2.x Ext.distribution (except for the desktop.zip demo -- that should go in /examples/desktop).

Updated: Version 1.1 This new baseline (1.1) adds:

• frame Ext.Element support (ie. MIF.get, getDom, getDoc, fly ),
• frame CSS selector queries (eg. MIF.select/query) ,
• frame CSS.styleSheet interface (create, modify, remove frame-embedded style rules)
• frame Ext.EventManager support to DOM elements embedded in a frames document. (Use the MIF interface to query embedded DOM elements just like you would in the parent document; all without loading the Ext framework within the embedded page):

MIF.select('img',true).setOpacity(.5);  or
MIFPanel.getFrame().select('img',true).setOpacity(.5); 

Set EventListeners on a frames DOM elements for handling with scripts hosted in the parent page:

MIF.getDoc().on('click',function(e){ alert( 'Image ' + e.getTarget().id + ' was Clicked.') },null, {delegate:'img'}); 

Updated (8/22/08): Version 1.2 released. Adds FF3 compatibility fixes, and improved loadMask support.

Updated (4/26/09): Version 1.2.4 released. Adds [s]Ext 3.0 compatibility[s/] no longer, and adds 'resize' event support.
Updated (5/16/09): V 1.2.5 fixes X-Frame Messaging bug.
Updated (6/30/09): V 1.2.6 fixes domready bug, adds submitAsTarget method.
Updated (11/10/09): V 1.2.7 fixes another domready bug.

Thanks to all for the valuable feedback.
Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

[wm003]

Great Stuff! Thanks for such a useful Extension!

[Zakaroonikov]

If I were to point this to say a PDF file or Word document would any event fire after the file had been launched?

[hendricd]

@Zakaroonikov -- If you are speaking of "same-origin" documents, you can get the MIF's 'domready' event working for you as it would fire immediately after the frames' new page markup as been DOMized.

Also, there is the 'documentloaded' event which is raised when all the 'assets' are finally loaded.

Short of that, you'd need a browser.plugin event to guarantee full 'load' status.

[fangzhouxing]

Can anyone give some scenario that must use ManagedIframePanel instead of other component?

[hendricd]

@fangzhouxing -- other component?

[nkohari]

This is fantastic! Thanks hendricd. You might also want to note that in 1.1 you have to hook listeners to the ManagedIframePanel itself, rather than putting them in the frameConfig as you did with 1.0x. Unless, that is, I was just doing something "unsupported" that happened to work.

Keep up the great work on this extension, it's been a lifesaver for me.

[mykes]

Can anyone give some scenario that must use ManagedIframePanel instead of other component?

Any place you would display user generated content. If the user can somehow create bad HTML (no close tags for tables or divs or whatever), it can screw up the page display in "other" components.

[hendricd]

@nkohari -- No, that is by design. The MIF events are actually "relayed" to the MIFPanel listeners if you define them on the Panel.

The frameConfig allows the same listeners to be passed to MIF class too (via the Panel), your choice.

[mykes]

OK, maybe this is a little over the top, but...

window.onload = function() {
    var base = top.location.href;
    base = base.replace(/\?.*$/, "");
    base = base.replace(/\#.*$/, "");
    var base_len = base.length;
    var anchorTags = document.getElementsByTagName('a');
    for (var i = 0; i < anchorTags.length; i++)
    {
        var url = anchorTags[i].href;
        if (url.substr(0, base_len) != base) {
            anchorTags[i].onclick = function() {
                var i = 0;
                window.open(url);
                return false;
            }
        }
        else {
            anchorTags[i].onclick = function() {
                location.href = url;
                return false; 
            }
        }
    }
}

If you run the above code in the iframe, on document load, it fixes all the non-local-domain links so they open in a new window. I give you this code because it doesn't require you to load Ext into the iframe...

Now if you display some user generated HTML content in the iframe that has a link in it, when the user clicks on the link, it doesn't wipe out the entire desktop to load the new page in the browser.

You could run that code for people if some config variable is passed to iframe constructor.

Feel free to modify it to suit your purposes