ActionScript3注入JavaScript脚本

ActionScript3注入JavaScript脚本
JavaScript and VBScript Injection in ActionScript 3主要内容摘抄

脚本注入在这里是说在ActionScript3编程时更好的组织和使用JavaScript，不是黑客攻击做的那个。通过ActionScript3的ExternalInterface类完成，需要了解JavaScript和文档对象模型（ DOM ）。

简介
比如说现在用ActionScript3通过socket取数据，然后以JavaScript写到页面上去（我不想用FLEX组件了），这时会用很多现成js组件库，还有自己写的js组件扩展，如何更好的管理它们呢？

通过ActionScript3注入脚本提供以下好处：

服务器独立：JavaScript编译到SWF文件里了，相对于使用了一个swf，它要用的js文件在另一台服务器上，升级等一些事情会省心。
脚本代码保密 ：JavaScript存储在SWF内，不像通常那样直接被看到源代。
透明 ：通过适当的编写，只在用到时注入，不用时回收，节约资源。匿名运行，不会影响已有js, 除非你想。
运行脚本的修改 ：脚本就像字符串参数一样，在运行时根据具体需求改变。
压缩 ：JavaScripts可利用SWF压缩：例如一个32K的JavaScript文件时，存储在SWF里只有5K 。
对于需要Flash/的Flex与JavaScript交互的用户，这是一个不错的解决方案。

AS3脚本注入基础，这是一些常见用法：
ExternalInterface.call("alert", "foo")

ExternalInterface.call("alert('foo')")

ExternalInterface.call("function(){alert('foo'); alert('bar');}")

var js:String = "function(){function myFunc(str){alert(str);};myFunc(Foobar);}";
ExternalInterface.call(js)

原来我以为http://code.google.com/p/flex-iframe/这外开源项目用的已经很好了。
还有更好的：用XML在AS3中嵌入JavaScript

import flash.external.ExternalInterface;
var myJavaScript:XML =
<script>
    <![CDATA[
        function(){
            var Foobar = 'foo';
            function myFunc(str){
                alert(str);
            };
            myFunc(Foobar);
        }
    ]]>
</script>
ExternalInterface.call(myJavaScript); 这样写JS漂亮多了。

下面是一些更深入的研究，我没试过，从原文抄来的。

import flash.external.ExternalInterface;
var myJavaScript:XML=
    <script>
        <![CDATA[
            function(){

                // 本地变量
                var myLocal = 'foo';

                // 全局变量
                myGlobal = 'bar';
            }
        ]]>
</script>;

因为“var”被省略，myGlobal变成全局的，可以改变网页上js文件里写的一些变量值了。

import flash.external.ExternalInterface;
var myJavaScript :XML =
    <script>
        <![CDATA[
            function(){

                // 命名的本地函数，不保存
                function myLocalFunction(){
                    alert('foo');
                }

                // 匿名的本地函数，不保存
                var myOtherLocalFunction = function(){
                    alert('bar');
                }

                // 全局函数，可能会覆盖原有函数
                myGlobalFunction = function(){
                    alert('Yo global dude!');
                }
            }
        ]]>
    </script>
方法和变量效果一样，下面两者结合的例子：

import flash.external.ExternalInterface;
var myJavaScript :XML =
    <script>
        <![CDATA[
            function(){
                var snafu = 'You said';
                // "Dojo"是被其它脚本创建的全局对象，
                // 确认它存在再赋值，避免抛出异常.
                // myVar和myFunction会存在对象 "Dojo"中，直到明确摧毁。
                if(Dojo){
                    Dojo.myVar = 'foo';
                    Dojo.myFunction = function (str) {
                        alert(snafu + ":" + str);
                    }
                };
            }
        ]]>
    </script>
ExternalInterface.call(myJavaScript);

这个XML定义函数被销毁，它保存的变量还在，是一种维护状态的方法，但是要小心内存泄漏和覆盖另一个脚本。
我们增加了一个新的全局方法，ExternalInterface.call(" Dojo.myFunction","你好") ，将获得一个警告框说： "You said：你好。"

发送参数和返回值：
import flash.external.ExternalInterface;
var myJavaScript :XML =
    <script>
        <![CDATA[
            function(myFoo){
                function myFunc (str){
                    return str.toUpperCase()
                };
                var anonResult = myFunc(myFoo);
                return anonResult;
            }
        ]]>
    </script>
var myResult = ExternalInterface.call(myJavaScript , "foobar");
// myResult is "FOOBAR"

就到这了，如果你关心VBScript，请看原文。

脚本代码保密是不可能的，swf照样可以反编译。

一个完整的示例，这个里边js简单些，我曾经把整个mootools放个as里，几千行，原封放进去没问题。
文件asjs.as

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.external.ExternalInterface;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;

	public class asjs extends Sprite
	{
        private var label:TextField;
        private var labelText:String = "click me ...click me";

        public function asjs() {
            configureLabel();
			if(!Table_JavaScript.called){
				ExternalInterface.call(Table_JavaScript.CODE);
				Table_JavaScript.called = true;
			}
        }

        private function configureLabel():void {
            label = new TextField();
            label.autoSize = TextFieldAutoSize.LEFT;
            label.background = true;
            label.border = true;
            var format:TextFormat = new TextFormat("宋体");
            format.color = 0xFF0000;
            format.size = 20;
			label.addEventListener(MouseEvent.CLICK,cc);
            label.defaultTextFormat = format;
            addChild(label);
            label.text = labelText;
        }
		private function cc(event:Event):void
		{
			ExternalInterface.call("eb.createTable","footer");
		}
	}
}
class Table_JavaScript
{
	public static var called:Boolean = false;
	public static const CODE : XML = 
	<script><![CDATA[
		function()
		{
			if(typeof eb == "undefined" || !eb)	
			{
				eb = {};
			}
			eb.createTable = function(frameID) 
			{
				var dd = '<div id="_layeright" align="right" style="-moz-opacity:0.5; filter:alpha(opacity=50);position:absolute; right:5px; top:0px; width:200px; height:25px; z-index:99">';
				dd += 'create by flash';
				dd += '</div>';
				document.getElementById(frameID).innerHTML=dd;
			}
		}
	]]></script>;
}

在html页面里放一个 <div id="footer" class="clearfix">change</div> 可以看到效果