[flexcoders] iFrame not filling canvas

Thu, 01 Jun 2006 22:14:58 -0700

Hi everyone,

I am playing around with the example IFrame code (below) and for the life of me cannot get the content of the IFrame to fill the parent canvas. In both IE and Firefox the display is about an eight of the canvas with scroll bars when it should size up to 100% width and height.

I fired up the _javascript_ debugger and can see the height and width being set on the IFrame <div> so I am thinking it must be flex.

Any ideas? Thanks in advance!
Angus

==>IFrameDemo.mxml (application)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    creationComplete="iFrame.visible=true">
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import mx.events.*;      
            private function changeSite(e:Event):void {
                var selectedNode = e.target.selectedItem;
                iFrame.source = [EMAIL PROTECTED];
            }       
        ]]>
    </mx:Script>

    <mx:XML id="content" format="e4x">
        <root>
            <category label="Search">
                <site label="Google" path="http://www.google.com"/>
                <site label="Yahoo" path=" http://www.yahoo.com"/>
            </category>
            <category label="Software">
                <site label="Macromedia" path=" http://www.macromedia.com"/>
                <site label="Adobe" path="http://www.adobe.com"/>
            </category>
        </root>
    </mx:XML>

    <mx:HBox width="100%" height="100%">
        <mx:Panel title="Tree" width="200" height="100%">
            <mx:Tree id="tree" dataProvider="{content}" width="100%" height="100%" showRoot="false" labelField="@label"
             change="changeSite(event)"/>
        </mx:Panel>
        <mx:Panel title="Content" width="100%" height="100%">
            <IFrame id="iFrame" source=" http://www.google.com" width="100%" height="100%"/>
            <mx:ControlBar>
                <mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true" click=" iFrame.visible=cbVisible.selected"/>
            </mx:ControlBar>
        </mx:Panel>
    </mx:HBox>
</mx:Application>

==>IFrame.mxml (component)

<?xml version=" 1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    resize="callLater(moveIFrame)"
    move="callLater(moveIFrame)">

    <mx:Script>
    <![CDATA[

        import flash.external.ExternalInterface;
        import flash.geom.Point;
        import flash.net.navigateToURL;

        private var __source: String;

        private function moveIFrame(): void {

            var localPt:Point = new Point(0, 0);
            var globalPt:Point = this.localToGlobal(localPt);

            ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
        }

        public function set source(source: String): void {
            if (source) {

                if (! ExternalInterface.available)
                {
                    // TODO: determine if this Error is actually needed.  The debugger
                    // build gives the error below.  Assuming that this error will not show
                    // up in the release build but haven't checked.
                    throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
                }
                __source = source;
                ExternalInterface.call("loadIFrame", source);

            }
        }

        public function get source(): String {
            return __source;
        }

        override public function set visible(visible: Boolean): void {
            super.visible=visible;

            if (visible)
            {
                ExternalInterface.call("showIFrame");
            }
            else
            {
                ExternalInterface.call("hideIFrame");
            }
        }

    ]]>
    </mx:Script>


==>_javascript_ included in html wrapper...
// Functions called from Flex using externalInterface - used for IFrame embedded HTML

function moveIFrame(x,y,w,h) {
    var frameRef=document.getElementById ("myFrame");
    frameRef.style.left=x+'px';
    frameRef.style.top=y+'px';
    frameRef.width=w+'px';
    frameRef.height=h+'px';
}

function hideIFrame(){
    document.getElementById("myFrame").style.visibility="hidden";

//    document.getElementById("myFrame").innerHTML = "<iframe src=''frameborder='0' style='position:absolute;background-color:transparent;border:0px;visibility:hidden;'></iframe>";   
}

   
function showIFrame(){
    document.getElementById("myFrame").style.visibility="visible";
}

function loadIFrame(url){
//    top.frames["myFrame"].location.href=""

    document.getElementById("myFrame").innerHTML = "<iframe src=''frameborder='0'></iframe>";
}

==>using div for iframe
<div id="myFrame" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"></div>




--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com



SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice

YAHOO! GROUPS LINKS



Reply via email to