Flex中可以监听浏览器窗口的大小变化,但有些时候浏览器大小的变化flex不能直接监听到,因为该窗口不是顶层窗口,所以就需要在javascript中获得浏览器的大小,然后通过js通知给as3,再在flex界面中做相应的改变。
使用javascript来获得浏览器窗口的大小是要修改flex工程中的html-template文件夹下面的index.template.html文件(此处的工程是flex web工程)。
需要添加如下代码来实现获得浏览器窗口大小:
<!-- scwidth or scheight -->
var winWidth = 0;
var winHeight = 0;
function findDimensions() {
//获取窗口宽度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth; //获取窗口高度
}
if (window.innerHeight)
{
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测,获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
if(isReady()){
var str = winWidth+","+winHeight;
sendToActionScript(str);
}
}
window.onresize=findDimensions;
var jsReady = false;
function isReady() {
return jsReady;
}
function pageInit() {
jsReady = true;
//调用函数,获取数值
findDimensions();
}
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
// 将变化的数值发送给actionscript
function sendToActionScript(value) {
thisMovie("${application}").sendToActionScript(value);
}
function sendToJavaScript(value) {
findDimensions();
}
需要在body标签中调用onload函数pageInit();
下面就需要在flex中来处理与js的交互了。
相关代码如下
<?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"
xmlns:sRGroup="sRGroup.*"
creationComplete="application1_creationCompleteHandler(event)"
addedToStage="application1_addedToStageHandler(event)">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
if (ExternalInterface.available) {
try {
ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);
if (checkJavaScriptReady()) {
ExternalInterface.call("sendToJavaScript","getWH");
} else {
var readyTimer:Timer = new Timer(100, 0);
readyTimer.addEventListener(TimerEvent.TIMER, timerHandler);
readyTimer.start();
}
} catch (error:SecurityError) {
Alert.show("A SecurityError occurred: " + error.message);
} catch (error:Error) {
Alert.show("An Error occurred: " + error.message);
}
}
}
/**网页js 发来的数据接收函数*/
private function receivedFromJavaScript(value:String):void {
var array:Array = value.split(",");
this.width = array[0];
this.height = array[1];
// Alert.show("舞台尺寸改变"+this.width+"------"+this.height);
}
/**检测网页是否加载完毕*/
private function checkJavaScriptReady():Boolean {
var isReady:Boolean = ExternalInterface.call("isReady");
return isReady;
}
/**循环检测网页是否加载完毕*/
private function timerHandler(event:TimerEvent):void {
var isReady:Boolean = checkJavaScriptReady();
if (isReady) {
//停止timer
var str:String = ExternalInterface.call("sendToJavaScript","getWH");
Alert.show(str);
Timer(event.target).stop();
}
}
protected function application1_addedToStageHandler(event:Event):void
{
//添加舞台尺寸改变数据
this.addEventListener(ResizeEvent.RESIZE,onResize);
}
private function onResize(evt:Event):void
{
Alert.show("舞台尺寸改变"+stage.width+"------"+stage.height);
}
]]>
</fx:Script>
<s:Button x="0" y="0" label="按钮"/>
<s:Button right="0" bottom="0" label="按钮" id="btn2"/>
</s:Application>
注意:application1_addedToStageHandler需要添加到舞台的。
至此,之前的问题完美解决。