>>您所在位置:博客 >> 技术 >> 技术讲座

weboffice经验谈:IF IE ENDIF条件判断无法鉴别IE10版本导致IE10下无法加载weboffice插件的分析以及解决办法

作者:weboffice | 时间:2013-11-20 10:56:26 | [  ] | 来源:weboffice高级篇 | 阅读阅读:24261 | 评论  评论: 2 | 收藏 收藏
weboffice,IF IE,ENDIF,条件判断,IE 10,无法鉴别,加载  
原创 [摘要]: 前不久本人也写了一篇关于如何兼容IE和非IE浏览器的weboffice插件的文章请见:如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器,最近有网友留言说在IE10版本下浏览器无法加载weboffice在线编辑组件,从而我个人也自己亲测了一下果然咋IE10下无法识别IF IE ENDIF的条件判断,也就是说IE10照上面的条件去判断是不属于IE范畴的。经过本人细查资料才了解到具体的原因,请听我细细道来: 一、我们应该如何正确让IF IE正确鉴别IE10浏览器? 早在一年前,微软已经宣布IE10不再支持之前IE浏览器所一贯支持的“IE条件标记”(conditional comments),也就是说,下面的语句对IE10是无效的: <!--[if IE]> 很遗憾,像这样的...

前不久本人也写了一篇关于如何兼容IE和非IE浏览器的weboffice插件的文章请见:如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器,最近有网友留言说在IE10版本下浏览器无法加载weboffice在线编辑组件,从而我个人也自己亲测了一下果然咋IE10下无法识别IF IE ENDIF的条件判断,也就是说IE10照上面的条件去判断是不属于IE范畴的。经过本人细查资料才了解到具体的原因,请听我细细道来:

一、我们应该如何正确让IF IE正确鉴别IE10浏览器?

早在一年前,微软已经宣布IE10不再支持之前IE浏览器所一贯支持的“IE条件标记”(conditional comments),也就是说,下面的语句对IE10是无效的:


<!--[if IE]>
很遗憾,像这样的HTML将被IE10直接无视跳过
而旧版本的IE则会进行解析
<![endif]-->



因此,找出其它的方案来识别IE10,对于前端开发者来说,需要另辟蹊径(当然,你随时可以借助后端,但那不是前端开发者的事情了)。以下是网络上流传的几条“偏方”。

1、检测“@cc_on”



<!--[if !IE]>
<!--<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script>
<!--<![endif]-->



如此,将为整个HTML的DOM元素增加一个名为ie10的class,于是我们就可以直接在CSS中这样针对IE10开刀:



.ie10 .example {
   /* 仅限IE10的代码 */
}




不知道为啥这个恶心的玩意儿怎么来的,但它确实有效。然而这段代码依赖于JavaScript,因此不是我们的最佳选择。

2、“@media -ms-high-contrast”的救赎

以下是来自Github一则gist的技巧,它利用了IE10对ms-high-contrast这一CSS属性的支持,而IE9恰好不支持:


示例代码如下所示:


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* 仅限IE10的代码 */
}



看起来很不错,可惜这个技巧在IE10的早期预览版(Platform Preview 1 and 2)当中并不奏效,因为这些预览版不支持这一CSS属性;而且IE11也无法与IE10区分开了。所以这则技巧也不是我们的最佳选择。

3、奇妙的“@media 0/0”

示例代码:



@media screen and (min-width:0\0) {
    /* IE9与IE10的专有代码 */
}




缺点很明显:它不能避开IE9。但是考虑到Windows 7的用户最终将通过安全更新,将IE9升级为IE10,我们姑且乐观的认为IE9最终就不再存在了。而IE11是否识别这段代码尚未知晓,于是这条技巧八成最适合未来的情形。

4、尝试”严格模式”特性检测


JavaScript的严格模式我们之前已经转载过一篇文章来说明,是一种将更好的错误检查引入代码中的方法。在IE之前的版本中,严格模式是不支持的,而IE10则能够进行支持,所以我们可以通过下面的JS代码来进行IE10检测:

示例代码如下所示:



