<!DOCTYPE html> <html> <head> <title>swf</title> <meta charset="utf-8"/> <style type="text/css"> html, body { height:100%; background-color: antiquewhite;} body { margin:0; padding:0; overflow:hidden; } </style> </head> <body> <div id="flashContent"> <!--embed是給非IE用的,其中embed的name非常重要,必須與ID一致--> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="400" id="swf"> <param name="movie" value="swf.swf" /> <param name="wmode" value="window" /> <param name="allowScriptAccess" value="always" /> <embed src="swf.swf" width="550" height="400" name="swf" wmode="window" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object> </div> <div> <textarea id="txt" cols="30" rows="10"></textarea> <button id="btn">JS call AS</button> </div> <script type="text/javascript"> var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); var swf = window["swf"] || document["swf"]; btn.onclick = function() { swf["JsCallAs"]("I'm js."); //JsCallAs是flash里addCallback的函數 } function AsCallJs(s){ txt.value += s + "\n"; } </script> </body> </html>
以上是html代碼,以下是AS代碼
import flash.events.MouseEvent; ExternalInterface.addCallback("JsCallAs", onJsCallAsHandler); function onJsCallAsHandler(s:String):void { tf.appendText("as收到:" + s + "\n"); } btn.addEventListener(MouseEvent.CLICK, onAsCallJsHandler); function onAsCallJsHandler(e:MouseEvent):void { ExternalInterface.call("AsCallJs", "hi! I'm as."); }
大家都知道,最常用的嵌套flash的方法是OE(object-embed)方式,除此之外還有一些嵌入方式,可以參考kissyui里的文章 http://docs.kissyui.com/1.4/docs/html/tutorials/kissy/swf/embed-swf-onto-webpage.html
本例只考慮OE方式,其他嵌入類型大家自行測試,本文不過多討論。
本例子在IE6-8及現代瀏覽器中測試通過 例子使用最標准的OE方式嵌套flash,原理是IE獲取object,非IE獲取embed,
html中的關鍵點在於embed的name必須與object的ID一致,否則chrome下調用不到embed,就會出現swf為空,所以瀏覽器會報出沒有JsCallAs方法的錯誤:
html中關於flash標簽的其他屬性: wmode在此不會影響調用 在此寫上 是為了方便大家復制代碼,畢竟這個屬性很常用
allowScriptAccess 不為never即可 不寫此屬性也可以 否則flash無法與js通訊
as中代碼比較單純,不需要太多技巧,參考AS3的API即可,主要是ExternalInterface的call和addCallback方法。
在線演示地址: http://gotoandlearn.net/asjs