17

2 つのブラウザー タブが既に開いているかどうかを確認または確認する方法と、それらのタブが開いている場合、ユーザーは、ピュア/ネイティブ JavaScript で、「URL は既に開いています」という警告ボックスまたはメッセージ ボックスを受け取りますか? このブラウザ タブには外部の Web サイトが含まれており、それを操作または変更する権限がありません。ありがとう

URL の例

yahoo.com and google.com

yahoo.com と google.com のタブが既に開いている場合にユーザーに警告したい

そして、次のように tabCreate を使用して URL を開きたいと思います。

tabCreate("http://maps.google.com/", "tabMapsPermanentAddress");
mean to open a new tab, it is use in creating chrome extension
4

5 に答える 5

11

次のようなものを使用できます

<!-- HTML -->
<a id="opener">Open window</a>

// JavaScript
var a = document.getElementById('opener'), w;        
a.onclick = function() {
  if (!w || w.closed) {
    w = window.open("https://www.google.com","_blank","menubar = 0, scrollbars = 0");
  } else {
    console.log('window is already opened');
  }
  w.focus();
};

ワーキングjsBin | window.open メソッドの詳細

複数のウィンドウを制御したい場合は、以下のスニペットを使用してください

<!-- HTML -->
<a href="https://www.google.com" class="opener">Open google.com</a> | 
<a href="http://www.yahoo.com" class="opener">Open yahoo.com</a> 

//JavaScript
window.onload = function(){
  var a = document.querySelectorAll('.opener'), w = [], url, random, i;
  for(i = 0; i < a.length; i++){
    (function(i){
      a[i].onclick = function(e) {
        if (!w[i] || w[i].closed) {
          url = this.href;
          random = Math.floor((Math.random() * 100) + 1); 
          w[i] = window.open(url, "_blank", random, "menubar = 0, scrollbars = 0");
        } else {
          console.log('window ' + url + ' is already opened');
        }
        e.preventDefault();
        w[i].focus();
      };
    })(i);
  }
};

ワーキングjsBin

別のウィンドウにロードしたくない場合は、この行を除外してください

random = Math.floor((Math.random()*100)+1);

random次の行から参照を削除します

w[i] = window.open(url, "_blank", random, "menubar=0,scrollbars=0");

補足: 上記のように、サードパーティのコンテンツを含む 2 つのウィンドウを作成しました。それらから（親/オープナーウィンドウへの）参照を取得する方法がないことを知っておく必要があります。

于 2014-09-04T10:08:56.287 に答える
4

Casey Chu による回答は、ページを開いた状態でブラウザがクラッシュするまで問題なく機能します。次回の実行では、localStorageオブジェクトはtabCountゼロ以外の値で初期化されます。したがって、値をセッション Cookie に保存することをお勧めします。ブラウザが正常に終了すると、セッション Cookie は削除されます。ブラウザーがクラッシュした場合、セッション Cookie は実際には保存されますが、幸いなことに、ブラウザーを次に実行するまでの間だけです。

オブジェクトsessionStorageはタブごとに異なるため、タブ数の共有には使用できません。

これは、 js-cookieライブラリを使用した改善されたソリューションです。

if (+Cookies.get('tabs') > 0)
    alert('Already open!');
else
    Cookies.set('tabs', 0);

Cookies.set('tabs', +Cookies.get('tabs') + 1);

window.onunload = function () {
        Cookies.set('tabs', +Cookies.get('tabs') - 1);
};
于 2016-05-13T12:08:19.130 に答える
0

私はそれのようなものがあればいいのにと思うので、ここにこれを投げるつもりです. あなたがそれを望むものを作ってください。

Cookie を必要とせず、React フックとして機能し、ブラウザがクラッシュするかどうかに関係なく機能するアクティブなタブであるかどうかを確認するためのソリューションが必要なuseIsActiveTab場合は、最新の場合に true を返すこの webhook を使用できます。アクティブなタブ/ウィンドウ。を使用して、自分自身をアクティブなタブとして設定することもできますactivateTab。

import { useEffect, useState } from 'react';

const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const CHARACTERS_LENGTH = CHARACTERS.length;

function generateTabId() {
  let result = '';
  const prefix = 'TAB_';
  const length = 15;
  for (let i = 0; i < length - prefix.length; i++) {
    result += CHARACTERS.charAt(Math.floor(Math.random() * CHARACTERS_LENGTH));
  }
  if (prefix.includes('_')) {
    return `${prefix}${result}`;
  }
  return `${prefix}_${result}`;
};

const tabId = generateTabId();

export function activateTab(): void {
  localStorage.setItem('activeTab', tabId);
  const event = new Event('thisStorage');
  window.dispatchEvent(event);
}

export function useIsActiveTab(): boolean {
  const [isActiveTab, setIsActiveTab] = useState(false);
  useEffect(() => {
    setActiveTab();
    function updateIsActiveTab() {
      setIsActiveTab(checkIfActiveTab());
    }
    window.addEventListener('storage', updateIsActiveTab);
    window.addEventListener('thisStorage', updateIsActiveTab);
    updateIsActiveTab();
    return () => {
      window.removeEventListener('storage', updateIsActiveTab);
      window.removeEventListener('thisStorage', updateIsActiveTab);
    };
  }, []);
  return isActiveTab;
}

function checkIfActiveTab(): boolean {
  const activeTab = localStorage.getItem('activeTab');
  if (!activeTab) {
    console.error('localStorage.activeTab is not set');
    return true;
  }
  if (activeTab === tabId) {
    return true;
  }
  return false;
}

function setActiveTab(): void {
  localStorage.setItem('activeTab', tabId);
}
于 2021-02-03T06:20:06.030 に答える
0

この回答: https://stackoverflow.com/a/28230846は、Cookies/js-cookie ライブラリを必要としない代替手段です。それは私のニーズにより適していました。一言で言えば（完全な説明については、リンクされた回答を参照してください）：

$(window).on('storage', message_receive);

...

// use local storage for messaging. Set message in local storage and clear it right away
// This is a safe way how to communicate with other tabs while not leaving any traces
//
function message_broadcast(message)
{
    localStorage.setItem('message',JSON.stringify(message));
    localStorage.removeItem('message');
}


// receive message
//
function message_receive(ev)
{
    if (ev.originalEvent.key!='message') return; // ignore other keys
    var message=JSON.parse(ev.originalEvent.newValue);
    if (!message) return; // ignore empty msg or msg reset

    // here you act on messages.
    // you can send objects like { 'command': 'doit', 'data': 'abcd' }
    if (message.command == 'doit') alert(message.data);

    // etc.
}
于 2018-06-08T14:23:11.980 に答える