javascript - 用于智能手机/平板电脑浏览器的 Web 应用程序中的条形码扫描

Question

我在我的 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 栏并防止触发页面重新加载，而不是存储用户在 session 中输入的所有数据并重新加载并将其设置回每个表单用户扫描条形码的时间？

请注意:客户不接受页面重新加载和 phonegap 插件。我真的注定要失败还是有什么解决办法..？

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

提前致谢。

Answer 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();
    }
});