`
weitao1026
  • 浏览: 1053869 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

微信开发常识

 
阅读更多

微信自带一个浏览器,基于webikit,代号为X5

 

浏览器兼容性解决之道

前言

      浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标,Angular团队声明:Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本,它们也不会保证Angular将会工作在这些IE版本上。

      而1.3以后的版本,Angular官方不再保证对IE8的兼容。当然,这并不表示一定不能在IE8用,但是官方不在针对IE8对集成测试,如果确实需要在兼容IE8的同时使用1.3,就需要自己做全面测试。不过,这样做的话性价比比较低。所以,在工程实践中,一般以IE8为分界,如果需要兼容,就用1.2,否则就用1.3+。

      在项目开发过程中,自己一直都是在Chrome浏览器中开发、调试服务端管理前台。后期测试阶段,Boss提出要做到主流浏览器(例如:360浏览器、qq浏览器、IE)兼容。这个要求还是很合理的。经过测试360、qq、UC、火狐等浏览器均不存在所谓的兼容性问题。最令人头大的就是IE。不过,我坚信:是问题就可以得到解决。

测试环境:

Angular版本 : angular-1.3.0.14

Jquery版本  :jquery-1.9.1

浏览器版本    : IE10

解决

      初次尝试设置IE10的兼容性选项,无解。

      IE不兼容问题是程序中调用jquery,抢占了$的原因。解决方案如下:

1.JQuery方案

1.1 页面引入jquery.js库

<script src="jquery-1.7.1.js" type="text/javascript"></script>

1.2 添加两个js函数

添加LockTableHead()和translate()函数。

注意:为防止JQuery与现有js框架抢夺$标识符,要执行jQuery.noConflict()。

 

function LockTableHead(divId, tableId) {
var jq = jQuery.noConflict();
    jq("#" + divId).scroll(function () {
        var delta = jq("#" + divId).scrollTop();
        if (delta > 0) {
            translate(jq("#" + tableId +" th"), 0, delta - 2);
        }
        else {
            translate(jq("#" + tableId + " th"), 0, 0);
        }
    });
}
function translate(element, x, y) {
    var translation = "translate(" + x + "px," + y + "px)" 
    element.css({
        "transform": translation,
        "-ms-transform": translation,
        "-webkit-transform": translation,
        "-o-transform": translation,
        "-moz-transform": translation
    });
}

 

1.3 修改页面,调用js

在适当的地方添加LockTableHead()函数调用即可。如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意:要提供一个div的id和table的id 。

2.非JQuery方案(纯js)

2.1 思路

受JQuery方案的启发,将它翻译回普通js即可。

2.2 添加js函数

添加LockTableHead()函数。

 

function LockTableHead(divId, tableId) {
document.getElementById(divId).onscroll = function () {
var delta = document.getElementById(divId).scrollTop;
var t1 = "translate(0px," + delta + "px)";
th_Array=document.getElementById(tableId).getElementsByTagName("th");
for (i = 0; i < th_Array.length; i++) {
th_Array[i].style["-ms-transform"] = t1;
}
};
}

 

2.3 修改页面,调用js

同上,在适当的地方添加LockTableHead()函数调用即可。如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意:要提供一个div的id和table的id 。

3.总结

      以上两方案实际上都是使用了css3中的translate函数,这就意味着浏览器得支持这个功能是前提条件。

      另外,如果页面上只有一个table,也可以通过getElementsByTagName的方式定位table,并用parentNode的方式定位div,这样就不必传递它们的id了。

      以上方法貌似只是解决浏览器局部兼容性问题。对于全面兼容不适用。

      IE浏览器兼容性问题真的难倒自己了。始终找不到一个好的解决方案。错误提示如下:

  

      

      居然有个对象是没定义的?!

 

    Object.keys方法是ES5中的函数。IE8不支持。

      自己根据提示修改了lodash.js文件中的L083,L229,将其进行了注释。并引入了es5-shim.js文件。

      是否需要考虑一下浏览器的内核?

注:

      Google Chrome是采用Chrome内核,基于开源内核chromium。打开网页的速度快,且很安全,性能极佳,界面简洁,功能多,但兼容性有待提高。

      Internet Explorer是采用IE内核,打开网页的速度一般,安全性一般,但兼容性极高,界面简单,功能较少。

暂时搁置....欢迎能够解决此问题的朋友留言。

参考文献

1.http://www.cnblogs.com/ahl5esoft/p/3872597.html

2.http://blog.csdn.net/jumtre/article/details/50380311

3.http://www.jb51.net/article/52583.htm

4.http://www.jb51.net/article/45428.htm

 

分享到:
评论

相关推荐

    微信开发学习总结(二)——微信开发环境准备(2)项目源码

    为微信开发学习总结(二)——微信开发环境准备(2)博客讲解中附带源码。 参考博客: 微信开发学习总结(二)——微信开发环境准备(2) https://blog.csdn.net/qq_29914837/article/details/82896861

    微信开发调试工具 小程序源代码

    微信开发调试工具 小程序源代码微信开发调试工具 小程序源代码微信开发调试工具 小程序源代码微信开发调试工具 小程序源代码微信开发调试工具 小程序源代码微信开发调试工具 小程序源代码微信开发调试工具 小程序源...

    微信开发视频教程文档【50集】

    本套微信开发视频教程系统的讲解了微信开发的机制以及一些比较实用的案例,如:天气预报、附近酒店、刮刮乐、百度翻译、快递查询、会员卡、航班查询。下载文件中包括了视频和相关源代码。

    微信开发(WeChat Development)是指使用微信开放平台提供的 API 和 SDK,开发微信相关的应用程序和服务 微

    微信开发(WeChat Development)是指使用微信开放平台提供的 API 和 SDK,开发微信相关的应用程序和服务。微信开发可以分为以下几种类型: 微信公众号(WeChat Public Account):开发微信公众号,用于发送消息、推...

    微信开发实例 微信公众平台开发 之微信接口前期准备

    微信开发实例 微信公众平台开发教程-深入浅出微信公众平台实战开发(微网站、LBS云、Api接口调用、服务号高级接口)1.微信接口前期准备。由北风网提供,微信开发实例微信公众平台基础篇: 1)微信公众平台简介:开发...

    微信开发jar包

    微信开发需要用的jar包总结和归纳微信开发需要用的jar包总结和归纳微信开发需要用的jar包总结和归纳微信开发需要用的jar包总结和归纳微信开发需要用的jar包总结和归纳微信开发需要用的jar包总结和归纳微信开发需要用...

    微信开发的文档汇总.zip

    微信开发-高级群发接口.pdf 微信开发-获取access_token.pdf 微信开发-获取关注者列表,用户的openid.pdf 微信开发-获取用户基本信息.pdf 微信开发-接口配置.pdf 微信开发-接收普通消息.pdf 微信开发-接收事件...

    微信开发的小程序项目代码.zip

    微信开发的小程序项目代码.zip微信开发的小程序项目代码.zip微信开发的小程序项目代码.zip微信开发的小程序项目代码.zip微信开发的小程序项目代码.zip微信开发的小程序项目代码.zip微信开发的小程序项目代码.zip微信...

    企业微信开发实操考试.pdf

    企业微信开发实操考试涉及的具体知识点涵盖了企业微信的部署、API接口调用、通讯录管理、OAuth2认证流程、以及JS-SDK接口实现等多个方面。以下是对知识点的详细说明: 1. 企业微信私有化部署与CA数据中心集成: - ...

    微信开发文档

    微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,用户通过简单的设置,就能生成微信3G网站。通过微信公众平台将企业品牌展示给微信用户,减少宣传成本,建立企业与消费者、...

    微信开发工具

    微信开发工具 这是由腾讯张小龙所打造的一个跨时代的工具

    微信商城开发解决案例_微信开发_公众号开发

    微信商城开发解决案例_微信开发_公众号开发

    完整的微信开发项目

    java开发微信的web项目.百分百可以运行,自己测试过的.适合微信开发初学者.完全参照微信开发者文档规范开发的java微信web项目

    Java微信开发教程

    Java微信开发入门,主要介绍大微信公众号介绍、开发这环境的一个搭建、发送消息自定回复、企业实战中的微信开发

    java微信开发、微信公众号开发、微信企业号开发源码

    微信开发实例,实现了大多数接口。可以直接用,也可以学习和研究,与君共勉!

    C#微信开发模板

    简单的C#的微信开发,很适合刚开始微信开发的人士。

    微信小程序开发图解案例教程-源代码

    微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...

    WeChatDeveloper微信开发工具包 v1.2.54.zip

    WeChatDeveloper微信开发工具包 v1.2.54.zip

    微信开发入门教程.txt

    1. 微信开发概述 微信开发是指在微信平台上开发应用程序的过程。微信是一个以社交为主的移动应用程序,拥有庞大的用户群体和广泛的使用场景。微信开发可以帮助企业、个人或组织在微信平台上实现自己的业务需求,...

    企业微信开发Demo

    企业微信 开发 实例 公众平台开发 Demo

Global site tag (gtag.js) - Google Analytics