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

摘要：上一篇文章《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);
}
///onLoad
function 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 οnlοad="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

兼容ie6 | SWFObject、Flash json2以及动态JavaScript片段加载相关推荐

HTML 中 JavaScript 的加载方式
HTML中 JavaScript 的加载方式前言相信各位前端的小伙伴都用过script元素,今天我们就来好好聊一聊它. script元素将JavaScript插入HTML的主要方法是使用〈〉元素 ...
浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
Vue iView Admin 动态路由菜单加载前后端分离（springboot 2.x iview admin vue 前后端分离模型设计器动态数据权限...
宣传官网 xb.exrick.cn 在线Demo xboot.exrick.cn 开源版Github地址 github.com/Exrick/x-bo- 开发文档 www.kancloud.cn/ex ...
Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...
Javascript前端加载等待圆型圈提示实现效果
Javascript前端加载等待圆型圈提示实现效果 CSS内容 #loading {background-color: #9f9f9f;opacity: 0.15;height: 100%;width ...
微信小程序 - 高级 - 深度实践 - wx:for-item 与 data-xxx 的联合应用实现后台动态数据自动加载的正确方法概述
前言:之前的静态加载中我们看到wx:for-item除了命名外,似乎不能发挥作用,其实在动态网页数据加载的时候非常有用的. 1 问题提出一个富含数据访问的应用,例如大量的后台表格的更新,你做静态的展 ...
ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /*** Created by WanderGIS on 2015/7/15.*/ define(["dojo/_bas ...
C# 通过 AppDomain 应用程序域实现程序集动态卸载或加载
C# 通过 AppDomain 应用程序域实现程序集动态卸载或加载原文:C# 通过 AppDomain 应用程序域实现程序集动态卸载或加载 AppDomain 表示应用程序域,它是一个应用程序在其中 ...
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
Javascript模块加载捆绑器Browserify Webpack和SystemJS用法转自 http://www.jdon.com/idea/js/javascript-module-load ...

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

兼容ie6 | SWFObject、Flash json2以及动态JavaScript片段加载相关推荐

最新文章

热门文章