Jozef Chúťka's blog » allowscriptaccess http://blog.yoz.sk My life, my work Tue, 31 Jan 2012 12:40:53 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Full JavaScript Access From ActionScript (update) http://blog.yoz.sk/2010/02/full-javascript-access-from-actionscript/?utm_source=rss&utm_medium=rss&utm_campaign=full-javascript-access-from-actionscript http://blog.yoz.sk/2010/02/full-javascript-access-from-actionscript/#comments Wed, 10 Feb 2010 10:10:55 +0000 Jozef Chúťka http://blog.yoz.sk/?p=1005

Have you ever tought about accessing DOM from ActionScript? In fact, you can do it and even far more. You can create and call JavaScript methods and objects, access cookies, change styles… All you need is correct AllowScriptAccess parameter within your flash object. No framework needed here, no hacks, ExternalInterface takes care.

Following application runs JavaScript from textarea:

Application. Line 16 does all the fun :-) 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()">
<mx:Script>
<![CDATA[
    [Bindable]
    private var lastResult:String = "";

    private function init():void
    {
        ExternalInterface.addCallback("universalCallback", universalCallback);
    }

    private function runScript():void
    {
        ExternalInterface.call("eval", script.text);
    }

    private function universalCallback(... rest):void
    {
        lastResult = String(rest[0]);
    }
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
    <mx:TextArea id="script" width="100%" height="100%">
        <mx:text>
            <![CDATA[
function myFunction(){
    var flash = document.getElementById("flash");
    var data = document.childNodes[1].innerHTML;
    flash.universalCallback(data);
}

myFunction();
alert(document.getElementsByTagName('title')[0].innerHTML);
            ]]>
        </mx:text>
    </mx:TextArea>
    <mx:TextArea width="100%" height="100%" text="{lastResult}" />
</mx:HBox>

<mx:Button click="runScript()" label="Run"/>
</mx:Application>

HTML template

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Full Javascript Access</title>
    <meta http-equiv="Content-Type" content="application/xml; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="1" />
    <meta http-equiv="pragma" content="no-cache" /> 

    <meta name="author" content="http://studio.yoz.sk" />
    <meta name="description" content="Full Javascript Access" />
    <meta name="robots" content="all" /> 

    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript">
    <!--
        var flashvars = {}

        var params = {
            allowscriptaccess: "always"
        };
        var attributes = {
            id: "flash",
            name: "flash"
        };
        swfobject.embedSWF("Tests.swf", "alternative", "100%", "100%", "10.0.0",
            "flash/expressInstall.swf", flashvars, params, attributes);
    //-->
    </script>

    <style type='text/css'>
    <!--
        body {margin:0px;overflow:hidden;}
        html, body, object, embed {width:100%;height:100%;outline:none;}
    -->
    </style>
</head>
<body>
    <div id="alternative">
        <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>
    </div>
</body>
</html>

No additional nothing here just:

  • line 20: allowscriptaccess: “always” (“sameDomain” may also be used)
  • line 24: tip – add name attribute with swfobject so ExternalInterface.objectID will get correct value

Considerations of using eval:

  • Improper use of eval opens up your code for injection attacks
  • Debugging can be more challenging (no line numbers, etc.)
  • eval’d code executes more slowly (no opportunity to compile/cache eval’d code)

Update (Feb 11, 2010): You can use either eval call:

ExternalInterface.call("eval", script.text);

or wrap your script into anonymous function:

ExternalInterface.call("function(){" + script.text + "}");

Personally, I do not see any difference in execution, it seems to be the same, maybe some performance testing would clarify it. What do you think?

Where to go from here:

]]> http://blog.yoz.sk/2010/02/full-javascript-access-from-actionscript/feed/ 4 TextInput wmode opaque/tranpsarent workaround http://blog.yoz.sk/2010/02/textinput-wmode-opaque-transparent-workaround/?utm_source=rss&utm_medium=rss&utm_campaign=textinput-wmode-opaque-transparent-workaround http://blog.yoz.sk/2010/02/textinput-wmode-opaque-transparent-workaround/#comments Mon, 08 Feb 2010 10:27:56 +0000 Jozef Chúťka http://blog.yoz.sk/?p=1004

