ZXing nie jest przeznaczony do pracy z AJAX. Zamiast tego działa, otwierając przeanalizowany adres URL w domyślnej przeglądarce. Zachowanie przeglądarki jest głównie odpowiedzialne za wrażenia użytkownika od tego momentu.
W tym temacie zamieszczono kilka metod; niestety nie ma jednej metody, która zadziała dla każdej przeglądarki.
Niektóre przeglądarki, po otwarciu ich z wiersza poleceń, sprawdzają, czy adres URL jest już otwarty na innej karcie, a jeśli tak, użyje tej karty zamiast nowej. Spowoduje to zdarzenie "onhashchange", jeśli link zxing zawiera "zxing: // scan /? Ret = mytab.html # {CODE}".
Inne przeglądarki nie wykonują takiego sprawdzenia, dlatego uruchamiamy wiele kart, wszystkie mają ten sam adres URL (z wyjątkiem skrótu), a żaden z nich nie podnosi zdarzenia "hashchanged". W przypadku tych przeglądarek musimy ponownie użyć strony z pamięci podręcznej, jeśli to możliwe (aby zapobiec ruchowi sieciowemu przy każdym skanowaniu) i zmienić wartość localStorage na wartość skrótu. Jeśli przeglądarka jest w stanie nasłuchiwać zdarzenia "storage", możemy użyć tego do wyzwolenia kodu.
Poniższy kod działa z Chrome, wewnętrzną przeglądarką systemu Android i Firefox. Może działać z innymi, ale nie próbowałem. Jednym z zastrzeżeń Firefoksa jest jednak zamknięcie okna skanera tylko wtedy, gdy ustawienie about: config "dom.allow_scripts_to_close_windows" jest ustawione na "true".
** Zostało to zmodyfikowane, aby działało lepiej z wieloma stronami umożliwiającymi skanowanie, a teraz można używać różnych skrótów bez ingerencji w kod. **
NOWA WERSJA 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>
Można zrobić JS zawierać plik dla górnego bloku skryptu, i umieścić go na wszystkich stronach, gdzie trzeba możliwości skanowania.
Następnie w treści dokumentu można ustawić zdarzenie gdzieś, aby wywołać metodę getZxing(), która wywoła processBarcode (kod kreskowy), który napiszesz na swojej stronie. W zestawie jest prosty na przykład.
Notatka boczna: Po pierwszym uruchomieniu zxing ze strony, zostaniesz poproszony o wybranie domyślnej aplikacji.Upewnij się, że wybrałeś tę samą przeglądarkę, z której korzystasz. Dodatkowo, jeśli wcześniej wybrałeś domyślny program do zxing i chcesz zmienić przeglądarkę, której używasz do zxing, musisz wyczyścić domyślne ustawienia z innych przeglądarek.
Podziękowania dla @ sean-owen za jego ciężką pracę i fantastyczny produkt.
AKTUALIZACJA 12/19/16
Ok, zrobiłem nieco bardziej solidną wersję, która działa dobrze z Firefox i Chrome. Kilka rzeczy, które odkryłem:
Chrome użyje zdarzenia Storage, jeśli skaner nie jest skonfigurowany do automatycznego uruchamiania Chrome i będzie używał zdarzenia Hash po tym, jak stanie się domyślnym.
Firefox nigdy nie użyje zdarzenie Hash, ale otwiera się dodatkowe okno, chyba że nazywają skaner z window.location.href (dzięki, @Roland)
Istnieje kilka innych anomalii, ale nie wyłączniki ofertę.
Zostawiłem prefiks "zx" w haszcie, tak aby kod mógł odgraniczać skróty skanera i zwykłe skróty. Jeśli go tam zostawisz, nie zauważysz tego w funkcji processBarcode, a skróty inne niż zx będą działały zgodnie z oczekiwaniami.
Czy możesz udostępnić próbną próbkę? Byłoby świetnie –
@ Mo-Prog, WRESZCIE zawarłem działający przykład. Przepraszamy za 10-tygodniowe opóźnienie! Poprawiłem też nieco kod, aby zapobiec wielu słuchaczy. – alfadog67
Korzystanie z wydarzenia pamięci masowej to genialny pomysł, dziękuję ci za udostępnienie tej sztuczki! :) –