Javascript 浏览器视口大小（以设备像素为单位）_Javascript_Flash_Actionscript 3

Javascript 浏览器视口大小（以设备像素为单位）

javascript flash actionscript-3

Javascript 浏览器视口大小（以设备像素为单位）,javascript,flash,actionscript-3,Javascript,Flash,Actionscript 3,目标：在初始化、调整大小或浏览器缩放事件时，我希望flash能够以设备像素为单位获得有关浏览器视口宽度和高度的准确信息详细说明：我需要将flash嵌入到运行在chrome、safari、firefox等浏览器中的html页面中。swf必须填充整个浏览器视口。我不想闪光灯变焦。在flash内部，我可以设置使flash渲染到。我还将州对齐设置为StageAlign.TOP_LEFT。现在我只需要浏览器中的设备像素数问题：当浏览器进行缩放或在浏览器进行缩放时打开网站时，我无法轻松获取有关浏览器尺寸

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

详细说明：我需要将flash嵌入到运行在chrome、safari、firefox等浏览器中的html页面中。swf必须填充整个浏览器视口。我不想闪光灯变焦。在flash内部，我可以设置使flash渲染到。我还将州对齐设置为StageAlign.TOP_LEFT。现在我只需要浏览器中的设备像素数

问题：当浏览器进行缩放或在浏览器进行缩放时打开网站时，我无法轻松获取有关浏览器尺寸（以设备像素为单位）的信息

解决方案：（以前称为buzzword）可以很好地处理此问题（可以免费使用帐户）。他们在做什么？在webkit浏览器中，他们能够保持document.width以每次报告设备像素。我不确定他们在firefox和ie中做了什么

什么不起作用：

他确实支持这一点
仅仅将swf加载到浏览器中并不是一个解决方案，因为swf需要嵌入
缩放swf以适应不同的浏览器缩放，但不获取有关浏览器窗口尺寸的信息

解决方案：

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

首先是一个仅适用于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>

以下是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>

最后，我相信Opera有一个更理想的解决方案，但我还没有测试过。

您只是想更改字体大小吗？或者改变所有东西的大小？他们的编辑器代码是否混乱？@alxx:你指的是他们的swf？我不知道；杰迪里克布：不，我是说他们的html/js助手。问得好。嗯。IE7，FF测试。

<!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>

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 );
}

}
}