Question

是否可以检测当前浏览器中打开了多少个网站标签？问题是限制多个数据操作同步。

我刚刚找到了如何检测当前标签：隐藏与否：

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
    document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
    document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
    document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
    document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  //console.log(this[hidden] ? "hidden" : "visible");
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

但总用户工作流程怎么样？是否有任何lib可以帮助检测，有多少标签是关闭的，并为它们定义“主要标签”？

COMMENT

用户可以在Web浏览器中编辑数据库。为了防止不同选项卡的异步行为，我想禁止在不同的选项卡中编辑数据库。即， 1.我想定义用户操纵数据库的“主要标签”。 2.如果用户打开新标签页，该网站会说：“我已经在另一个标签页中打开了我的网站，请关闭当前标签页等。”

Answer 1

这是我必须在网站上实施的一个简化版本，因为后端代码的设计很差。因此，在我们修复后端之前，我们已经设置了这样的函数，以避免在两个不同的选项卡中创建相同类型的新记录可能以奇怪的方式对数据进行交叉调整的问题。

var pageInterlock = (function () {
    var store = window.localStorage,
        storeKey = false, // we actually have logic to set this to specific values depending on which page the user is on. it remains false to indicate no locking required
        unlock = function () {
            try {
                store.removeItem(storeKey);
            }
            catch (e) {
            }
            return true;
        },
        lock = function () {
            store.setItem(storeKey, JSON.stringify({ locked: new Date() }));
            window.addEventListener('unload', unlock);
            return true;
        },
        tryLock = function () {
            var lck = store.getItem(storeKey);
            if (lck === null) {
                return lock();
            }
            return JSON.parse(lck);
        },
        init = function () {
            var lockedOnDate,
                lockData;
            if (storeKey) { //you can put conditions here, for example in our system, we only prevent multiple tabs in "create" mode
                lockData = tryLock();
                if (lockData !== true) { // lock exists
                    lockedOnDate = new Date(lockData.locked);
                    lockedOnDate.setMinutes(lockedOnDate.getMinutes() + 1); // first minute will never be considered stale
                    if (+lockedOnDate > Date.now()) { // using the above lockedOnDate, you can force close if, say, the other page got the lock less than 1 minute ago, otherwise do a conditional close
                        // forcibly close the window if you can, or redirect to a safe page
                    }
                    else {
                        // in case there's a stale lock, prompt the user, close/redirect the window if the user chooses appropriately
                    }
                }
            }
        };
    return {
        init: init // this gets called on page loaded event
    };
} ());
window.addEventListener('load', pageInterlock.init); // initialise the interlock

请注意，这使用window.localStorage，因此，仅使用IE8或更高版本

你可能用饼干来做这件事，我不确定，从来没有考虑过它们

如何检测我的域的标签数量？

1 个答案: