# 1.兼容IE浏览器方案
方案：
安装Google chrome frame和cfInstall插件
下载
插件下载地址 提取码: 39x8
# 1.1.Google chrome frame
作用：安装Google chrome frame插件后，ie浏览器可以使用谷歌的内核来解析文本。
# 1.2.cfInstall
作用：检测是否安装了Google chrome frame插件。
# 1.3.兼容ie具体实现方案
一、在“顶页”引入CFinstall插件，如下高亮代码所示：
<head>
<title data-ng-bind="''"></title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=-1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no"/>
<meta content="" name="description"/>
<!-- 兼容IE--ie版本低于10才会执行下面两行代码 -->
<!--[if lt IE 10]>
<script src="assets/global/plugins/google-chrome-frame/CFInstall.min.js" type="text/javascript"></script>
<script src="index/compatible-with-ie.js"></script>
<![endif]-->
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
二、在compatible-with-ie.js文件中，检测ie的版本，低于某个版本时，跳转install.html页面安装谷歌插件
compatible-with-ie.js文件如下：
/**
* 利用 JS 单线程、阻塞式的特点，在加载项目所需 JS 前检查是否安装了 google chrome frame，
* 如果未安装，则跳转至安装页面。安装完成后不走跳转操作，自动跳转回登录页面。
*/
var IEVer = detectIE();
if (IEVer < 10) {
CFInstall.check({
preventPrompt: true,
onmissing: function () {
// 当检测到插件未安装时要执行的动作
window.location = 'index/index.html';
}
});
}
// 检测 IE 版本号
function detectIE() {
// Opera 浏览器的用户代理可能完全模仿其他浏览器
if (window.opera) {
return;
}
var ua = navigator.userAgent;
// IE 浏览器，如 IE8 ，其用户代理中包含字符串 'MSIE 8.0;'
if (/MSIE ([^;]+)/i.test(ua)) {
return parseFloat(RegExp['$1']);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
install.index文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>谷歌插件安装</title>
<link rel="shortcut icon" href="../favicon.ico"/>
<style type="text/css">
body {
font-family: "Microsoft YaHei" ! important;
width: 100%;
height: 100%;
}
/*灰色遮罩层*/
.fade {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5); /* IE无效 */
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.3;
opacity: 0.8;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000); /*ie*/
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
/*弹出层*/
.pop-box {
width: 450px;
height: 170px;
background: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -225px;
margin-top: -85px;
z-index: 999;
border-radius: 5px;
}
.pop-box h3.title {
text-align: left;
color: #333;
border-bottom: 1px solid #ddd;
padding: 15px;
margin: 0;
/*font-size: 14px;*/
}
.content {
padding-left: 16px;
padding-right: 16px;
line-height: 20px;
color: #505050;
/* font-size: 20px;*/
}
.install-btn {
padding: 10px 28px;
background: #09f;
color: #fff;
text-align: center;
border-radius: 5px;
margin-left: 16px;
text-decoration: none;
font-size: 14px;
position: absolute;
right: 16px;
bottom: 26px;
}
</style>
</head>
<body>
<div id="showIE">
<div class="fade"></div>
<div class="pop-box">
<h3 class="title">提示</h3>
<p class="content">您的IE浏览器版本过低，请升级到IE10及以上版本浏览器</p>
<p class="content">或者<a href="#" onclick="downLoad()">下载安装</a>Google Chrome Frame插件访问此网站</p>
<!-- <a class="install-btn" href="#" onclick="downLoad()">立即安装</a>-->
</div>
</div>
<script src="/assets/global/plugins/google-chrome-frame/CFInstall.min.js" type="text/javascript"></script>
<script>
CFInstall.check({
preventPrompt: true,
// destination 的值指定了安装完插件后跳转的页面 url
destination: location.protocol + '//' + location.host + '/layout/login'
});
// 下载谷歌插件
function downLoad () {
window.location = location.protocol + '//' + location.host + '/downloads/plugin/GoogleChromeframeStandaloneEnterprise.msi';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
← 部署 2.ie浏览器开发注意事项 →