在网页内使用zxing吧code扫描仪 [英] Using zxing Barcode Scanner within a web page
问题描述
有一个工作示例如何使用zxing吧code扫描仪从一个网页？
参照本文档： https://github.com/zxing/zxing/wiki/Scanning-From -Web-页面
应该不是下面的测试code的工作？
功能测试1（）
{
$阿贾克斯（
{
网址： "zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7B$c$c%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
成功：函数（）
{
警报（成功）;
}，
错误：函数（）
{
警报（错误）;
}
}）;
}
函数的Test2（）
{
$阿贾克斯（
{
网址： "http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7B$c$c%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
成功：函数（）
{
警报（成功）;
}，
错误：函数（）
{
警报（错误）;
}
}）;
}
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js"></script>
＆LT;按钮ID =按钮1的onClick =Test1的（）;＆GT;试验1＆LT; /按钮＆GT;
＆LT; BR＆GT;
＆LT; BR＆GT;
＆LT;按钮ID =按钮2的onClick =的Test2（）;＆GT;试验2'，/按钮＆GT;
我不断收到错误在我的Android 4.4.2三星Galaxy TabPro和三星Galaxy S4。 我试过股票浏览器Chrome，火狐和海豚浏览器。
即使 http://zxing.appspot.com/scan ，因为它总是要求不工作我安装（已安装）的应用程序。
任何帮助将是非常美联社preciated。
ZXing的目的不是与AJAX一起工作。相反，它的工作原理是在默认浏览器中打开一个URL解析。浏览器的行为主要是什么负责从该点向前的用户体验。
有贴对此几种方法;不幸的是，没人，将工作的每一个浏览器的方法。
有些浏览器，当你在命令行打开它们，将检查URL是否在另一个选项卡已经打开，如果是的话，会用，而不是一个新的选项卡。这将导致一个hashchanged事件，如果zxing链接中包含zxing：//扫描/ RET = mytab.html＃{code}。
其他浏览器不进行这样的检查，所以我们风与多个选项卡，并具有相同的URL（除了散列的），其中没有一个提出了hashchanged事件。对于这些浏览器，我们需要重新使用的页面从缓存中（如果可能对每一个扫描prevent网络流量），并更改localStorage的价值，哈希是什么。如果浏览器能够监听的存储事件，我们可以用它来触发code。
在code以下与Chrome浏览器，内在的Android浏览器和Firefox的作品。它可能与其他人的工作，但我还没有尝试过。一个Firefox的警告，虽然是扫描窗口只会关闭，如果about：config中设置dom.allow_scripts_to_close_windows设置为true
。 ＆LT;！DOCTYPE HTML＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
//脚本的这一整块应该是在一个单独的文件，并列入要在其中扫描仪功能的每个文档
功能zxinglistener（五）{
的localStorage [zxingbar code] =;
如果（e.url.split（\＃）[0] == window.location.href）{
window.focus（）的;
processBar code（德codeURIComponent（e.newValue））;
}
window.removeEventListener（存储，zxinglistener，假）;
}
如果（window.location.hash！=）{
的localStorage [zxingbar code] = window.location.hash.substr（1）;
self.close（）;
window.location.href =有关：空白; //如果self.close被禁用
}其他{
window.addEventListener（hashchange功能（E）{
window.removeEventListener（存储，zxinglistener，假）;
变种散列= window.location.hash.substr（1）;
如果（哈希！=）{
window.location.hash =;
processBar code（德codeURIComponent（散））;
}
}， 假）;
}
传播getScan（）{
变种的href = window.location.href.split（\＃）[0];
window.addEventListener（存储，zxinglistener，假）;
zxingWindow =的window.open（？zxing：//扫描/ RET =EN + codeURIComponent（HREF +＃{code}），'_自我'）;
}
＆LT; / SCRIPT＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
功能processBar code（B）{
变种D = document.createElement方法（分区）;
d.innerHTML = B;
document.body.appendChild（四）;
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮的onclick =getScan（）＆GT;得到扫描和LT; /按钮＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您可以做一个JS文件包含脚本的顶块，并包含了一切，你需要扫描功能在页面上。
然后在你的文档的身体，你可以在某处设置一个事件来调用getScan（），它会调用processBar code（酒吧code）你写到您的网页。包括一个简单的如的缘故。
侧注意：当你第一次运行你的页面zxing，你会被要求选择一个默认的应用程序。确保你选择了你从运行页面相同的浏览器。此外，如果previously选择默认broswer为zxing和要改变的浏览器使用的zxing，你需要从其他浏览器清除默认设置。
非常感谢@肖恩 - 欧文为他的辛勤工作和很棒的产品。
Is there a working example how you can use the zxing Barcode Scanner from a web page?
Referring to this documentation: https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages
shouldn't the following test code work?
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>
I keep getting "error" on my Android 4.4.2 Samsung Galaxy TabPro and Samsung Galaxy S4. I've tried the stock browser, Chrome, Firefox and Dolphin Browser.
Even http://zxing.appspot.com/scan doesn't work as it always asks me to install the (already installed) app.
Any help would be much appreciated.
ZXing isn't designed to work with AJAX. Instead, it works by opening a parsed URL in the default browser. The behavior of the browser is mainly what's responsible for the user experience from that point forward.
There are several methods posted regarding this; unfortunately, there is no one method that will work for every browser.
Some browsers, when you open them from the command line, will check to see if the URL is already opened in another tab, and if so, will use that tab instead of a new one. This will cause a "hashchanged" event if the zxing link contains "zxing://scan/?ret=mytab.html#{CODE}".
Other browsers don't perform such a check, so we wind up with multiple tabs, all having the same URL (with the exception of the hash), and none of them raising the "hashchanged" event. For those browsers, we need to re-use the page from cache if possible (to prevent network traffic on every scan), and change the localStorage value to what the hash is. If the browser is capable of listening for the "storage" event, we can use that to trigger the code.
The code below works with Chrome, the intrinsic Android browser, and Firefox. It might work with others, but I haven't tried. One Firefox caveat, though, is that the scanner window will only close if the about:config setting "dom.allow_scripts_to_close_windows" is set to "true".
<!DOCTYPE html>
<script type="text/javascript">
//This entire block of script should be in a separate file, and included in each doc in which you want scanner capabilities
function zxinglistener(e){
localStorage["zxingbarcode"] = "";
if(e.url.split("\#")[0] == window.location.href){
window.focus();
processBarcode(decodeURIComponent(e.newValue));
}
window.removeEventListener("storage", zxinglistener, false);
}
if(window.location.hash != ""){
localStorage["zxingbarcode"] = window.location.hash.substr(1);
self.close();
window.location.href="about:blank";//In case self.close is disabled
}else{
window.addEventListener("hashchange", function(e){
window.removeEventListener("storage", zxinglistener, false);
var hash = window.location.hash.substr(1);
if (hash != "") {
window.location.hash = "";
processBarcode(decodeURIComponent(hash));
}
}, false);
}
function getScan(){
var href = window.location.href.split("\#")[0];
window.addEventListener("storage", zxinglistener, false);
zxingWindow = window.open("zxing://scan/?ret=" + encodeURIComponent(href + "#{CODE}"),'_self');
}
</script>
<html>
<head>
<script type="text/javascript">
function processBarcode(b){
var d = document.createElement("div");
d.innerHTML = b;
document.body.appendChild(d);
}
</script>
</head>
<body>
<button onclick="getScan()">get Scan</button>
</body>
</html>
You can make a JS include file for the top block of script, and include it on all the pages where you need scanning capabilities.
Then in the body of your document, you can set an event somewhere to call getScan(), which will call processBarcode(barcode) that you write into your page. Included is a simple one for example's sake.
Side Note: The first time you run zxing from your page, you'll be asked to choose a default app. Make sure you chose the same browser that you're running the page from. Additionally, if you previously selected a default broswer for zxing and want to change which browser you use for zxing, you'll need to clear defaults from your other browsers.
Many thanks to @sean-owen for his hard work and fantastic product.
这篇关于在网页内使用zxing吧code扫描仪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
