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"로 설정된 경우에만 스캐너 창을 닫을 수 있다는 것입니다.
**이 기능은 스캔을 허용하는 여러 페이지에서 더 잘 작동하도록 편집되었으며 이제 코드를 방해하지 않고 다른 해시를 사용할 수 있습니다. **
새로운 버전은 당신은 JS을 할 수 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>
스크립트의 상단 블록의 파일을 포함하고 스캔 기능을 필요로하는 모든 페이지에 포함되어 있습니다.
문서의 본문에서 getZxing()을 호출 할 이벤트를 설정할 수 있습니다.이 이벤트는 페이지에 쓰는 processBarcode (바코드)를 호출합니다. 포함 된 것은 예를 들어 간단한 것입니다.
사이드 노트 : 페이지에서 zxing을 처음 실행하면 기본 앱을 선택하라는 메시지가 표시됩니다.페이지를 실행하고있는 것과 동일한 브라우저를 선택했는지 확인하십시오. 또한 이전에 zxing 용 기본 broswer를 선택하고 zxing에 사용할 브라우저를 변경하려는 경우 다른 브라우저에서 기본값을 지워야합니다.
@ sean-owen에게 열심히 노력하고 환상적인 제품을 제공해 주신 것에 대해 감사드립니다. 12/19/16
확인
UPDATE, 나는 파이어 폭스와 크롬 잘 작동하는 약간 더 강력한 버전을했다. 내가 발견 한 몇 가지 :
크롬이 자동으로 Chrome을 열도록 설정되지 않은 경우 Chrome에서 Storage 이벤트를 사용하고 기본값이 된 후 Hash 이벤트를 사용합니다.
파이어 폭스는 Hash 이벤트를 사용하지 않지만 다른 이상 현상의 몇 가지가 있습니다
window.location.href으로 스캐너 (감사합니다, @Roland),하지만 거래 차단기를 호출하지 않는 한 별도의 창이 열립니다 않을 것입니다.
코드가 스캐너 해시와 일반 해시 사이를 구분할 수 있도록 해시에 "zx"접두어를 남겼습니다. 거기에두면 processBarcode 함수에서 알 수 없으며 비 -zx 해시는 예상대로 작동합니다.
작동중인 샘플을 공유 할 수 있습니까? 그럴 것입니다. –
@ Mo-Prog, 필자는 실제 예제를 포함 시켰습니다. 10 주 지연 죄송합니다! 여러 청취자를 막기 위해 코드를 약간 수정했습니다. – alfadog67
저장 이벤트를 사용하는 것은 훌륭한 아이디어입니다.이 트릭을 공유해 주셔서 감사합니다! :) –