在网页中使用zxing条码扫描器

有没有一个工作的例子,您可以如何使用从网页zxing条码扫描仪?

参考这个文档: https : //github.com/zxing/zxing/wiki/Scanning-From-Web-Pages

下面的testing代码不应该工作吗?

function Test1() { $.ajax( { url: "zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13", success:function() { alert("success"); }, error:function() { alert("error"); } }); } function Test2() { $.ajax( { 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() { alert("success"); }, error:function() { 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三星Galaxy TabPro和三星Galaxy S4上出现“错误”。 我试过了股票浏览器,Chrome,Firefox和Dolphin Browser。

即使http://zxing.appspot.com/scan无法正常工作,因为它总是要求我安装(已安装)的应用程序。

任何帮助将非常感激。

Related of "在网页中使用zxing条码扫描器"

ZXing的devise不适用于AJAX。 相反,它通过在默认浏览器中打开parsing的URL来工作。 浏览器的行为主要是从那时起负责用户体验的。

有几种方法发布这个; 不幸的是,没有一种方法可以用于每个浏览器。

一些浏览器,当你从命令行打开它们时,将检查URL是否已经在另一个标签中打开,如果是的话,将使用该标签而不是新标签。 如果zxing链接包含“zxing:// scan /?ret = mytab.html#{CODE}”,则会引起“onhashchange”事件。

其他浏览器不执行这样的检查,所以我们结束了多个选项卡,都具有相同的URL(除散列),并没有引发“hashchanged”事件。 对于这些浏览器,如果可能的话,我们需要从caching中重新使用页面(以防止每次扫描时的networkingstream量),并将localStorage值更改为散列值。 如果浏览器能够监听“存储”事件,我们可以使用它来触发代码。

下面的代码适用于Chrome,内置的Android浏览器和Firefox。 它可能与其他人一起工作,但我没有尝试过。 但是,一个Firefox的警告是,如果about:config设置“dom.allow_scripts_to_close_windows”设置为“true”,扫描器窗口才会closures。

**这是编辑更好的多个页面,允许扫描,现在你可以使用不同的散列,而不会干扰代码。 **

新版本12/19/19

 <!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> 

您可以为顶层的脚本创build一个JS包含文件,并将其包含在您需要扫描function的所有页面上。

然后在你的文档中,你可以设置一个事件来调用getZxing(),它会调用你写入页面的processBarcode(条形码)。 包括一个简单的例子。

注意 :你第一次从你的页面运行zxing,你会被要求select一个默认的应用程序。 确保你select了你正在运行该页面的浏览器。 此外,如果您之前select了zxing的默认浏览器,并且想要更改您用于zxing的浏览器,则需要清除其他浏览器的默认浏览器。

非常感谢@ sean-owen辛勤的工作和出色的产品。

更新12/19/16

好吧,我做了一个稍微更强大的版本,可以很好地适用于Firefox和Chrome。 我发现了几件事情:

如果扫描器未设置为自动打开Chrome,Chrome将使用Storage事件,并在默认情况下使用Hash事件。

Firefox永远不会使用Hash事件,但会打开一个额外的窗口,除非您使用window.location.href (谢谢,@Roland)调用扫描器。

还有一些其他的exception,但没有交易破坏者。

我在散列中留下了“zx”前缀,以便代码可以在扫描器散列和常规散列之间进行划分。 如果你把它留在那里,你将不会在processBarcode函数中注意到它,而non-zx散列将按照预期运行。