Задать вопрос
@sozdatelxd
Программист с вопросом -зачем он выбрал этот путь

Как обойти блокировку всплывающих окон в браузерах при использовании Angular.js ng-click?

Задача вот в чем: имеются кнопки авторизации через социальные сети. По нажатию на них должно открыться новое окно (popup) и там выполнить авторизацию.
Проект использует TypeScript.

Схема действий такая :
<div class="social" ng-init="loadAuthProviders()">
            <div class="providers">
                <h3>{{'Login.Social.Title' | t:'Social Login'}}</h3>
                <p class="lead">{{'Login.Social.Description' | t:'Choose your social login'}}</p>
                <loader hide-on="authProviders">{{'Login.Social.Loading' | t:'Loading the social login options'}}</loader>
                <div class="providers-list text-xs-center" ng-show="authProviders">
                    <b><a ng-repeat="provider in authProviders" href="" class="provider" ng-click="login(provider)" onclick=""  ></b>
                        <img img-src="/img/social/{{provider | lowercase}}.png" fallback-src="/img/social/default.png" alt="{{provider}}" title="{{provider}}">
                    </a>
                </div>
            </div>
        </div>


вот есть строчка ng-click="login(provider)" - она вызывает функцию, которая начинает процесс создания ссылки на сайт авторизации по выбранному провайдеру, например 'Google' ( эта страница будет открыта в popup ). Но вот браузеры блокируют всплывающие окна (понятно почему). Я читал про то, чтобы обойти эту проблему, необходимо явно задать открытие popup'a (через onclick() например).
Но мне необходимо найти способ сделать это используя ng-click (или чем-то подобным)

Ниже указана функция, которая "делает" сам popup
Popup.PopupCenter = function (url, title, width, height) {
          var left = (screen.width / 2) - (width / 2);
          var top = (screen.height / 2) - (height / 2);
          

          var popup = window.open(url, title,
              'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes,' +
                  ' resizable=yes, copyhistory=no, ' +
                  'width=' + width + ', height=' + height + ', top=' + top + ', left=' + left);

          if (!BWL.Services.Popup.IsPopupClosed(popup)) {
              popup.focus();
          }

          return popup;
      };


И вот собственно вызов popup после формирования ссылки (profile.AuthURL)
if (isFramed) {
var popup = BWL.Services.Popup.PopupCenter(profile.AuthURL, 'AuthWindow', 500, 500);
} else {
 this.$window.location.href = profile.AuthURL;
}


Заранее спасибо!
  • Вопрос задан
  • 5700 просмотров
Подписаться 5 Оценить 4 комментария
Решения вопроса 1
maxaon
@maxaon
Посмотрел код директивы. Он нигде не прерывается. Вероятнее всего, вы прерываете поток выполнение обработчика.
Для того чтобы браузер воспринял popup как легитимный, выполнение обработчика не должно быть прервано(например запросом на сервер или таймаутом).
Демо jsbin.com/voxafizu/5
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы