检测浏览器是否安装了特定的插件,对于非IE浏览器,可以使用plugins数组(navigator的属性)
plugins数组的每一项均包含有以下属性:
name:插件的描述
description:插件的描述
filename:插件的文件名
length:插件所处的MIME类型数量
PS:MIME:Multiple Internet Mail Extensions 多用途互联网邮件扩展类型
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603f151088.jpg "")
在IE中检测插件的唯一方式就是使用专用的ActiveXObject类型,并尝试创建一个特定插件的实例。IE是以COM对象使用唯一标识。因此,要想检查特定的插件,就必须知道其COM标识符。例如:Flash的标识符是ShockwaveFlash.ShockwaveFlash。知道唯一标识符之后,就可以编写函数检测IE中是否安装相应的插件了。
IE只能是逐个new ActiveXObject(name);既定的插件名,然后通过是否实例成功侧面检测指定的插件是否已安装。
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603f166f77.jpg "")
原本是想通过检测浏览器类型去决定使用哪种方式去检测,但是由于IE浏览器中并非是简单的时候插件的名字,因此最好的方式还是针对每个插件分别创建检测函数。很遗憾,未找到一个更好的方式。
~~~
//IE中无效
function hasPlugin(name){
name = name.toLowerCase();
for(var i = 0; i < navigator.plugins.length; i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true;
}
}
return false;
}
//IE浏览器
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch (ex){
return false;
}
}
//检测浏览器是否有Flash插件
function hasFlash(name){
var result = hasPlugin(name);
if(!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
~~~
当你的代码运行需要基于某插件才能看到效果时,检测浏览器中是否安装了此插件,并给出相应的提示信息,请看下面代码:
~~~
if(!hasFlash("flash")){
if(window.confirm("系统检测到您的电脑尚未安装该页面必须的Flash插件,
需要您关闭浏览器后下载并按照提示安装该插件。\r\n您确定继续下载安装Flash插件吗?")){
var newWindow = window.open("http://wwww.baidu.com", "_blank", "");
if(newWindow == null){
//打开新窗口失败
window.location = "http://wwww.baidu.com"; //在本窗口打开
}
}
}
~~~
简单介绍一下window.open()函数
window.open(URL,name,features,replace)
URL参数要打开的url,如果省略该参数,或者传一个空字符串,那么窗口中不会显示任何内容。(可选)
Name参数是新窗口的名称,该名称可以用作`<a>`和`<form>`的属性的target值,如果该参数指定一个依旧存在的窗口,那么open()方法就不会再创建一个新窗口,而只是返回对指定窗口的引用,在这种情况下,features将被忽略。(可选)
features参数声明新窗口要显示的标准浏览器的特征,如果省略改参数,新窗口具有所有标准特征。(可选)
replace参数,是一个布尔值,规定装载到窗口的URL是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目
true:替换浏览历史中的当前条目,
false在浏览历史中创建新的条目。
对于最后一个参数replace,很遗憾,在火狐中试了好几次,并没有见到想见的效果,每次都是在浏览器历史中创建了新的条目。
**name参数**
_blank:在新窗口中打开url。
_self:在当前窗口中打开URL,覆盖当前文档。
_top:在所有框架之外的最顶层窗口中打开URL。假如当前窗口无框架结构,此参数值等同于_self。
_parent:在当前框架的父框架内打开。假如当前框架无父框架,此参数值等同于_self。
_search:IE5.0在浏览器左边的搜索面板内打开URL。
**features参数**
![这里写图片描述](https://box.kancloud.cn/2016-04-07_570603f179ebe.jpg "")
最后再说明一下window.location和window.location.href。
本质上来说window.location是一个对象(包括href ,host, hostname等属性),而window.location.href是一个属性。
但是在对window.location进行赋值操作时,就是赋值给了window.location.href。
因此使用`window.location = "http://www.qq.com";`或者是`"window.location.href = "http://www.qq.com"`效果是一样的
对于检测浏览器插件,如您有更好的方式,请给我留言,谢谢。
- 前言
- jQuery轮播图插件
- JS模拟事件操作
- JS闭包与变量
- JS绑定事件
- HTML5之file控件
- JavaScript的this词法
- JavaScript的this词法(二)
- JS this词法(三)
- JS检测浏览器插件
- JS拖拽组件开发
- number输入框
- Modernizr.js和yepnode.js
- DOM变化后事件绑定失效
- div和img之间的缝隙问题
- 详解JavaScript作用域
- bootstrap入门
- 表单验证(登录/注册)
- Bootstrap网格系统
- Bootstrap排版
- Bootstrap创建表单(一)
- Bootstrap表单(二)
- Bootstrap按钮
- Bootstrap图片
- Bootstrap字体图标(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜单
- Bootstrap按钮组
- Bootstrap按钮菜单
- Bootstrap输入框组
- Bootstrap导航元素
- Bootstrap导航栏
- sublimeText频频崩溃
- JQuery不同版本的差异(checkbox)
- Bootstrap面包屑导航、分页、标签、徽章
- Bootstrap警告
- Bootstrap进度条
- 前端的上传下载
- JS字符串的相关方法
- CSS3选择器(全)
- CSS3新增文本属性详述
- 利用CSS3实现图片切换特效
- CSS3新增颜色属性
- CSS3的border-radius属性详解
- JS创建对象几种不同方法详解
- JS实现继承的几种方式详述(推荐)
- CSS3响应式布局
- JS模块化开发(requireJS)
- 利用@font-face实现个性化字体
- 前端在html页面之间传递参数的方法
- CSS自动换行、强制不换行、强制断行、超出显示省略号
- 如何在Html中引入外部页面
- reactJS入门
- React组件生命周期
- 使用React实现类似快递单号查询效果
- ReactJS组件生命周期详述
- React 属性和状态详解