ZXing 不是为使用 AJAX 而设计的。相反,它通过在默认浏览器中打开已解析的 URL 来工作。从那时起,浏览器的行为主要负责用户体验。
关于这个有几种方法;不幸的是,没有一种方法适用于所有浏览器。
当您从命令行打开某些浏览器时,它们会检查该 URL 是否已在另一个选项卡中打开,如果是,将使用该选项卡而不是新选项卡。如果 zxing 链接包含“zxing://scan/?ret=mytab.html#{CODE}”,这将导致“onhashchange”事件。
其他浏览器不执行此类检查,因此我们最终会得到多个选项卡,所有选项卡都具有相同的 URL(哈希除外),并且没有一个引发“hashchanged”事件。对于那些浏览器,我们需要尽可能重用缓存中的页面(以防止每次扫描时出现网络流量),并将 localStorage 值更改为哈希值。如果浏览器能够监听“storage”事件,我们可以使用它来触发代码。
以下代码适用于 Chrome、内置 Android 浏览器和 Firefox。它可能适用于其他人,但我没有尝试过。不过,Firefox 的一个警告是,只有在 about: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", 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>
您可以为脚本的顶部块制作一个 JS 包含文件,并将其包含在您需要扫描功能的所有页面上。
然后在您的文档正文中,您可以在某处设置一个事件来调用 getZxing(),这将调用您写入页面的 processBarcode(barcode)。包括一个简单的例子。
旁注:首次从页面运行 zxing 时,系统会要求您选择默认应用。确保您选择了与运行页面相同的浏览器。此外,如果您之前为 zxing 选择了默认浏览器,并且想要更改用于 zxing 的浏览器,则需要清除其他浏览器的默认设置。
非常感谢 @sean-owen 的辛勤工作和出色的产品。
2016 年 12 月 19 日更新
好的,我做了一个更强大的版本,可以很好地与 Firefox 和 Chrome 配合使用。我发现了几件事:
如果扫描仪未设置为自动打开 Chrome,Chrome 将使用 Storage 事件,并在成为默认设置后使用 Hash 事件。
Firefox 永远不会使用 Hash 事件,但会打开一个额外的窗口,除非您使用 window.location.href 调用扫描仪(谢谢,@Roland)
还有其他一些异常情况,但没有破坏交易。
我在散列中留下了“zx”前缀,这样代码就可以在扫描散列和常规散列之间进行描述。如果将其留在其中,您将不会在 processBarcode 函数中注意到它,并且非 zx 哈希将按预期运行。