Focus zawsze na stronie

Question

Czy ktoś mógłby mi pokazać jak "usunąć" focus z strony? Przykładem na którym ja próbuję to wykonać jest strona Paidverts.com. Gdy klikam reklamę muszę być przy niektórych reklamach na danej karcie. Jak przełączam się na inną kartę wtedy strona traci focus i reklama nie klika się dalej. Próbowałem wpisywać w konsoli przeróżne frazy.

Window.focus() 
Object.defineProperty (document, "hidden", {value: false}); 
document .visibilityState == "hidden".

Na podobnej zasadzie działa https://github.com/JDMcKinstry/jQuery.winFocus . 

Comments

Jeśli element HTML zawierający reklamę znajduje się w <iframe>, to zbadaj ten element i w kontekście jego dokumentu w konsoli wpisz:

var __focusedElement = document.activeElement;

window.addEventListener('blur', function() {
    __focusedElement.focus();
}, true); // nasłuchiwanie w fazie capture

lub ewentualnie w ten sposób:

window.addEventListener('focusout', function() {
    _focusedElement.focus();
});

Jeśli nie ma tam <iframe> to wykonaj któryś powyższych skryptów w konsoli w głównym kontekście ("top").

Pewnie nie zadziała, ale nie próbowałem czegoś takiego robić, więc to luźny pomysł. :)

---

Niestety ten pomysł nie działa.

---

Czy przynajmniej jest reakcja na event?

---

Jak to mogę sprawdzić? bo nie jestem pewny. Jeśli chodzi o to czy strona dostaje focus-to nie.bo nic się nie zmienia.

---

Wywołaj alert, albo console.log wewnątrz funkcji, odtwórz problem i sprawdź czy pokazał się alert, albo coś w konsoli.

---

tekst z console.log pojawia się tylko wtedy gdy ręcznie kliknę na stronę. Gdy dalej wchodzę na konsolę-focus z strony ponownie znika.

---

Nie, teraz nie sprawdzaj, czy focus wraca, tylko czy któryś z listenerów łapie zdarzenie utraty focusa - czyli blur lub focusout. Chodzi o to, żebyś w konsoli użył obu skryptów, które podałem w pierwszym komentarzu, następnie zmień kartę przeglądarki (czyli odtwórz problem), potem wróć na stronę i sprawdź, czy w konsoli coś się wypisze - możesz nawet ułożyć osobno dwa okna przeglądarki obok siebie i przełączyć się na drugą widząc jednocześnie konsolę tej pierwszej (testowanej). Tak dla ścisłości, dopisz w obu funkcjach wypisywanie do konsoli (teraz funkcje "próbują" przywrócić focus, ale chcemy dowiedzieć się, czy w ogóle te funkcje się uruchamiają).

Jeśli tak się nie dzieje, to najpierw trzeba ustalić co zrobić, żeby wychwycić moment utraty focusa, a dopiero potem jak go programowalnie przywrócić.

---

zdarzenie wykonuje się dopiero gdy powracam na stronę z innej karty. Wykonuje się wtedy podwójnie. 

kod wyglądał tak. Czyli nic źle nie napisałem. Chyba.

var __focusedElement = document.activeElement;

window.addEventListener('blur', function() {
    __focusedElement.focus();
    console.log("zdarzenie wykonane");
}, true); // nasłuchiwanie w fazie capture

//kolejny
window.addEventListener('focusout', function() {
    __focusedElement.focus();//tu dopisałem jeda podloge na poczatku by dzialalo.
    console.log("zdarzenie wykonane");
});

 

---

Gdy przechodzisz na inną kartę, to reklama zatrzymuje się, ale zdarzenie nie jest łapane dopóki nie wrócisz na stronę? Dopiero wracając na stronę reklama znowu się odtwarza i wtedy w konsoli pokazują się dwa zdarzenia?

Spróbuj teraz w trakcie odtwarzania reklamy kliknąć na nią prawym przyciskiem i z menu kontekstowego wybierz "zbadaj element". Jeśli takie menu nie pojawi się, to użyj skrótu klawiszowego Ctrl + Shift + C lub mając otwarte DevToolsy kliknij w ikonkę kursora myszki w kwadracie (znajduje się w lewym górnym rogu DevToolsów), najedź myszką na reklamę i kliknij w nią. W inspektorze powinien podświetlić się element <video>. Teraz uruchom w konsoli ten skrypt:

$0.addEventListener('pause', function(pauseEvent) { // $0 to referencja do aktualnie klikniętego elementu w inspektorze, czyli powinno być <video>
    console.log('Video pause event:', pauseEvent);
});

window.addEventListener('blur', function(blurEvent) {
    console.log('Blur event:', blurEvent);
}, true);

window.addEvenListener('focusout', function(focusOut) {
    console.log('Focus out event:', focusOut);
});

Następnie zmień kartę - reklama zatrzyma się. W konsoli powinien pokazać się przynajmniej pause event. Rozwiń go i jego property path. Zrób screena i pokaż go. Czy pozostałe eventy są logowane do konsoli?

---

Po wykonaniu powyższych instrukcji spróbuj jeszcze w ten sposób. Odśwież stronę. Zbadaj element reklamy, tak jak opisałem wcześniej. W konsoli wykonaj ten skrypt:

$0.addEventListener('pause', function(pauseEvent) { // $0 to musi być <video>
    pauseEvent.target.play().catch(e => console.log('Promise play exception:', e));
});

Jeśli odtwarzanie reklamy po przejściu do innej karty nie wznowi się samoczynnie, to w konsoli może pokazać się złapany wyjątek - pokaż go.

---

Odpowiedzi na Twoje pytania:
"Gdy przechodzisz na inną kartę, to reklama zatrzymuje się, ale zdarzenie nie jest łapane dopóki nie wrócisz na stronę? Dopiero wracając na stronę reklama znowu się odtwarza i wtedy w konsoli pokazują się dwa zdarzenia?"-tak i tak.

ale zauważyłem ciekawą rzecz a mianowicie jeśli w menu kontekstowym w Elementach (prawy przycisk myszy na jakimkolwiek elemecie) kliknę focus na elemencie zbadanym-to strona dostaje focus. Ale to daje ten sam efekt co kliknięcie w okno przeglądarki. Bo wejście wtedy w konsole lub przełączenie na inną kartę powoduje utratę focusa.

a przy drugim skrypcie pokazuje się tylko wartość undefined i przy zmianie kart nic się nie pokazuje. 

---

Hmm... ciekawy przypadek. :) Mógłbyś podesłać mi bezpośredniego linka do którejś z tych reklam, żebym mógł to przetestować (może być przez PW)? Kończą mi się pomysły, ale myślę że przeklikanie tego samemu szybciej mi pójdzie niż taka zdalna pomoc.

---

Po wielu męczarniach JSHolic znowu zwyciężył wstawiając linijkę kodu: 
 

document.hasFocus = () => true;

Linijka ta oszukuje focusa tak jakby go przywracając o co mi chodziło.

Answer 1

Dla potomnych - strona w sekundowym interwale sprawdzała, czy nadal ma focus za pomocą metody document.hasFocus. Prostym i skutecznym rozwiązaniem okazało się nadpisanie tej metody, aby zawsze zwracała wartość true.