Many of you have come accross the horrendous bug that happens with text input in flash when the swf is embedded with wmode=transparent/opaque. It has been much discussed (Firefox Bugzilla entry for this bug, Adobe Forum discussion, etc.), but it seems that in all the years that this bug has existed nothing much has been done. A lot of workarounds have been published, many of them based on custom key mapping etc… My workaround uses html element <input type=”text”> that is placed right over flex <mx:TextInput>. Html element is styled transparent (no design) so user will not notice.

Following application uses wmode “opaque”, try inserting characters (čšň) into first text input (mx:TextInput) and than into second (uses html <input type=”text”> over flash)

Main application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
    import mx.managers.PopUpManager;
    private function init():void
    {
        var window:FakeInputsWindow = new FakeInputsWindow();
        PopUpManager.addPopUp(window, this);
        PopUpManager.centerPopUp(window);
    }
]]>
</mx:Script>
</mx:Application>

FakeInputsWindow

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:html="sk.yoz.html.*"
    layout="vertical" width="400" height="250"
    creationComplete="init()"
    move="moveHandler()">
<mx:Script>
<![CDATA[
    [Bindable]
    private var text2:String = "";

    private function init():void
    {
        ExternalInterface.addCallback("fakeTextInputChange", fakeTextChange);
    }

    private function moveHandler():void
    {
        fakeTextInput.positionChanged = true;
        fakeTextInput.invalidateProperties();
    }

    private function fakeTextChange(value:String):void
    {
        text2 = value;
    }
]]>
</mx:Script>
<mx:Text text='&lt;mx:TextInput ....'/>
<mx:TextInput id="text1" width="300" height="20"/>
<mx:Label text="{text1.text}" />
<mx:Spacer height="10" />
<mx:Text text='&lt;input type="text" ....'/>
<mx:Canvas width="300" height="20">
    <mx:TextInput width="300" height="20"/>
    <html:IFrame width="100%" height="100%" id="fakeTextInput"
        autoResize="true"/>
</mx:Canvas>
<mx:Label text="{text2}" />
</mx:TitleWindow>

lines:

  • 15: javascript-to-flash callback definition fakeTextInputChange (from javascript) sends value into actionscript fakeTextChange()
  • 18: fakeTextInput is IFrame class, that controls position and size of html input, lets correct position on TitleWindow move…
  • 35-39: I placed IFrame over TextInput. IFrame is in fact transparent html input, so what user see is just flex TextInput graphics

Html template file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>FakeTextInput</title>
    ...
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript" src="js/flexiframe.js"></script>
    <script type="text/javascript">
    <!--
        var flashvars = {}

        var params = {
            allowscriptaccess: "always",
            wmode: "opaque"
        };
        var attributes = {
            id: "flash"
        };
        swfobject.embedSWF("Tests.swf", "alternative", "100%", "100%", "10.0.0",
            "flash/expressInstall.swf", flashvars, params, attributes);

        function fakeTextInputChange()
        {
            var input = document.getElementById('fakeTextInput');
            var flash = document.getElementById('flash');
            flash.fakeTextInputChange(input.value);
        }
    //-->
    </script> 

    <style type='text/css'>
    <!--
        body {margin:0px;overflow:hidden;}
        html, body, object, embed {width:100%;height:100%;outline:none;}
        #fakeTextInput {
            position:absolute;
            border:none;
            outline:none;
            padding:0;
            margin:0;
            background:transparent url("images/spacer.gif");
            vertical-align:middle;
        }
    -->
    </style>
</head>
<body>
    <div id="alternative">
        <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>
    </div>
    <input type="text" id="fakeTextInput" onkeyup="fakeTextInputChange()"/>
</body>
</html>

Notice lines:

  • 07: import flexiframe.js used for positioning html input on correct place
  • 13: allowscriptaccess must be enabled
  • 14: wmode opaque/transparent is what the source of all evil
  • 22: javascript-to-flash communication
  • 35-42: remove all html input text design and makes it transparent
  • 53: input text definition, you may want to define your own handlers (submit, paste, focus…)
]]> http://blog.yoz.sk/2010/02/textinput-wmode-opaque-transparent-workaround/feed/ 7