智能手机/平板电脑浏览器的网络应用中的条形码扫描

时间:2013-05-23 12:49:55

标签: javascript android html5 zxing

我正在使用 zxing:// scan 在我的Android应用程序的Android应用程序中进行条形码扫描。用户不接受电话间隙包装。他们希望只能通过浏览器访问应用程序。但根据我的理解, zxing:// scan 不能成为Ajax请求网址。 我遇到的唯一解决方案是window.location.href = zxing://scan/?ret="+escape(window.location.href+"?val={CODE},它将调用android条形码扫描程序并将条形码值分配给url中的 {CODE}占位符。 但不久之后页面重新加载并且所有数据都丢失了。表格太长,有多个网格。是否有任何快速解决方法只是将值设置为浏览器选项卡的URL栏并阻止触发页面重新加载,而不是存储在会话中输入的所有用户数据并重新加载并将其重新设置为每个表单用户扫描条形码的时间?

请注意:没有页面重新加载&客户端不接受phonegap插件。我真的注定了,还是有任何解决方案......?

我的第二种方法是使用相机标签<input id="demoFile" type="file" accept="image/*;capture=camera">拍摄条形码照片,base64编码&amp;向服务器端发帖并解码条形码并从其响应中获取条形码值。 我知道它不是条形码扫描的最佳方式。但由于我上面提到的原因,我运气不好。你如何评价这种方法。有没有比这更好的解决方案?

提前致谢。

1 个答案:

答案 0 :(得分:1)

取决于应用程序,而不是触发返回?val =如何将它发送到#val =并使用javascripts document.location.hash解析它?如果您收听onhashchange事件(假设它是一个较新的浏览器或移动设备),您将全部设置为在没有页面刷新的情况下执行操作。

请求的示例(假设使用jQuery):

$(window).one('hashchange', function() {
    if(document.location.hash.match('=')){
        //we have a code...
        var code = document.location.hash.substr(document.location.hash.indexOf('=')+1));
        document.location.hash="";
        //now do something with scanned code
        alert(code);
    }
});

var selector = 'body';
var filler = "<p align='center'>This device is not set up to support scanning at the moment.<br><br>"
            +"On Android devices, install the <a href='https://play.google.com/store/apps/details?id=com.google.zxing.client.android&feature=search_result'>Barcode Scanner by ZXing</a> app from the Google Play store.<br><br>"
            +"You can also manually enter your barcode here: <input type='text' id='code'><input type='button' id='submitcode' value='Check Barcode'>";
            +"</p>";

//Set up our html into the element specified in the selector var
$(selector).html("<iframe id='scanner'></iframe>"+filler);
//try to load the zxing app if it exists - if not, error will catch the failed load and default us back to the manual entry form
$('#scanner').error(function(){
    $(selector).html(filler);
    //if manual form is submitted, append the hash so we can use the one set of logic to manage the codes
    $(selector+' #submitcode').click(function(){ document.location.href = document.location.href+"#sku="+$('#code').val(); });
    //catch someone hitting return to submit the form as well
    $('#code').keydown(function (e){
        if(e.keyCode == 13){
            $(selector+' #submitcode').click();
        }
    });
}).attr('src',"zxing://scan/?ret="+escape(window.location.href+"#sku={CODE}"));

//handle manual form submission via button click or return key
$(selector+' #submitcode').click(function(){ 
    document.location.href = document.location.href+"#sku="+$('#code').val(); 
});
$('#code').keydown(function (e){
    if(e.keyCode == 13){
        $(selector+' #submitcode').click();
    }
});