最近开发Flex AIR项目,用到在容器中直接嵌入HTML网页,我使用了mx:HTML 组件(only for AIR)


转载请注明出 处:http://hi.baidu.com/taotao5453,感谢
用mx:HTML嵌入网页没有问题,但当我点击其中某个链接时,并没有出现新的浏览器窗口来显示我的页面,也就是AIR本身没有什么反应。
前提是链接本身的html代码是<a href…> 标签,并且是target=”_blank”,即在浏览器新窗口打开。(target=”_self” 时AIR本身即可实现在mx:HTML容器中切换到相应页面,这里就不做讨论了)

我试过google和baidu搜索解决方案,但这方面的信息非常少。

最后结合一些已有的信息,再经过反复测试后,有了解决这个问题的代码。如下Demo代码。
-
<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="960" height="540">
<mx:Script>
<![CDATA[
private function onComplete(evt:Event):void {

              var document:Object = HTML(evt.currentTarget).htmlLoader.window.document;

              var anchors:Object = document.getElementsByTagName("a");

              if(anchors != null) { // 转载请注明出 处:http://hi.baidu.com/taotao5453

                     for(var i:Number=0; i < anchors.length; i++) {

                            anchors[i].onmouseup = function():void {

                                var request:URLRequest = new URLRequest(arguments[0].srcElement);

                                navigateToURL(request,"_blank");

                            }

                     }

}

       }
]]>
</mx:Script>
<mx:Panel width="95%" height="98%" layout="absolute" horizontalCenter="0">
<mx:HTML id="content" width="100%" location="http://www.baidu.com" height="90%" complete="onComplete(event)" top="70" horizontalCenter="0"/>
</mx:Panel>
</mx:WindowedApplication>

-
这样,当点击mx:HTML组件中的可新窗口打开的链接时,就会打开一个你的默认浏览器窗口来显示新的页面信息了!

原理主要是,为mx:HTML增加一个 complete事件 complete="onComplete(event)",在处理函数中,读取页面中所有的链接的标签 getElementsByTagName("a"),放到一个Object中,循环这个Object,并为每个链接添加一个鼠标弹起事件的侦听 anchors[i].onmouseup,这里相当于重写(override)了页面本身的onmouseup事件,onmouseup是一种js方法,当某个链接被点击时,执行 navigateToURL(request,"_blank"),就启动一个新的浏览器窗口。

这是一个简化版的处理函数,但足够用了,我们还可以更加严谨的增加nodeValue == "_blank"判断,以及使用mx.logging.Log;输出log信息等。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