条形码扫描在智能手机/平板电脑浏览器的web应用程序

barcode scanning in web apps for smartphone/tablet browsers

本文关键字：浏览器 web 应用程序 平板电脑 扫描 智能手机 条形码      更新时间：2023-09-26

我在android设备的web应用程序中使用zxing://scan进行条形码扫描。用户不能接受phonegap的包装。他们希望应用程序只能通过浏览器访问。但是根据我的理解，zxing://scan不能是Ajax请求url。我通过的唯一解决方案是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编码&向服务器端发送一个帖子，解码条形码，并从其响应中获取条形码值。我知道这不是条形码扫描的最佳方式。但由于我上面提到的原因，我运气不好。你如何评价这种方法?有比这更好的解决办法吗?

根据应用程序，与其在?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();
    }
});
相关文章：