angularjs: интерфейс главной страницы заблокирован при загрузке второй страницы, которая открывается в новой вкладке

Question

Идея состоит в том, чтобы добавить ctrl + click функциональность в строку таблицы <tr>. Когда пользователь нажимает на строку таблицы, удерживая кнопку ctrl, он открывает страницу сведений в новой вкладке.

Это шаблон строки таблицы:

 <tr class="clickable-row" ng-repeat="row in books track by row.id" ng-click="testCtrl.navigate($event, row.id)">

Это ng-click функция:

function navigate($event, rowId) {
  const url = `/books/${rowId}`;
  // on ctrl||cmd + click open details in new tab
  if ($event.ctrlKey || $event.metaKey) {
    $window.open(url, '_blank');
    return;
  }
 $location.path(url);
}

Проблема : когда я открываю представление сведений в новой вкладке, он блокирует пользовательский интерфейс главной страницы, в то время как представление сведений загружается в новую вкладку.

Только что создал небольшую тестовую скрипку с простым JavaScript, и она работает нормально, когда вы нажимаете кнопку «Открыть новую вкладку», удерживая клавишу ctrl, она открывает новую вкладку с той же страницей, и в то же время вы можете снова нажать на эта кнопка и она не заблокирована.

Вот js-скрипка

Насколько я понимаю, могут быть проблемы с AngularJS и загрузкой того же домена в новую вкладку. Протестировал этот же случай с $window.open('https://www.google.lv/', '_blank');, и в этот раз он не блокирует интерфейс основных страниц. Какое решение?

Answer 1

Проблема была в том, что обе вкладки работали с одним и тем же процессом и вызывали блокировку пользовательского интерфейса.

Нашел решение для этого.

Добавление атрибута rel = "noopener" не позволяет новой странице получить доступ к свойству window.opener и гарантирует, что она запускается в отдельном процессе.

function navigate($event, rowId) {
  const url = `/books/${rowId}`;
  // on ctrl||cmd + click open details in new tab
  if ($event.ctrlKey || $event.metaKey) {
    const link = $document[0].createElement('a');
    $document[0].body.appendChild(link);
    link.setAttribute('type', 'hidden');
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'noopener');
    link.setAttribute('href', url);
    link.click();
    link.remove();
    return;
  }
 $location.path(url);
}

Работа в основных браузерах, кроме Safari.