Question

目标：我希望flash能够在初始化，调整大小或浏览器缩放事件时获得有关设备像素中浏览器视口的宽度和高度的准确信息。

细节：我需要将flash嵌入到以chrome，safari，firefox运行的html页面中，即。 swf必须填满整个浏览器视口。我不想让闪光灯变焦。在闪光灯内部，我可以设置StageScaleMode.NOSCALE，以便闪光渲染到Device Pixels。我还将状态的对齐设置为StageAlign.TOP_LEFT。现在我需要的只是浏览器中设备像素的数量！

问题：当浏览器缩放或我在浏览器缩放时打开网站时，我无法轻松获取有关浏览器设备像素尺寸的信息。

解决方案：acrobat.com's online document editor（以前称为流行语）处理此问题就好了（免费使用帐户）。他们在做什么？在webkit浏览器中，他们能够保持document.width每次报告设备像素。我不确定他们在firefox中做了什么，也就是说。

什么行不通：

Swffit not支持此功能。
只是将swf加载到浏览器中不是解决方案，因为swf需要嵌入。
This solution缩放swf以适应不同的浏览器缩放，但无法获取有关浏览器窗口尺寸的信息。

解决方案：

请参阅下面的选定答案。欢迎反馈。

Answer 1

首先是webkit浏览器的解决方案，因为它依赖于document.width和document.height。

这是html：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>

function ic( )
{   
var params = {
allowscriptaccess: "always",
seamlesstabbing: "false",
menu: "false"
};
var flashvars = {
bzw: document.width,
bzh: document.height
};
swfobject.embedSWF( "bZoom.swf", "b",
"100%", "100%",
"10", null, flashvars, params, {} );
Event.observe( window, 'resize', rs.bindAsEventListener(this) );
}

function rs( )
{
getFlash("b").JS2AS_resize( document.width, document.height );
}

function getFlash( id )
{
if (navigator.appName.indexOf("Microsoft") != -1)
{   return window[id];
}
else
{   return document[id];
}
}

Event.observe( window, 'load', ic.bindAsEventListener(this) );
</script>
</head>
<body style="margin:0;padding:0;">
<div id="a" style="position:absolute;top:0;left:0;width:100%;height:100%;"><div id="b"></div></div>
</body>
</html>

这是as3：

package
{
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;

public class bZoom extends Sprite
{

private var _w:int;
private var _h:int;


public function bZoom( ):void
{
    var lobj:Object = LoaderInfo( this.root.loaderInfo ).parameters;
    _w = lobj["bzw"];
    _h = lobj["bzh"];
    ExternalInterface.addCallback( "JS2AS_resize", JS2AS_resize );


    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    painty( );
}

public function JS2AS_resize( pw:int, ph:int ):void
{   _w = pw;
    _h = ph;
    painty( );
}

public function painty( ):void
{
    graphics.clear();
    graphics.beginFill( 0xFFFFFF );
    graphics.drawRect( 0, 0, _w, _h );
    graphics.beginFill( 0xFF0000 );
    graphics.drawRect( 0, 0, _w-5, _h-5 );
}

}
}

这是IE，Mozilla和Opera的解决方案：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="overflow-y:hidden;overflow-x:hidden;">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>

function ic( )
{   
var params = {
allowscriptaccess: "always",
seamlesstabbing: "false",
menu: "false"
};
var dv = document.viewport;
swfobject.embedSWF( "bZoom.swf", "b",
dv.getWidth()+"px", dv.getHeight()+"px",
"10", null, flashvars, params, {} );
Event.observe( window, 'resize', rs.bindAsEventListener(this) );
}

function rs( )
{
var dv = document.viewport;
var dvw = dv.getWidth();
var dvh = dv.getHeight();
$("b").width = dvw+"px";
$("b").height = dvh+"px";
//for reasons unknown (...timing?) we ask for these again
var dvw = dv.getWidth();
var dvh = dv.getHeight();
getFlash("b").JS2AS_resize( );
}

function getFlash( id )
{
if (navigator.appName.indexOf("Microsoft") != -1)
{   return window[id];
}
else
{   return document[id];
}
}

Event.observe( window, 'load', ic.bindAsEventListener(this) );
</script>
</head>
<body style="margin:0;padding:0;background-color:#00FF00;">
<div id="a" style="position:absolute;top:0;left:0;"><div id="b"></div></div>
</body>
</html>

和as3：

package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;

public class bZoom extends Sprite
{


public function bZoom( ):void
{

    ExternalInterface.addCallback( "JS2AS_resize", JS2AS_resize );

    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    painty( );
}


public function JS2AS_resize( ):void
{   painty( );
}

public function painty( ):void
{
    graphics.clear();
    graphics.beginFill( 0xFFFFFF );
    graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
    graphics.beginFill( 0xFF0000 );
    graphics.drawRect( 0, 0, stage.stageWidth-5, stage.stageHeight-5 );
}

}
}

最后，我相信Opera using screen.width and screen.height有一个更优化的解决方案，但我没有测试过。

设备像素中的浏览器视口大小

1 个答案: