FlexでIFRAME
Flexを使用しているとHTMLもきれいに表示できたらなぁって思うことがあり、iframeを設置してみました。
http://moeten.info/flex/20080429_bookCheckerAmazon/bin-release/main.html
やり方。
iframe用mxmlをダウンロードして設置します。
http://www.deitte.com/archives/2006/08/finally_updated.htm
の
http://www.deitte.com/IFrameDemo3/srcview/IFrame.zip
に含まれてます。
解凍するとiframe.mxmlがありますのでそれをプロジェクトのmain.mxmlがあるフォルダに入れます。
書き方はサンプルを見ればわかるようにシンプル。
<IFrame id="iFrame" source="http://www.amazon.co.jp/"/>
ただ、これで出来上がりっというわけでなく、解凍すると一緒に出てくるIFrameDemo.htmlが必要となります。
こちらのファイルは中身を見ればなんとなくわかると思いますが、flash内の特定のidを探して、
innerHTMLを行っています。
ですので、IFrameDemo.htmlをmain.htmlなどにファイル名を変更し、また、IFrameDemoの部分をmainに書き換えます。
書き換えたソースはこちら
<!-- saved from url=(0014)about:internet --> <!-- Most of this file is HTML/JavaScript that was generated by Flex Builder. The pieces added: 1. wmode set to opaque 2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods 3. the 'myFrame' div I also commented out the history feature, but I think it could be integrated into this page. 8/20/06 Brian Deitte --> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="AC_OETags.js" language="javascript"></script> <style> body { margin: 0px; overflow:hidden } </style> <script language="JavaScript" type="text/javascript"> // Major version of Flash required var requiredMajorVersion = 9; // Minor version of Flash required var requiredMinorVersion = 0; // Minor version of Flash required var requiredRevision = 0; function moveIFrame(x,y,w,h) { var frameRef=document.getElementById("myFrame"); frameRef.style.left=x; frameRef.style.top=y; var iFrameRef=document.getElementById("myIFrame"); iFrameRef.width=w; iFrameRef.height=h; } function hideIFrame(){ document.getElementById("myFrame").style.visibility="hidden"; } function showIFrame(){ document.getElementById("myFrame").style.visibility="visible"; } function loadIFrame(url){ document.getElementById("myFrame").innerHTML = "<iframe id='myIFrame' src='" + url + "'frameborder='0'></iframe>"; } </script> </head> <body scroll="no"> <!-- <script language="JavaScript" type="text/javascript" src="history.js"></script> --> <script language="JavaScript" type="text/javascript"> <!-- // Version check for the Flash Player that has the ability to start Player Product Install (6.0r65) var hasProductInstall = DetectFlashVer(6, 0, 65); // Version check based upon the values defined in globals var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision); // Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback if ( hasProductInstall && !hasRequestedVersion ) { // MMdoctitle is the stored document.title value used by the installation process to close the window that started the process // This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed // DO NOT MODIFY THE FOLLOWING FOUR LINES // Location visited after installation is complete if installation is required var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn"; var MMredirectURL = window.location; document.title = document.title.slice(0, 47) + " - Flash Player Installation"; var MMdoctitle = document.title; AC_FL_RunContent( "src", "playerProductInstall", "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"", "width", "100%", "height", "100%", "align", "middle", "id", "main", "quality", "high", "bgcolor", "#869ca7", "name", "main", "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash", "pluginspage", "http://www.adobe.com/go/getflashplayer" ); } else if (hasRequestedVersion) { // if we've detected an acceptable version // embed the Flash Content SWF when all tests are passed AC_FL_RunContent( "src", "main", "width", "100%", "height", "100%", "align", "middle", "id", "main", "quality", "high", "bgcolor", "#869ca7", "name", "main", // "flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '', "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash", "pluginspage", "http://www.adobe.com/go/getflashplayer", "wmode", "opaque" ); } else { // flash is too old or we can't detect the plugin var alternateContent = 'This content requires the Adobe Flash Player. ' + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>'; document.write(alternateContent); // insert non-flash content } // --> </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="main" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="main.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#869ca7" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="main.swf" quality="high" bgcolor="#869ca7" width="100%" height="100%" name="main" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"> wmode="opaque" </embed> </object> </noscript> <!-- <iframe name="_history" src="history.htm" frameborder="0" scrolling="no" width="22" height="0"></iframe> --> <div id="myFrame" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"></div> </body> </html>
単純に置換しただけです。
あとは、このmain.htmlをプロジェクトのbin-releaseやbin-debugに書きだされるmain.htmlに上書きすればOKです。ローカル環境ではうまく動作しない場合があるので、サーバーにアップロードするかlocalhostで動作を確認するといいでしょう。
Flexのソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ private var myArr:Array = new Array(); private function init():void{ myArr.push({label:"flash"}); myArr.push({label:"flex"}); myArr.push({label:"actionscript"}); myArr.push({label:"画像処理"}); iFrame.visible=true; cb.selectedIndex = 0; getHsData(); } private function getHsData():void{ hs.send({ "itemname":cb.selectedItem.label }); } private function onResult():void{ } private function onItemClick():void{ iFrame.visible=true; iFrame.source = hs.lastResult.rss.channel.item[tl.selectedIndex].link; } ]]> </mx:Script> <mx:HTTPService id="hs" url="http://moeten.info/maidcafe/?m=flex_amazon&type=item&Sort=daterank&type2=myRss" result="onResult()" useProxy="false" showBusyCursor="true"/> <mx:ComboBox id="cb" x="10" y="10" dataProvider="{myArr}" width="114" change="getHsData()"/> <mx:TileList id="tl" itemClick="onItemClick()" x="10" y="40" width="114" columnCount="1" height="546" columnWidth="90" rowHeight="120" dataProvider="{hs.lastResult.rss.channel.item}"> <mx:itemRenderer> <mx:Component> <mx:HBox> <mx:Image source="{data.image}" width="80" height="100"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:TileList> <mx:Panel width="671" height="546" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" x="132" y="40"> <IFrame id="iFrame" source="http://www.amazon.co.jp/" width="100%" height="100%" /> </mx:Panel> </mx:Application>