var isIE10 = /msie/i.test(navigator.userAgent) && (function() {"use strict";return this === undefined;}());
if(isIE10)
document.documentElement.className+=' ie10';



基于以上的一些列鉴别IE10的方案,我最后采取了方案1,通过检测“@cc_on”来加以鉴别IE10,从而加载weboffice插件,代码如下所示:


<!--[if IE]>
        <script src="LoadWebOffice.js"></script>
         <![endif]-->
        <!--[if !IE]> -->
        <script type="text/javascript" language="javascript">
            if (/*@cc_on!@*/false) {
                var s = ""
                s += "<object id=WebOffice1 height='586' width='100%' style='LEFT: 0px; TOP: 0px'  classid='clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5' codebase=WebOffice.cab#V6,0,5,0>"
                s += "<param name='_ExtentX' value='6350'><param name='_ExtentY' value='6350'>"
                s += "</OBJECT>"
                document.write(s)
            }
        </script>
        <object id="Control" type="application/x-itst-activex" align="baseline" border="0"
            width="95%" minwidth="900" height="600px" clsid="{E77E049B-23FC-4DB8-B756-60529A35FAD5}"
            event_notifyctrlready="NotifyCtrlReady" event_notifytoolbarclick="NotifyToolBarClick">
        </object>
<!-- <![endif]-->


从上列代码不难看出将IE10的鉴别放入了IF !IE的逻辑段内了,然后检测@cc_on,然后加载weboffice插件。

这种鉴别IE10的方法的确很有些诡异,但是的确可以解决实际问题!有些方法是来自网络!希望这篇文章可帮助到那些在IE10下无法加载weboffice组件的童鞋们!








weboffice,IF IE,ENDIF,条件判断,IE 10,无法鉴别,加载  
 本文为原创型文章转载请尊重他人劳动成果并注明出处:http://www.stepday.com/topic/?690
系统温馨提示 可以扫描本站该博客文章的QR二维码进行访问  本站该博客文章的QR二维码
上一篇:highcharts图表中级入门之pie图point-events:如何设置让饼图点击(click)每一块响应事件然后事件ajax动态操作
下一篇:highcharts图表中级入门之tooltip-formatter:如何妙用数据提示属性的格式化方法根据当前数据点属性判断是否显示提示框
加精
15
踩扁
0
查看评论 查看评论
寒冰冷水
寒冰冷水  2014-8-1 12:55:37 回复 1楼    回复
如何保存到服务器端, 给 介绍介绍呗,存储不到 服务器上 啊 
回复 1楼  weboffice  2014-8-1 13:50:40   回复

[回复:寒冰冷水]:针对你这个问题有以下几点需要你自己确认一下:

1、配置的保存地址是否正确?


var _result = document.getElementById("WebOffice1").HttpPost("OfficeSave.aspx");


这里的url是否正确?保存的时候是否断点进入了?(在调试模式下)。

这里的地址最好采用:http://ip:port/pagename 的方式 可以参考:

http://www.stepday.com/topic/?746

发表评论 发表评论
* 以下用户言论只代表其个人观点,不代表STEP DAY网站的观点或立场
用户名:
关联阅读 关联阅读
01 EasyUI DataGrid 如何判断数据加载完成?
02 highcharts图表中级入门之dirlldown:如何实现pie(饼状图)的下钻图
03 如何获取$('#uploadify') 的待上传文件个数?
04 highcharts入门之Pie:如何让Pie饼状图的图例内显示百分比
05 highcharts入门之series:针对双Y轴图表需要重点关注yAxis属性定位数据所属Y轴
06 ECharts图表组件初级入门之legend-selected:如何默认设置局部series序列或者线条隐藏或显示
07 点聚的第三方Office插件WebOffice的变态问题汇总大集合
08 highcharts图表初级入门之update:如何动态修改某个series序列的名称
09 highcharts图表组件实战经验篇:如何设置柱状图柱子立体(颜色渐变)效果类似3D效果之linearGradient和stops
10 如何让点聚WebOffice在线编辑ActiveX插件兼容火狐、谷歌、IE各式浏览器
系统温馨提示请您注意
·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在STEP DAY新闻评论发表的作品,STEP DAY有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款