Home > Developer > Web Develop
In a flex Web application, we often have to have the need to embed HTML, and you'll find the IFRAME useful!
Flex also interacts with JavaScript in HTML, and flex can invoke the JavaScript method in HTML with the IFRAME and get the return value after the call.
Flex Iframe:https://github.com/downloads/flex-users/flex-iframe/flex-iframe-1.5.1.zip
The bin has a flex library SWC that needs to be used
Flex Code:
<?XML version= "1.0" encoding= "Utf-8"?><s:applicationXmlns: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= "All"Xmlns:ns= "http://code.google.com/p/flex-iframe/"> <Fx:script> <! [Cdata[Import Mx.controls.Alert; protected function Oncalljs (event:mouseevent):void{//Call the JS method of Oncalljs in the current IFRAME embedded page Iframelocal.calliframefunction ("Flexcall");}protected function onsendparamtohtml (event:mouseevent):void{//Call the JS method of Flexsendparam in the current iframe embedded page, and pass in a parameter Iframelocal.calliframefunction ("Flexsendparam",["one parameter from Flex"]);}protected function onSendParamToHtml2 (event:mouseevent):void{//Call the JS method of flexSendParam2 in the current iframe embedded page, and pass in 2 parameters. The FlexSendParam2 method returns a string, and the last callback is the function that outputs the value Iframelocal.calliframefunction ("FlexSendParam2",["Frost.yen","from Sichuan"],Callback); function Callback (data:*):void {alert.show (data); } } ]]> </Fx:script> <fx:declarations> <!--Place non-visual elements (such as services, value objects) here - </fx:declarations> <S:vgroupwidth= "100%"Height= "100%" > <S:panelwidth= "100%"Height= "100%"title= "Use iframe Local page ...." "> <S:vgroupwidth= "100%"Height= "100%" > <S:hgroup> <S:buttonlabel= "Flex call js"Click= "Oncalljs (event)"/> <S:buttonlabel= "Flex send one param to JS"Click= "onsendparamtohtml (event)"/> <S:buttonlabel= "Flex send mult param to JS"Click= "ONSENDPARAMTOHTML2 (event)"/> </S:hgroup> <Ns:iframeID= "Iframelocal"width= "100%"Height= "100%"Source= "local.html" /> </S:vgroup> </S:panel> <S:panelwidth= "100%"Height= "100%"title= "Use remote page ...." "> <Ns:iframeID= "Iframecontainer"width= "100%"Height= "100%"Source= "Http://www.cnblogs.com/frost-yen"overlaydetection= "true"> </Ns:iframe> </S:panel> </S:vgroup></s:application>
HTML code:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"><HTMLxmlns= "http://www.w3.org/1999/xhtml"Lang= "ZH-CN"> <Head> <title>IFrame local.html</title> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <Scripttype= "Text/javascript"> //No Parameters functionFlexcall () {alert ("Flex Call js ...."); } //1 Parameters functionFlexsendparam (message) {alert (message); } //multiple parameters and return values functionflexSendParam2 (name,message) {alert (name+message); return "message from JS:"+name+" "+message; } </Script> </Head> <Body>Flexiframe Example HTML page! <inputtype= "button"value= "Say"onclick= "Flexcall ()"/> </Body></HTML>
It is important to note that the Flex Project project needs to be published to HTTP application servers (such as Tomcat, Apache, IIS) in these servers, using HTTP requests to invoke the page content and JavaScript methods. If you do not publish to the application server, so that only in the IFRAME nested remote HTTP request page, the local static page can not be displayed, as the name implies that with flex debugging is not possible, and there will be unexpected bug produced.
Testing the above code will find
The Alert popup window is obscured by the iframe window, which is discussed later.
[Flex] IFRAME Series-Methods for embedding HTML in Flex Web apps
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
