Javascript: How to get Browser Zoom level using third party

Question

How to get browser zoom level in all known browsers? This is a new workaround for How to detect page zoom level in all modern browsers?

The idea is to use flash or HTML5 Canvas to find the solution.

For now found one solution using flash.

Answer 1

You need to create a flash file with JavaScript bridge like this:

[SWF(width='100',height='100')]
public class SizeHack extends Sprite
{
    public function SizeHack()
    {
        if(stage){
            onAddToStage();
        }
        else{
            addEventListener(Event.ADDED_TO_STAGE, onAddToStage);
        }
    }

    protected function onAddToStage(event:Event = null):void
    {
        removeEventListener(Event.ADDED_TO_STAGE, onAddToStage);

        // security settings to allow scripting between domains
        Security.allowDomain("*");
        Security.allowInsecureDomain("*");

        // register to javascript
        ExternalInterface.addCallback("getSize", onSizeRequet);

        // stage scale mode must be noscale
        stage.scaleMode = StageScaleMode.NO_SCALE;
    }

    private function onSizeRequet():Number
    {
        if(!stage){
            return 0;
        }
        return stage.stageHeight;
    }
}

Then in your JavaScript:

<script type="text/javascript">
    swfobject.registerObject("FlashResizer", "10.0.0");

    function getBrowserZoom()
    {
        return swfobject.getObjectById("FlashResizer")
            .getSize();
    }
</script>

<div id="flashResizerDiv" style="position: absolute; display: block; height: 100px; width: 100%; top: 0; left: 0;">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100" id="FlashResizer">
        <param name="movie" value="resizer.swf" />
        <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="resizer.swf" width="100%" height="100">
            <!--<![endif]-->
            <a href="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
            </a>
            <!--[if !IE]>-->
            </object>
        <!--<![endif]-->
    </object>
</div>

Now when you call getBrowserZoom() you will get the exact zoom of the browser.