兼容ie6 | SWFObject、Flash & json2以及动态JavaScript片段加载

来源：互联网发布：指南针软件怎么使用编辑：程序博客网时间：2024/05/19 16:50

摘要：上一篇文章《Flash(ActionScript,AS) & JavaScript通信浅谈》初步谈到了，js与as的相互通信，在后文中也提及了“如何加载swf”。本文将对SWFObject、json2两个开源项目进行简单使用，以达到动态加载swf以及实现较好兼容性的目的。其中，SWFObject是一个为了兼容不同浏览器（加载Flash）的黑科技，json2是一个使用正则表达式来解析“JSON”的开源框架。

注意：在ie6等一些列低版本浏览器中，JSON并不是浏览器内置对象。JSON的发明，晚于浏览器的诞生。

@那是另一个故事......

在JSON出现之前，大家一直用XML来传递数据。因为XML是一种纯文本格式，所以它适合在网络上交换数据。XML本身不算复杂，但是，加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后，任何正常的软件开发人员碰到XML都会感觉头大了，最后大家发现，即使你努力钻研几个月，也未必搞得清楚XML的规范。

终于，在2002年的一天，道格拉斯·克罗克福特（Douglas Crockford）同学为了拯救深陷水深火热同时又被某几个巨型软件企业长期愚弄的软件工程师，发明了JSON这种超轻量级的数据交换格式。

@ie6与xp的来历........

Windows XP是Microsoft在2001年10月25日推出的基于X86、X64架构的PC和平板电脑使用的操作系统，与此同时诞生的还有ie6（Internet Explorer6）。

-------------------------

- 如何动态加载JavaScript？

- Flash到底该如何加载？

- 一波JSON解析黑科技

1.如何动态加载JavaScript？

一般静态加载js套路是这样的，<script src="js/json2.js"></script>。但是对于Flash而言，这样的方式却不太友好。Flash本身是依赖于浏览器上的Flash插件才得以播放，而且现在Flash越来越不受待见...

有人说：“HTML5的出现，就是为了干掉Flash。”，好像有几分道理。可是，为了兼容低版本浏览器，Flash充当着极其重要的作用。尤其是，企业如果和zf合作，xp系统几乎的不可避免的，ie8也是必须兼容的。那么，H5又是何时出现的？——“2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。”与其出现在一个时代的正是ie10。

正因为Flash是需要“Adobe Flash for IE插件”才能运行，然后插件本身就是一个较为不安全的“软件”，以至于浏览器以弹窗的形式告知客户“ActiveX balabala 需要加载....”，客户必须主动允许之后，插件才能得以运行，Flash才能跑起来。Flash本身就是为了兼容性而开发的一个产品，当有些浏览器不需要Flash支持的时候，还给弹出“ActiveX....” 就显得很是不友好了。

动态加载JavaScript势在必行....

///动态加载js脚本文件function loadScript(url) {var script = document.createElement("script");script.type = "text/javascript";script.src = url;document.body.appendChild(script);}///onLoadfunction onLoad(){if (!("WebSocket" in window)){//动态加载Flash / IE6兼容JSON包loadScript("js/swfobject.js");loadScript("js/flash.js");if(typeof JSON == 'undefined'){loadScript("js/json2.js");}}}

2. Flash到底该如何加载？

一般而言，FlashDevelop这个Flash开发工具本身就会生成一个默认的js脚本用以加载Flash（可见还是很人性化的）。这里把生成的这段默认代码，拷贝至flash.js里面，以方便动态加载。

注意，这里的相关目录如下：

js ：此文件夹中存放的就是下图中的3个js文件。

demo.html ：这个是具体的加载测试网页（下文会分析）。

demoflash.swf ：是博主开发的一个swf，里面封装了一些网络通信，以及与Js交互的接口（参见上一篇文章《Flash(ActionScript,AS) & JavaScript通信浅谈》）。

expressInstall.swf ：是一个自带的swf，用来检测是否需要安装或者升级Flash插件。（就是一般的提示Adobe Flash for IE插件版本过低）。

flash.js ：它的内容如下面这段代码。主要用来配置，如何加载Flash。

json2.js ：该js是从github上搬运而来的一个开源JSON解析库。json2.js

swfobject.js ：为了保证不同浏览器兼容性（指加载Flash时的兼容性）的一个黑科技。

那么，flash.js的具体内容是什么呢？以下便是...

var flashvars = {};var params = {menu: "false",scale: "noScale",allowFullscreen: "true",allowScriptAccess: "always",bgcolor: "",wmode: "direct" // can cause issues with FP settings & webcam};var attributes = {id:"demoflash"};swfobject.embedSWF("demoflash.swf", "altContent", "0%", "0%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);

一切准备读就绪，在网页中嵌入Flash就水到渠成了...

<body onload="onLoad()"><!-- Flash 承载Div 不可删除，页面不可见--><div id="altContent" style="display:none;"><p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p></div></body>

3. 一波JSON解析黑科技

高版本浏览器自带JSON对象，解析数据包简直不能再简洁... 广大低版本浏览器，在嵌入json2.js后，自制的JSON对象也就诞生了。（完全和高版本浏览器，一样使用JSON解析）

抛一个解析demo出来，如下，

///分析数据包function analyzePackets(data){try{var obj = JSON.parse(data);switch(obj.type){//{\"type\":0,\"sessionId\":%d,\"fromWho\":\"%s\",\"contentType\":\"%s\",\"content\":\"%s\"}case 0: onMessagingEvent(obj.sessionId, obj.fromWho, obj.contentType, obj.content);break;default: break;}}catch(exception){alert('message error.');}}

@qingdujun

2017-8-26 于湖南邵阳

参考文献：

[1] https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499490767fe5a0e31e17e44b69dcd1196f7ec6fc6000 , 2017-8-26

阅读全文

0 0