Chcę wyświetlać okno dialogowe JQuery warunkowo po kliknięciu hiperłącza.
Mam wymaganie takie jak warunek1, aby otworzyć okno dialogowe JQuery, a jeśli warunek1 nie jest spełniony, przejdź do strony, do której odwołuje się tag „href”, którego zdarzenie kliknięcia dotyczy.
Jestem w stanie wywołać funkcję w przypadku kliknięcia linku. Ta funkcja sprawdza teraz wspomniany stan, wykonując inny adres URL (który wykonuje mój kontroler Spring i zwraca odpowiedź).
Wszystko działa idealnie, tylko window.open jest blokowane przez blokowanie wyskakujących okienek.
$('a[href*=/viewpage?number]').live('click', function(e) {
e.preventDefault();
redirectionURL = this.href;
pageId= getUrlVars(redirectionURL)["number"];
$.getJSON("redirect/" + pageId, {}, function(status) {
if (status == null) {
alert("Error in verifying the status.");
} else if(!status) {
$("#agreement").dialog("open");
} else {
window.open(redirectionURL);
}
});
});
Jeśli e.preventDefault();
usunę z kodu, bloker popoup nie blokuje strony, jednak dla warunku1 otwiera okno dialogowe, a także otwiera stronę „href”.
Jeśli rozwiążę jedno, stwarza to problem dla innego. Nie jestem w stanie oddać sprawiedliwości obu warunkom jednocześnie.
Czy możesz mi pomóc rozwiązać ten problem?
Kiedy to zostanie rozwiązane, mam inny problem do rozwiązania, np. Nawigację po zdarzeniu OK dialogu :)
Odpowiedzi:
Blokowanie wyskakujących okienek zazwyczaj zezwala tylko
window.open
wtedy, gdy jest używane podczas przetwarzania zdarzenia użytkownika (np. Kliknięcia). W twoim przypadku dzwoniszwindow.open
później , a nie podczas zdarzenia, ponieważ$.getJSON
jest asynchroniczny.Masz dwie możliwości:
Zrób coś innego, zamiast
window.open
.Spraw, aby wywołanie AJAX było synchroniczne, czego normalnie powinieneś unikać jak plagi, ponieważ blokuje to interfejs użytkownika przeglądarki.
$.getJSON
jest równa:... więc możesz
$.getJSON
zsynchronizować połączenie, mapując parametry do powyższych i dodającasync: false
:Ponownie, nie zalecam synchronicznych wywołań Ajax, jeśli możesz znaleźć inny sposób osiągnięcia swojego celu. Ale jeśli nie możesz, proszę.
Oto przykład kodu, który nie przeszedł testu z powodu wywołania asynchronicznego:
Przykład na żywo | Źródło na żywo(linki na żywo nie działają z powodu zmian w JSBin)A oto przykład, który działa, używając połączenia synchronicznego:
Przykład na żywo | Źródło na żywo(linki na żywo nie działają z powodu zmian w JSBin)źródło
możesz wywołać window.open bez blokowania przeglądarki tylko wtedy, gdy użytkownik wykona bezpośrednio jakąś akcję. Przeglądarka wysyła jakąś flagę i określa, że okno zostało otwarte przez działanie użytkownika.
Możesz więc wypróbować ten scenariusz:
źródło
myWindow.postMessage
), Ale z powodu ograniczenia Safaris dotyczącego nie wykonywania JavaScript w tle, okno nadrzędne nigdy nie może wysłać zmiany lokalizacji.Miałem ten problem i nie miałem gotowego adresu URL, dopóki oddzwonienie nie zwróci niektórych danych. Rozwiązaniem było otwarcie pustego okna przed uruchomieniem wywołania zwrotnego, a następnie po prostu ustawienie lokalizacji, w której wywołanie zwrotne powróci.
źródło
action().then(doWindowOpenThing).catch(doSomethingElseThatDoesntOpenAPopup)
Więc nie mogę otworzyć okna wcześniej (aby zachować jego odniesienie itp.), Jeśli później nie będę go używać, prawda?spróbuj tego, to działa dla mnie,
Jest skrzypkiem dla tego http://jsfiddle.net/safeeronline/70kdacL4/1/
źródło
Okna muszą być tworzone na tym samym stosie (czyli mikrozadaniu ), co zdarzenie inicjowane przez użytkownika, np . Wywołanie zwrotne kliknięcia - aby nie można było ich później utworzyć asynchronicznie.
Możesz jednak utworzyć okno bez adresu URL, a następnie zmienić adres URL tego okna, gdy już je znasz , nawet asynchronicznie!
Nowoczesne przeglądarki otworzą okno z pustą stroną (często nazywaną
about:blank
), a zakładając, że zadanie asynchroniczne w celu uzyskania adresu URL jest dość szybkie, wynikowy UX jest w większości w porządku. Jeśli zamiast tego chcesz wyświetlić komunikat ładowania (lub cokolwiek) w oknie, podczas gdy użytkownik czeka, możesz użyć identyfikatorów URI danych .źródło
Ten kod mi pomoże. Mam nadzieję, że to pomoże niektórym ludziom
źródło
Spróbuj użyć elementu odsyłacza i kliknij go za pomocą javascriipt
i scenariusz
Użyj tego w ten sposób
źródło
Spostrzeżenie, że zdarzenie musiało zostać zainicjowane przez użytkownika, pomogło mi zrozumieć pierwszą część tego, ale nawet po tym Chrome i Firefox nadal blokowały nowe okno. Druga część polegała na dodaniu target = "_ blank" do linku, o którym była mowa w jednym komentarzu.
Podsumowując: musisz zadzwonić do window.open ze zdarzenia zainicjowanego przez użytkownika, w tym przypadku klikając na link, i ten link musi mieć target = "_ blank".
W poniższym przykładzie link używa class = "button-twitter".
źródło
to działało dla mnie.
źródło
Używam tej metody, aby uniknąć blokowania wyskakujących okienek w moim kodzie React. będzie działać również we wszystkich innych kodach javascript.
Gdy wykonujesz wywołanie asynchroniczne w przypadku zdarzenia kliknięcia, po prostu otwórz najpierw puste okno, a następnie wpisz w nim adres URL później, gdy wywołanie asynchroniczne zostanie zakończone.
w przypadku powodzenia wywołania asynchronicznego napisz co następuje
źródło