在网页中使用zxing条形码扫描仪

Question

在网页中使用zxing条形码扫描仪

Cra*_*Tea 11 javascript android barcode zxing web

有没有一个工作示例如何从网页上使用zxing条形码扫描仪？

参考此文档: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,EAN_13",
        success:function()
		{
            alert("success");
        },
        error:function()
		{
            alert("error");
        }
    });
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我一直在Android 4.4.2三星Galaxy TabPro和三星Galaxy S4上出现"错误".我已经尝试过股票浏览器,Chrome,Firefox和Dolphin Browser.

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

任何帮助将非常感激.

Answer 1

alf*_*g67 20

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

关于此,有几种方法发布; 遗憾的是,没有一种方法适用于每个浏览器.

某些浏览器,当您从命令行打开它们时,将检查URL是否已在另一个选项卡中打开,如果是,则将使用该选项卡而不是新选项卡.如果zxing链接包含"zxing:// scan /？ret = mytab.html#{CODE}",这将导致"onhashchange"事件.

其他浏览器不执行此类检查,因此我们最终使用多个选项卡,所有选项卡都具有相同的URL(哈希除外),并且它们都没有引发"hashchanged"事件.对于那些浏览器,我们需要尽可能重用缓存中的页面(以防止每次扫描时出现网络流量),并将localStorage值更改为哈希值.如果浏览器能够监听"存储"事件,我们可以使用它来触发代码.

下面的代码适用于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>

Run Code Online (Sandbox Code Playgroud)

您可以为顶部的脚本块创建一个JS包含文件,并将其包含在您需要扫描功能的所有页面上.

然后在文档的正文中,您可以在某处设置一个事件来调用getZxing(),它将调用您写入页面的processBarcode(条形码).其中包括一个简单的例子.

附注:第一次从页面运行zxing时,系统会要求您选择默认应用.确保您选择了正在运行该页面的浏览器.此外,如果您之前为zxing选择了默认broswer并想要更改用于zxing的浏览器,则需要清除其他浏览器的默认值.

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

更新12/19/16

好吧,我做了一个更强大的版本,适用于Firefox和Chrome.我发现了几件事:

Chrome将使用的Storage情况下,如果扫描仪没有被设置为自动打开浏览器,并使用Hash它变得违约后的事件.

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

还有其他一些异常,但没有交易破坏者.

我在哈希中留下了"zx"前缀,这样代码就可以在扫描器哈希和常规哈希之间进行描述.如果你把它留在那里,你将不会在processBarcode函数中注意到它,非zx哈希将按预期运行.

归档时间：	11 年前
查看次数：	15668 次
最近记录：	8 年，6 月前