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 在同一个页面冲突的问题.

posted on 2011-05-16 19:30  小刚qq  阅读(1987)  评论(0编辑  收藏  举报