参考本文档：
https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages
以下测试代码不应该工作吗？
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,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浏览器.
即使http://zxing.appspot.com/scan不工作,因为它总是要求我安装(已安装)的应用程序.
任何帮助将不胜感激.
解决方法
有几种方法发布;不幸的是,没有一种可以为每个浏览器工作的方法.
某些浏览器,当您从命令行打开它们时,将检查该URL是否已在另一个选项卡中打开,如果是,则使用该选项卡而不是新的.如果zxing链接包含“zxing：// scan /？ret = mytab.html#{CODE}”,则会导致“onhashchange”事件.
其他浏览器不执行这样的检查,所以我们结束了多个选项卡,所有选项卡都具有相同的URL(哈希除外),并且没有一个提升“hashchanged”事件.对于这些浏览器,如果可能,我们需要从缓存重新使用页面(以防止每次扫描时的网络流量),并将localStorage值更改为哈希值.如果浏览器能够侦听“存储”事件,我们可以使用它来触发代码.
以下代码适用于Chrome,固有的Android浏览器和Firefox.它可能与他人合作,但我没有尝试过.一个Firefox警告是,只有关闭：config设置“dom.allow_scripts_to_close_windows”设置为“true”时,扫描仪窗口才会关闭.
**这是编辑工作更好的多个页面允许扫描,现在你可以使用不同的哈希,而不会干扰代码. **
新版本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",false);
function getScan(){
var href = window.location.href;
var ptr = href.lastIndexOf("#");
if(ptr>0){
href = href.substr(0,ptr);
}
window.addEventListener("storage",false);
setTimeout('window.removeEventListener("storage",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>
您可以为顶部的脚本块制作JS包含文件,并将其包含在需要扫描功能的所有页面上.
然后在文档的正文中,您可以将某个事件设置为调用getZxing(),这将调用您写入页面的processBarcode(条形码).包括的是一个简单的例子.
侧面注意：第一次从页面运行zxing时,系统会要求您选择一个默认应用程序.确保您选择与您正在运行的页面相同的浏览器.另外,如果您以前选择了zxing的默认浏览器,并且想要更改用于zxing的浏览器,则需要从其他浏览器中清除默认值.
非常感谢@ sean-owen的努力工作和梦幻般的产品.
更新12/19/16
好的,我做了一个更强大的版本,适用于Firefox和Chrome.我发现的几件事：
如果扫描仪未设置为自动打开Chrome,Chrome将会使用存储事件,并在默认情况下使用哈希事件.
Firefox将永远不会使用Hash事件,但是打开一个额外的窗口,除非你使用window.location.href调用扫描器(谢谢@Roland)
还有一些其他异常现象,但没有交易破裂.
我在散列中留下了“zx”前缀,以便代码可以在扫描仪哈希和常规散列之间描绘.如果你把它留在那里,你不会在processBarcode函数中注意到它,而非zx哈希将按预期运行.
