[3.0.x, 3.1.1] ux.ManagedIFrame 2.x

[mailme_gx]

Thanks hendricd

Once I updated from svn it worked fine..

Thank you. your help is appriciated

GX

[Dumbledore]

Hi,

i have a problem with th load function(). I make a small test-script (adapted form the FAQ).
When i call window.myload() from the firebug commandline, the iFrame will reset, but not loaded. Where is my mistake?

Bye, Dumbledore

            Ext.onReady(function(){
                Ext.BLANK_IMAGE_URL = 'lib/js/ext/resources/images/default/s.gif';
                var MIF = new Ext.ux.ManagedIFrame.Panel({
                    border: false,
                    bodyBorder: false,
                    defaultSrc: 'http://www.google.de',
                    listeners: {
                        'domready': function(frame){
                            var fbody = frame.getBody();
                            var w = Ext.getCmp('myFrameWin');
                            if (w && fbody) {
                                //calc current offsets for Window body border and padding
                                var bHeightAdj = w.body.getHeight() - w.body.getHeight(true);
                                var bWidthAdj = w.body.getWidth() - w.body.getWidth(true);
                                //Window is rendered (has size) but invisible
                                w.setSize(Math.max(w.minWidth || 0, fbody.scrollWidth + w.getFrameWidth() + bWidthAdj), Math.max(w.minHeight || 0, fbody.scrollHeight + w.getFrameHeight() + bHeightAdj));
                                //then show it sized to frame document
                                w.show();
                            }
                        }
                    }
                });
                var windowFrame = new Ext.Window({
                    title: name,
                    width: 400, //give it something to start with until the frame renders
                    height: 600,
                    hideMode: 'visibility',
                    id: 'myFrameWin',
                    hidden: true, //wait till you know the size
                    title: 'Sized To Frame Document',
                    plain: true,
                    constrainHeader: true,
                    minimizable: true,
                    ddScroll: false,
                    border: false,
                    bodyBorder: false,
                    layout: 'fit',
                    plain: true,
                    maximizable: true,
                    buttonAlign: 'center',
                    items: MIF
                });
                windowFrame.render(Ext.getBody());
                
                windowFrame.show();
                
                window.myload =  function(){
                    MIF.load({
                        url     : 'http://www.heise.de',
                        //callback: yourFunction,
                        //scope: yourObject, // optional scope for the callback
                        discardUrl: false,
                        nocache: false,
                        text    : 'Loading...',
                        timeout: 30,
                        scripts: false
                    })
                }

[hendricd]

@Dumbledore -- Try setting a callback function on the load request. Success?

MIF.load uses an Ajax request to load the content, so it will fail on requests that are not "same-origin".

[Dumbledore]

@Dumbledore
MIF.load uses an Ajax request to load the content, so it will fail on requests that are not "same-origin".

Ok, thats sounds logical for me..

Is it possible to load the iFrame via setSrc and filter some scripts. My problem is i want to load a website with soma javascripts on it. This website contains a IE6 png-fix (http://www.dillerdesign.com/experiment/DD_belatedPNG/).

And when this script fire, my content is empty. I have a listener like:

'documentloaded' : function(frame){
    doc = frame.getFrameDocument();

    alert("pause");
                         

    this.setIconClass('webbrowser');
},

When the Alert-Box appear, the content is fine, after that it seems that the png-fix from this site will run and my content is complety empty (only in IE, Firefox runs fine).

Any ideas?

Bye Dumbledore

[Dumbledore]

@Dumbledore
MIF.load uses an Ajax request to load the content, so it will fail on requests that are not "same-origin".

Thats sounds logical for me...

Is it possible to modified the content when loading via setSrc? I try to loading a page containing a special function for IE (pngfix - http://www.dillerdesign.com/experiment/DD_belatedPNG/.

In firefox all is fine, in IE the page is loaded and when the pngfix fired, the page-content is empty.

My only idea is to load manual the content via a proxy script, filter the pngfix-call and update the iframe.content via update()

Or is there a nicer way?


Bye, Dumbledore

[hendricd]

You'll only be able to add scripts to a previously loaded page if it's a "same-origin" frame (the MIF's domready event fires).

If it is, MIF has an execScript method:

MIF.on('domready', function(frame){
   
   Ext.isIE &&  Ext.Ajax.request({
      url: 'fixes/DD_belatedPNG_0.0.8a.js'   //load from your site
      success : function(response){
          frame.execScript(response.responseText);
      }

});

You cannot touch external site documents.

[ish90an]

I cant get this extension to work. I am using FF3 and ExtJS3 and have included all the files but I keep getting an error like "uncaught exception: MIF 2.0 requires multidom support".
Here's the code from index.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Toolbar with Menus</title> 
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> 
 
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script> 
 	<!-- LIBS --> 
 	<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> 
 	<!-- ENDLIBS --> 
 
    <script type="text/javascript" src="ext/ext-all.js"></script> 
 
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="miframe/mif.js"></script>
<script type="text/javascript" src="miframe/multidom.js"></script>

<!-- Common Styles for the examples --> 
</head> 
<body> 
<div id="toolbar"></div> 
<h1>Toolbar with Menus</h1> 
<br /><br /><br /><br /><br /> 
</body> 
</html>

Here's main.js:

Ext.onReady(function(){
var MIF = new Ext.ux.ManagedIFrame.Component({
 width         : 100,
      height        : 70,
      defaultSrc    : 'http://www.extjs.com'});
});
I cant see what I am doing wrong, could you please help me?
  
});

[hendricd]

<script type="text/javascript" src="miframe/uxvismode.js"></script>
<script type="text/javascript" src="miframe/multidom.js"></script>
 <script type="text/javascript" src="miframe/mif.js"></script>

or, from the zip's build/:

<script type="text/javascript" src="miframe/miframe-debug.js"></script>

(has all three in a single file).

[disizben]

Hi hendricd,

Since I updated Ext 3.0 and Ext.ux.ManagedIfame 2.0 RC3 (R53), I noticed a performance problem in one of my applications.

I launched the Firebug profiler and it seems that GS function is called more than 6,000 times, and takes more than 4 seconds to run, which represents 50% of the overall execution of JavaScript.

My page has 35 ManagedIframePanels (I know that's a lot) but with previous versions of Ext and Ext.ux.ManagedIframe, JavaScript execution was much faster!

Do you know why this function takes so much time!?

Thanks.

[hendricd]

Hi hendricd,

Since I updated Ext 3.0 and Ext.ux.ManagedIfame 2.0 RC3 (R53), I noticed a performance problem in one of my applications.

I launched the Firebug profiler and it seems that GS function is called more than 6,000 times, and takes more than 4 seconds to run, which represents 50% of the overall execution of JavaScript.

My page has 35 ManagedIframePanels (I know that's a lot) but with previous versions of Ext and Ext.ux.ManagedIframe, JavaScript execution was much faster!

Do you know why this function takes so much time!?

Thanks.

@disizben -- As you've likely noticed, Element.getStyle(GS) is the BUSIEST function in the entire framework.

You didn't say what Ext 3.0.x version you were on, but several Layout enhancements went into the latest Ext SVN builds (which would impact the getStyle call frequency).

Try the latest MIF SVN build as well (some improvement will be likely there as well).

I'll be releasing the official MIF 2.0 release in the next few days.