2014-10-14 9 views
10

क्या कोई कामकाजी उदाहरण है कि आप किसी वेब पेज से ज़ॉक्सिंग बारकोड स्कैनर का उपयोग कैसे कर सकते हैं?वेब पेज के भीतर ज़िक्सिंग बारकोड स्कैनर का उपयोग

इस दस्तावेज़ का जिक्र करते हुए: https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages

चाहिए नहीं निम्नलिखित परीक्षण कोड काम करता है?

function Test1() 
 
{ 
 
\t $.ajax(
 
\t { 
 
     url: "zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13", 
 
     success:function() 
 
\t \t { 
 
      alert("success"); 
 
     }, 
 
     error:function() 
 
\t \t { 
 
      alert("error"); 
 
     } 
 
    }); 
 
} 
 
\t 
 
function Test2() 
 
{ 
 
\t $.ajax(
 
\t { 
 
     url: "http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13", 
 
     success:function() 
 
\t \t { 
 
      alert("success"); 
 
     }, 
 
     error:function() 
 
\t \t { 
 
      alert("error"); 
 
     } 
 
    }); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button id="button1" onClick="Test1();">Test 1</button> 
 
<br> 
 
<br> 
 
<button id="button2" onClick="Test2();">Test 2</button>

मैं अपने Android 4.4.2 सैमसंग गैलेक्सी TabPro और Samsung Galaxy S4 पर "त्रुटि" जा रहे हैं। मैंने स्टॉक ब्राउज़र, क्रोम, फ़ायरफ़ॉक्स और डॉल्फिन ब्राउज़र का प्रयास किया है।

यहां तक ​​कि http://zxing.appspot.com/scan काम नहीं करता है क्योंकि यह हमेशा मुझे (पहले से स्थापित) ऐप इंस्टॉल करने के लिए कहता है।

किसी भी मदद की बहुत सराहना की जाएगी।

उत्तर

17

जेएक्सिंग AJAX के साथ काम करने के लिए डिज़ाइन नहीं किया गया है। इसके बजाए, यह डिफ़ॉल्ट ब्राउज़र में एक पार्स किए गए यूआरएल को खोलकर काम करता है। ब्राउज़र का व्यवहार मुख्य रूप से उस बिंदु से उपयोगकर्ता अनुभव के लिए ज़िम्मेदार है।

इसके बारे में कई विधियां पोस्ट की गई हैं; दुर्भाग्य से, कोई भी तरीका नहीं है जो हर ब्राउज़र के लिए काम करेगा।

कुछ ब्राउज़र, जब आप उन्हें कमांड लाइन से खोलने के लिए, यदि URL पहले से ही अन्य टैब में खोला गया है देखने के लिए जाँच करेगा, और यदि हां, तो इसके बजाय एक नया एक की उस टैब का प्रयोग करेंगे। यदि ज़ेक्सिंग लिंक में "zxing: // scan /? Ret = mytab.html # {CODE}" है, तो यह "ऑनशैशचेंज" ईवेंट का कारण बन जाएगा।

अन्य ब्राउज़र ऐसे चेक नहीं करते हैं, इसलिए हम एक ही यूआरएल (हैश के अपवाद के साथ) वाले सभी टैब के साथ हवाएं करते हैं, और उनमें से कोई भी "हैशचेंज" ईवेंट नहीं उठाता है। उन ब्राउज़रों के लिए, यदि संभव हो तो हमें पृष्ठ को कैश से फिर से उपयोग करने की आवश्यकता है (प्रत्येक स्कैन पर नेटवर्क यातायात को रोकने के लिए), और हैश के लिए स्थानीय स्टोरेज मान को बदलें। यदि ब्राउज़र "स्टोरेज" ईवेंट सुनने में सक्षम है, तो हम कोड को ट्रिगर करने के लिए इसका उपयोग कर सकते हैं।

नीचे दिया गया कोड क्रोम, आंतरिक एंड्रॉइड ब्राउज़र और फ़ायरफ़ॉक्स के साथ काम करता है। यह दूसरों के साथ काम कर सकता है, लेकिन मैंने कोशिश नहीं की है। हालांकि, एक फ़ायरफ़ॉक्स चेतावनी यह है कि स्कैनर विंडो केवल तभी बंद हो जाएगी जब कॉन्फ़िगरेशन सेटिंग "dom.allow_scripts_to_close_windows" को "सत्य" पर सेट किया गया हो।

** यह स्कैन की अनुमति देने वाले कई पृष्ठों के साथ बेहतर काम करने के लिए संपादित किया गया था, और अब आप कोड के साथ हस्तक्षेप किए बिना अलग-अलग हैंश का उपयोग कर सकते हैं। **

नई संस्करण 12/19/16

<!DOCTYPE html> 
<HTML> 
<HEAD> 
<script type="text/javascript"> 

    if(window.location.hash.substr(1,2) == "zx"){ 
     var bc = window.location.hash.substr(3); 
     localStorage["barcode"] = decodeURI(window.location.hash.substr(3)) 
     window.close(); 
     self.close(); 
     window.location.href = "about:blank";//In case self.close isn't allowed 
    } 
</script> 
<SCRIPT type="text/javascript" > 
    var changingHash = false; 
    function onbarcode(event){ 
     switch(event.type){ 
      case "hashchange":{ 
       if(changingHash == true){ 
        return; 
       } 
       var hash = window.location.hash; 
       if(hash.substr(0,3) == "#zx"){ 
        hash = window.location.hash.substr(3); 
        changingHash = true; 
        window.location.hash = event.oldURL.split("\#")[1] || "" 
        changingHash = false; 
        processBarcode(hash); 
       } 

       break; 
      } 
      case "storage":{ 
       window.focus(); 
       if(event.key == "barcode"){ 
        window.removeEventListener("storage", onbarcode, false); 
        processBarcode(event.newValue); 
       } 
       break; 
      } 
      default:{ 
       console.log(event) 
       break; 
      } 
     } 
    } 
    window.addEventListener("hashchange", onbarcode, false); 

    function getScan(){ 
     var href = window.location.href; 
     var ptr = href.lastIndexOf("#"); 
     if(ptr>0){ 
      href = href.substr(0,ptr); 
     } 
     window.addEventListener("storage", onbarcode, false); 
     setTimeout('window.removeEventListener("storage", onbarcode, false)', 15000); 
     localStorage.removeItem("barcode"); 
     //window.open (href + "#zx" + new Date().toString()); 

     if(navigator.userAgent.match(/Firefox/i)){ 
      //Used for Firefox. If Chrome uses this, it raises the "hashchanged" event only. 
      window.location.href = ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}")); 
     }else{ 
      //Used for Chrome. If Firefox uses this, it leaves the scan window open. 
      window.open ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}")); 
     } 
    } 

    function processBarcode(bc){ 
     document.getElementById("scans").innerHTML += "<div>" + bc + "</div>"; 
     //put your code in place of the line above. 
    } 

