barcode scanning in web apps for smartphone/tablet browsers

问题

I am using zxing://scan for barcode scanning in my web application for android devices. The phonegap packaging is not acceptable by the user. They want the application to be accessible via browsers only. But as per my understanding, the zxing://scan can't be an Ajax request url. The only solution which I came through was to window.location.href = zxing://scan/?ret="+escape(window.location.href+"?val={CODE} which will invoke the android barcode scanner and assign the barcode value to the {CODE} placeholder in the url. But soon after that the page reloads and all data gets lost. The form is too long with multiple grids. Is there any quick work around to just set the value to the url bar of the browser tab and prevent the triggering of a page reload, other than to store all the data user entered in the session and reloading and setting it back to the form each time the user scans a barcode ?

Please Note: no page reloading & no phonegap plugin is acceptable by the clients. Am I really doomed or is there any solution..?

My second approach is to use the camera tag <input id="demoFile" type="file" accept="image/*;capture=camera"> for taking a photo of barcode, base64 encode & make a post to server side and decode the barcode and get the barcode value from its response. I know its not the best way for barcode scanning. But I am out of luck due reasons I mentioned above. How do you rate this approach. Is there any better solutions than this ?

Thanks in advance.

回答1:

Depending on the application, instead of firing your return at ?val= how about sending it to #val= and parsing it using javascripts document.location.hash? If you listen to the onhashchange event (assuming its a newer browser or mobile device) you'll be all set to then do stuff without a page refresh.

An example as requested (assumes use of 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();
    }
});

来源：https://stackoverflow.com/questions/16714419/barcode-scanning-in-web-apps-for-smartphone-tablet-browsers