angularjs：加載第二頁打開到新選項卡時，主頁的UI被阻止

Question

想法是向表行<tr>添加ctrl + click功能。 當用戶在按住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');測試了相同的情況$window.open('https://www.google.lv/', '_blank'); 而且這次並沒有阻止主頁UI。 解決辦法是什么？

Answer 1

問題是因為兩個選項卡都使用相同的進程運行，並且導致UI阻塞。

找到了解決方案。

添加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以外的主要瀏覽器上運行。