размер окна просмотра браузера в пикселях устройства - PullRequest
Новая
       0

размер окна просмотра браузера в пикселях устройства

2 голосов
/ 17 февраля 2011

Цель : Я хочу, чтобы Flash имел точную информацию о ширине и высоте области просмотра браузера в пикселях устройства при инициализации, изменении размера или событиях масштабирования браузера.

Особенности : Мне нужно встроить Flash в HTML-страницу, которая работает в Chrome, Safari, Firefox, т.е. SWF должен заполнить всю область просмотра браузера. Я не хочу, чтобы вспышка увеличивалась. Внутри флэш-памяти я могу установить StageScaleMode.NOSCALE , чтобы флэш-память отображала Пиксели устройства . Я также установил выравнивание состояния в StageAlign.TOP_LEFT. Теперь все, что мне нужно, это количество пикселей устройства в браузере!

Проблема : когда есть масштабирование браузера или я открываю сайт, когда браузер увеличен, я не могу легко получить информацию о размерах браузера в пикселях устройства.

Решение : Онлайн-редактор документов acrobat.com (ранее известный как умное слово) прекрасно справляется с этой проблемой (можно играть с учетной записью). Что они делают? В браузерах webkit они могут сохранять размер document.width для отчета о пикселях устройства каждый раз. Я не уверен, что они делают в Firefox и т. Д.

Что не работает:

  • Swffit поддерживает не поддерживает это.
  • Простая загрузка SWF-файла в браузер не является решением, поскольку SWF-файл должен быть встроен.
  • Это решение масштабирует SWF для размещения различных масштабов браузера, но не получает информацию о размерах окна браузера.

Решения:

См. Выбранный ответ ниже. Обратная связь приветствуется.

1 Ответ

2 голосов
/ 23 февраля 2011

Во-первых, это решение только для браузеров 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 , использующее screen.width и screen.height , но я не проверял его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...