3 Replies Latest reply on Oct 4, 2011 8:08 AM by Dyskanza

    Iframe display problem

    Dyskanza

      Hello,

       

      I would like to display some actuality on my website so on my administration i create it by a CKEditor and put my HTML code on my database.

       

      Now i would like to display this actuality on my flex application and i don't find an alternative to using an Iframe by creating HTML file on my server and integrate it into my window (if anyone know another better solution, i need it).

      I use flex-iframe-1.5 you could find here : https://github.com/flex-users/flex-iframe/downloads

      I can show http://www.google.com for example on my IFrame but if the height of my website is too high and i use my schrollbar, my Iframe don't follow the movement and stay static

       

      I spend a week looking for a solution, i think it's because of my html-template.html (i did not change at all) but i'm really noob and don't know what i need to modify.

       

      If anyone have a working example on Flex 4 or more, i only find for flex 3 and each display is only an iframe without worrying aboutexcessive height of the site.

       

      Thank you for the help you can give me.

        • 1. Re: Iframe display problem
          Don Kerr Level 3

          I'm not aware of any other alternatives to iFrame for loading CKeditor "inside" a Flex app.

           

          Here is my blog post of a working Flex 4.5.1 example of using FCKeditor with Flex

          http://flextex.wordpress.com/2011/09/17/flex-html-rich-text-editor-with-coldfusion/

           

          Unfortunately,  iFrame is not ideal due to browser compatibility and the fact that is sits on top.

           

          You might consider making an editors version of your app as an Adobe Air app and use Air's HTML component to embed the CKeditor.  That is the only other option I'm aware of for loading CKeditor.

           

          You might check out Text Layout Framework if you don't really require CKeditor.  There are samples in Tour De Flex.

           

          Don

          • 2. Re: Iframe display problem
            Dyskanza Level 1

            Hello,

             

            Loading a CKEditor is not a problem, here 2 exemples i have make :

            http://94.23.217.229/flex/exemple1/

            http://94.23.217.229/flex/exemple2/

             

            My problem is when i display the HTML code i have collected on CKEditor.

            See the error here : http://94.23.217.229/flex/iframe/

            When you scroll down you could see the iframe is static and i don't find solution, i use the classic flex-iframe : http://code.google.com/p/flex-iframe/

             

            My second problem is to know the height of the URL i load but i think i could find a solution with JS because all HTML pages are on my server.

            • 3. Re: Iframe display problem
              Dyskanza Level 1

              Here my code, i don't modify otherthing, htmltemplate.html for example.

               

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

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                                               xmlns:s="library://ns.adobe.com/flex/spark"

                                               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

                                               skinClass="skins.ApplicationContainerSkin"

                                               xmlns:components="components.*" xmlns:ns="http://code.google.com/p/flex-iframe/">

               

               

                <!-- Example project presentation -->

                        <mx:ApplicationControlBar dock="true">

                                  <mx:Text selectable="false">

                                            <mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Tab navigator example</b><br>This example shows IFrames inside a tab navigator.</font>]]></mx:htmlText>

                                  </mx:Text>

                        </mx:ApplicationControlBar>

               

                        <!-- The tab navigator -->

               

                        <s:VGroup width="1000" height="3000">

               

                                  <mx:Panel title="Tabbed IFrames"

                                                        width="80%"

                                                        height="550">

               

                                            <mx:TabNavigator id="tab"

                                                                                     width="100%"

                                                                                     height="500">

               

                                                      <ns:IFrame id="test1"

                                                                             label="Google"

                                                                             source="http://www.google.co.uk"

                                                                             width="100%"

                                                                             height="100%"/>

               

                                                      <ns:IFrame id="test2"

                                                                             label="Yahoo"

                                                                             source="http://www.yahoo.co.uk"

                                                                             width="100%"

                                                                             height="100%"/>

               

                                            </mx:TabNavigator>

               

                                  </mx:Panel>

               

                                  <s:Button label="Control button" />

               

                        </s:VGroup>

               

              </s:Application>