Я розвиваю потік аутентифікації OAuth виключно в JavaScript, і хочу показати користувачеві вікно "надання доступу" у спливаючому віці, але воно блокується.

Як я можу запобігти блокуванню спливаючих вікон, створених або блокуючими спливаючих вікон різних браузерів, window.openабо window.showModalDialogблокувати їх?

Загальне правило полягає в тому, що блокатори спливаючих вікон будуть включатись, якщо виклик того window.openчи іншого схожого з JavaScript, який не викликається прямими діями користувача . Тобто ви можете зателефонувати window.openу відповідь на натискання кнопки, не потрапляючи на блокувальник спливаючих вікон, але якщо ви введете той самий код у події таймера, він буде заблокований. Глибина ланцюга викликів також є фактором - деякі старі веб-переглядачі дивляться лише на негайного абонента, новіші браузери можуть трохи відхилитись, щоб побачити, чи викликав абонент клацання миші і т. Д. Тримайте його так дрібно, як можна, щоб уникнути блокаторів спливаючих вікон.

На основі Jason Sebring «S дуже корисну пораду , і на речі , покриті тут і там , я знайшов ідеальне рішення для мого випадку:

Псевдо-код із фрагментами Javascript:

1. негайно створити порожнє спливаюче вікно про дії користувача

   var importantStuff = window.open('', '_blank');

   Необов’язково: додайте кілька інформаційних повідомлень про "очікування". Приклади:

   а) Зовнішня HTML-сторінка: замініть вищевказаний рядок на

   var importantStuff = window.open('http://example.com/waiting.html', '_blank');

   б) Текст: додайте наступний рядок нижче зазначеного вище:

   importantStuff.document.write('Loading preview...');

2. заповніть його вмістом, коли буде готовий (наприклад, коли дзвінок AJAX повернеться, наприклад)

   importantStuff.location.href = 'http://shrib.com';

Збагатіть дзвінок window.openбудь-якими додатковими опціями, які вам потрібні.

Я фактично використовую це рішення для перенаправлення пошти, і воно працює у всіх моїх браузерах (Windows 7, Android). _blankБіт допомагає для MAILTO Перенаправлення для роботи на мобільних пристроях, до речі.

Ваш досвід? Будь-який спосіб покращити це?

Крім того, швейцарський пост Mister, в моєму випадку window.open був запущений всередині обіцянки, яка включила блокувальник спливаючих вікон, моє рішення було: у angular:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateTabLocation(res.url, myNewTab);

    }
  );
};

Служба браузера:

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

ось так можна відкрити нову вкладку, використовуючи відповідь на обіцянку, а не викликаючи блокувальник спливаючих вікон.

Як хороша практика, я думаю, що це гарна ідея перевірити, чи не було заблоковано спливаюче вікно, і вжити заходів у випадку. Потрібно знати, що window.open має повернене значення, і це значення може бути нульовим, якщо дія не вдалася. Наприклад, у наступному коді:

function pop(url,w,h) {
    n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
    if(n==null) {
        return true;
    }
    return false;
}

якщо спливаюче вікно заблоковано, window.open поверне нульове значення. Так функція поверне помилкову.

Як приклад, уявіть виклик цієї функції безпосередньо з будь-якого посилання на target="_blank": якщо спливаюче вікно буде успішно відкрито, повернення falseзаблокує дію посилання, інакше, якщо спливаюче вікно заблоковано, повернення trueдозволить поведінці за замовчуванням (відкрити нове вікно _blank) та продовжити .

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

Таким чином у вас буде спливаюче вікно, якщо воно працює, і вікно _ порожнє, якщо ні.

Якщо спливаюче вікно не відкриється, ви можете:

• відкрийте порожнє вікно, як у прикладі, і продовжуйте роботу
• відкрити підроблене спливаюче вікно (кадр всередині сторінки)
• Повідомте користувача ("будь ласка, дозвольте спливаючі вікна для цього сайту")
• відкрити порожнє вікно, а потім повідомити користувача тощо.

від API oauth JavaScript від Google:

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

Дивіться область, де він читає:

Налаштування автентифікації

Клієнтська реалізація OAuth 2.0 використовує спливаюче вікно, щоб спонукати користувача до входу та затвердження програми. Перший виклик gapi.auth.authorize може викликати блокуючі спливаючих вікон, оскільки він відкриває спливаюче вікно побічно. Щоб запобігти запуску блокувальника спливаючих вікон під автентичні дзвінки, зателефонуйте gapi.auth.init (зворотний дзвінок), коли клієнт завантажується. Поданий зворотний дзвінок буде виконаний, коли бібліотека готова робити автоматичні дзвінки.

Я б здогадався, що це стосується реальної відповіді вище в тому, як вона пояснює, якщо є негайна відповідь, це не вимкне спливаючу тривогу. "Gapi.auth.init" робить це так, що api відбувається негайно.

Практичне застосування

Я зробив мікросервіс аутентифікації з відкритим кодом, використовуючи паспорт вузла на npm та різні пакети паспортів для кожного постачальника. Я використовував стандартний підхід до перенаправлення до третьої сторони, надаючи йому URL-адресу переадресації, щоб повернутися. Це було програмно, тому я міг мати різні місця для переадресації назад при вході / реєстрації та на певних сторінках.

github.com/sebringj/athu

passportjs.org

Я спробував декілька рішень, але його єдине, що насправді працювало на мене у всіх браузерах

let newTab = window.open(); newTab.location.href = url;

Я не хотів створювати нову сторінку, якщо зворотний виклик не повернувся успішно, тому я зробив це для імітації натискання користувача:

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement('a');
      a.href = redirect;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}

Найпростіший спосіб позбутися цього:

1. Не використовуйте document.open ().
2. Замість цього використовуйте this.document.location.href = location; де місце - це URL-адреса для завантаження

Наприклад:

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl('company_page.jsp')">Abc</div>

Це дуже добре працювало для мене. Ура