swfobject动态创建Flex
最近在测试项目的时候,当页面上存在多个Flex,并且Flex的数据是由.net提供的xml数据, 会发生数据冲突,或者说数据缓存问题..暂且认为是数据缓存了,当加载第二个Flex时候数据会和加载第一个 Flex的数据重了..后来通过用js动态创建的方法解决了数据冲突问题.但随之而来的是各浏览器兼容问题。这里我用了swfobject来动态创建Flex来加载Flex,并且每次关闭Flex时候都要将Flex的Html代码移除掉。
swfobject
下载地址:http://code.google.com/p/swfobject/downloads/list
最新版本是2.2.
swfobject 的好处就不用多说了下面摘自网络:
1.IE中没有讨厌的虚框问题了。
2.提供了完善的版本检测功能,如果版本不够则显示其他东西,比如图片或文字。
3.易于使用,只要在页面头加载一个 .js 文件,然后 HTML 写一个容器,里面放普通的文本或图片(用于无法显示 Flash 时显示),最后用脚本来替换这个元素里面的内容为 Flash。
4.使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。
5.能够避免HTML、XHTML中出现object、embed等非标准标签,从而符合更加标准。
使用也非常简单:
引入swfobject.js
<script src="js/swfobject.js" type="text/javascript"></script>
在页面中:
//动态创建Flex
function createFlashMove(obj, sName, src, width, height) {
var fl = document.getElementById("FlexDiv");
if (fl == null) {
var creteFl = document.createElement("div");
creteFl.id = "FlexDiv";
obj.appendChild(creteFl);
}
var divobj = "FlexDiv";
var swfVersionStr = "10.0.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
//以下两句是将Flex置于底层.
params.wmode = "Opaque";
params.wmode = "transparent";
var attributes = {};
attributes.id = sName;
attributes.name = sName;
attributes.align = "middle";
swfobject.embedSWF(
src, divobj,
width, height,
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
}
obj:是要加载这个Flex的DIV id. (注意: 这个Div是要被Flex替换掉的)
sName: 是Flex的ID
src:Flex文件地址
因为Flex 要通过xml进行交互所以需要通过,net传给Flex数据
function GetXmlFunction(data) { try { document.getElementById("TestDrawLine").GetXmlFunction(data); } catch (ex) { setTimeout("GetXmlFunction('" + data + "');", 30); } }
try 里面的一句是调用Flex里面添加的外部调用接口.
ExternalInterface.addCallback("GetXMLFunction",goDataXML);
(这里可以通过swfobject里面给Flex传递参数这里有个例子,来达到和Flex交互. )
这里就OK了.也解决了多个Flex 在同一个页面冲突的问题.