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&amp;type=item&amp;Sort=daterank&amp;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>