Как узнать, открыта ли вкладка браузера с помощью Javascript?
Как узнать или проверить, открыты ли две вкладки браузера и открываются ли эти вкладки, пользователь получит окно оповещения или поле msg, в котором говорится, что "URL уже открыт", что-то вроде этого, в чистом/родной JavaScript? Эта вкладка браузера содержит внешний веб-сайт, у которого нет никаких прав на его манипулирование или изменение. Благодаря
Примеры 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
Ответы
Ответ 1
Вы можете использовать что-то вроде следующего
<!-- 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
Одна основная идея заключается в том, чтобы хранить счетчик вкладок в cookie или localStorage
, увеличивая его на загрузку страницы и уменьшая его на странице разгрузки:
if (+localStorage.tabCount > 0)
alert('Already open!');
else
localStorage.tabCount = 0;
localStorage.tabCount = +localStorage.tabCount + 1;
window.onunload = function () {
localStorage.tabCount = +localStorage.tabCount - 1;
};
Попробуйте открыть эту скрипту на нескольких вкладках.
Обратите внимание, что этот метод довольно хрупкий. Например, если по какой-то причине браузер выйдет из строя, обработчик выгрузки не будет запущен, и он выйдет из строя.
Ответ 3
Ответ Кейси Чу работает нормально, пока браузер не завершится с открытой страницей. При любом следующем выполнении объект localStorage
будет инициализирован tabCount
с ненулевым значением. Поэтому лучшим решением является сохранение значения в 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);
};