</SCRIPT> 
<META name="viewport" content="width=device-width, initial-scale=1" /> 
</HEAD> 
<BODY> 
<INPUT id=barcode type=text > 
<INPUT style="width:100px;height:100px" type=button value="Scan" onclick="getScan();"> 
<div id="scans"></div> 
</BODY> 
</HTML> 

आप एक जे एस कर सकते हैं स्क्रिप्ट के शीर्ष ब्लॉक के लिए फ़ाइल में शामिल हैं, और सभी पृष्ठों जहां स्कैनिंग क्षमताओं की आवश्यकता पर इसे शामिल हैं।

फिर अपने दस्तावेज़ के मुख्य भाग में, आप एक घटना कहीं getZxing() है, जो processBarcode (बारकोड) आप अपने पेज में लिख कॉल करेंगे कॉल करने के लिए सेट कर सकते हैं। उदाहरण के लिए एक सरल एक शामिल है।

साइड नोट: पहली बार जब आप अपने पृष्ठ से ज़क्सिंग चलाते हैं, तो आपको एक डिफ़ॉल्ट ऐप चुनने के लिए कहा जाएगा।सुनिश्चित करें कि आपने वही ब्राउज़र चुना है जिसे आप पृष्ठ से चला रहे हैं। इसके अतिरिक्त, यदि आपने पहले zxing के लिए डिफ़ॉल्ट ब्रोसर चुना है और आप जो ब्राउज़र ब्राउज़र zxing के लिए उपयोग करना चाहते हैं, उसे बदलना चाहते हैं, तो आपको अपने अन्य ब्राउज़रों से डिफ़ॉल्ट साफ़ करना होगा।

उनके कड़ी मेहनत और शानदार उत्पाद के लिए @ सीन-ओवेन के लिए बहुत धन्यवाद।

अद्यतन 12/19/16

ठीक है, मुझे लगता है कि फ़ायरफ़ॉक्स और क्रोम के साथ अच्छी तरह से काम करता है एक थोड़ा और अधिक मजबूत संस्करण था। कुछ चीजें मैंने खोजी:

क्रोम Storage ईवेंट का उपयोग करेगा यदि स्कैनर स्वचालित रूप से क्रोम खोलने के लिए सेट नहीं है, और Hash ईवेंट डिफ़ॉल्ट होने के बाद उपयोग करेगा।

फ़ायरफ़ॉक्स Hash घटना का उपयोग कभी नहीं होगा, लेकिन एक अतिरिक्त विंडो खुलती है जब तक आप के साथ window.location.href स्कैनर (धन्यवाद, @Roland)

अन्य विसंगतियों के एक जोड़े हैं, लेकिन कोई सौदा तोड़ने वाले कहते हैं।

मैंने हैश में "zx" उपसर्ग छोड़ा, ताकि कोड स्कैनर हैश और नियमित हैश के बीच चित्रित कर सके। यदि आप इसे वहां छोड़ देते हैं, तो आप इसे processBarcode फ़ंक्शन में नहीं देख पाएंगे, और गैर-जेएक्स हैश अपेक्षा के अनुसार काम करेंगे।

+0

क्या आप एक कामकाजी नमूना साझा कर सकते हैं? यह –

+0

@ मो-प्रोग होगा, मैंने अंत में एक कामकाजी उदाहरण शामिल किया था। 10 सप्ताह की देरी के लिए खेद है! मैंने कई श्रोताओं को रोकने के लिए थोड़ा सा कोड भी tweaked। – alfadog67

+0

स्टोरेज इवेंट का उपयोग करना एक शानदार विचार है, इस चाल को साझा करने के लिए धन्यवाद! :) –

संबंधित मुद्दे