JQuery IE8 找不到getContext属性,兼容性问题

我做了一个二维码的一个签到功能

通过JQuery来生成二维码

但是没想到在IE9,10 以上都没有问题

然后客户的机子上竟然是IE8,

还好找到了问题

在IE8  下js报错  getContext 找不到、

解决方案:修改jquery.qrcode.min.js

源码:

 h = r.extend({}, {
            render: "canvas",
            width: 256,
            height: 256,
            typeNumber: -1,
            correctLevel: 2,
            background: "#ffffff",
            foreground: "#000000"
        }, h);

render 的值改为 table
if ("canvas" == h.render) {
                a = new o(h.typeNumber, h.correctLevel);
                a.addData(h.text);
                a.make();
                var c = document.createElement("canvas");
                c.width = h.width;
                c.height = h.height;
                for (var d = c.getContext("2d"), b = h.width / a.getModuleCount(), e = h.height / a.getModuleCount(), f = 0; f < a.getModuleCount(); f++)
                    for (var i = 0; i < a.getModuleCount(); i++) {
                        d.fillStyle = a.isDark(f, i) ? h.foreground : h.background;
                        var g = Math.ceil((i + 1) * b) - Math.floor(i * b),
                            j = Math.ceil((f + 1) * b) - Math.floor(f * b);
                        d.fillRect(Math.round(i * b), Math.round(f * e), g, j)
                    }
            } else {
                a = new o(h.typeNumber, h.correctLevel);
                a.addData(h.text);
                a.make();
                c = r("<table></table>").css("width", h.width + "px").css("height", h.height + "px").css("border", "0px").css("border-collapse", "collapse").css("background-color", h.background);
                d = h.width / a.getModuleCount();
                b = h.height / a.getModuleCount();
                for (e = 0; e < a.getModuleCount(); e++) {
                    f = r("<tr></tr>").css("height", b + "px").appendTo(c);
                    for (i = 0; i < a.getModuleCount(); i++) r("<td></td>").css("width",
                        d + "px").css("background-color", a.isDark(e, i) ? h.foreground : h.background).appendTo(f)
                }
            }

大家可以看到代码:若 render 的值为canvas,那么则会调用getContext ,那么IE8会出错,

所以我们这里使用table

当然,更改为table 之后,需要修改修改样式,否则会很难看...

 #code,#code table{text-align:center;margin:0 auto}
    #code table,#code th,#code td{font-size:1px;overflow: hidden;padding:0}

code  为二维码所放至的div的 id

谢谢

时间: 2024-12-28 21:48:50

JQuery IE8 找不到getContext属性,兼容性问题的相关文章

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

jquery源码笔记(三): jquery.prototype的一些方法 和属性 init

jquery.fn = jquery.prototype = { 添加实例属性和方法, jquery: 版本, constructor: 修正指向问题 init(): 初始化 和 参数管理 selector:存储选择字符串 length: this 对象的长度 toArray(): 转数组 get(): 转原生集合 pushStack(): jquery 对象入栈 each()  :  便利集合 ready():DOM加载的接口 slice(): 集合的截取 first(): 集合的第一项 la

jQuery基础知识&mdash; 获得内容和属性

jQuery拥有可操作HTML元素和属性的方法.   获得内容: text()--设置或返回所选元素的文本内容 html()--设置或返回所选元素的内容(包括HTML标记) val()--设置或返回表单字段的值 获取属性: attr()方法用于获取属性值 例如: 1 $("button").click(function(){ 2 alert($("#w3s").attr("href")); 3 });   jQuery文档操作参考手册 方法 描述

jquery设置和获取元素的属性

jquery设置和获取元素的属性: 使用jquery可以方便的设置指定元素的属性,下面就以div元素为例子做一下简单介绍. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁

jQuery添加和删除元素class属性实例代码

jQuery添加和删除元素class属性实例代码:元素的的class属性一般是用来设置样式之用,所以添加或者删除都意味着改变元素的样式,下面就介绍一下如何使用jQuery来删除和添加元素的class属性值,希望能够给大家带来一定的帮助.代码实例如下: function switchTeachControl() { var target=$("#thediv"); if(target.hasClass("controlOff")) { target.removeCla

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

jQuery获取和操作元素的属性和CSS样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

ie8 iframe去掉边框的属性

<iframe src="" id="Iframe" height="200" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe> ie8 iframe去掉边框的属性

css3部分属性兼容性别扭写法(因为很多我就叫他别扭了,希望全面早早支持css3吧)

/*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-border-radius: 10px;/*moz内核浏览器*/ border-radius:20px;/*直接支持css3圆角属性的浏览器(如IE10)*/ }/*配合js使用*/ /*透明度class,需要设置透明度的元素加上class名称*/ .transparent{ -webkit-opacit