在 javascript 中需要一个唯一 ID 用于标签窗口和 Internet Explorer 中的新窗口

Need a Unique ID in javascript for tab windows and for new windows in Internet Explorer

提问by mrjohn

Need a simple approach to get a Unique ID in javascript for tab windows in Internet Explorer. I basically was wondering if there is something like document.tab.indexnumber, which there is not. So the real question is if there is anything that can be used to generated this or find out what tab you are in ? Similarly I should be able to get another unique id for another instance of internet explorer ?
I cannot use an IE addon for this.

需要一种简单的方法来在 javascript 中为 Internet Explorer 中的选项卡窗口获取唯一 ID。我基本上想知道是否有类似 document.tab.indexnumber 的东西，但没有。所以真正的问题是是否有任何东西可以用来生成这个或找出你在哪个选项卡中？同样，我应该能够为 Internet Explorer 的另一个实例获得另一个唯一 id 吗？
我不能为此使用 IE 插件。

An additional complication is that we could use a random number generator plus timestamp for a unique id as suggested below in one of the answers. But how can I keep this same number across the same session for that tab. If I store it in a session variable it is shared between all tabs/windows with that session.

另一个复杂问题是，我们可以使用随机数生成器和时间戳作为唯一 ID，如下面的一个答案中所建议的那样。但是如何在该选项卡的同一会话中保持相同的数字。如果我将它存储在会话变量中，它将在该会话的所有选项卡/窗口之间共享。

We could put the id in the url or a hidden field, but that solution would be to intrusive to the design of the site. Looking for something less intrusive.

我们可以将 id 放在 url 或隐藏字段中，但这种解决方案会干扰站点的设计。寻找不那么侵入性的东西。

回答by Marcus Vinicius Pompeu

I'm working in a custom Session class for the ASP.Net framework (both WebForms and MVC flavors).

我在 ASP.Net 框架（WebForms 和 MVC 风格）的自定义会话类中工作。

Although very old, this question is very pertinent and I could not find any other addressing the problem given.

虽然很老，但这个问题非常相关，我找不到任何其他解决问题的方法。

Hence, I share the solution I coded to ensure a unique and persistent GUID for each window and/or tab, kept static and secured no matter how hard one refreshes, navigates outside the site and returns, cleans the cache, etc.

因此，我分享了我编码的解决方案，以确保每个窗口和/或选项卡的唯一且持久的 GUID，无论刷新、导航到站点外并返回、清理缓存等多么困难，都保持静态和安全。

The magic involves window.nameand is implemented by the JavaScript code below. The bootstrap is based on jQuery, but easily portable to jQuery-less solutions.

魔术涉及window.name并由下面的 JavaScript 代码实现。引导程序基于 jQuery，但可以轻松移植到无 jQuery 的解决方案。

Notice that this GUID is automatically appended to any existing form's providing server-side references.

请注意，此 GUID 会自动附加到任何现有form的提供服务器端引用的 。

---

---

UIGUID.js

UIGUID.js

---

---

Edited:the original version presented an error at windowLoadSetGUIDOnFormsfor formList.length == 1

已编辑：原始版本在windowLoadSetGUIDOnFormsfor处出现错误formList.length == 1

//------------------------------------------------------------------------------
//-- guarantees that window.name is a GUID, and that it would
//-- be preserved whilst window life cicle
//--
//-- for frames and iframes, the outermost window determines the GUID
//--
//-- for every form it will be appended a hidden element of id
//-- "this.window.GUID" for server-side references
//------------------------------------------------------------------------------
//-- window.name will be set to "GUID-<A_GUID>"
//------------------------------------------------------------------------------

//------------------------------------------------------------------------------
//-- Retrieves window GUID, initializing it if necessary -----------------------
//------------------------------------------------------------------------------

function getWindowGUID() {
    //----------------------------------
    var windowGUID = function () {
        //----------
        var S4 = function () {
            return (
                    Math.floor(
                            Math.random() * 0x10000 /* 65536 */
                        ).toString(16)
                );
        };
        //----------

        return (
                S4() + S4() + "-" +
                S4() + "-" +
                S4() + "-" +
                S4() + "-" +
                S4() + S4() + S4()
            );
    };
    //----------------------------------

    //-- traverses up in the hierarchy for the outermost window ----------------

    var topMostWindow = window;

    while (topMostWindow != topMostWindow.parent) {
        topMostWindow = topMostWindow.parent;
    }

    //-- initialize GUID if needed ---------------------------------------------

    if (!topMostWindow.name.match(/^GUID-/)) {
        topMostWindow.name = "GUID-" + windowGUID();
    }

    //-- return GUID -----------------------------------------------------------

    return topMostWindow.name;
} //-- getWindowGUID -----------------------------------------------------------

//------------------------------------------------------------------------------
//-- Append via jQuery handlers for windowLoad ---------------------------------
//------------------------------------------------------------------------------

$(window).load(
    function () {
        windowLoadSetGUID();
        windowLoadSetGUIDOnForms();
    }
) //----------------------------------------------------------------------------

function windowLoadSetGUID() {
    var dummy = getWindowGUID();
} //-- windowLoadSetGUID -------------------------------------------------------

function windowLoadSetGUIDOnForms() {
    var formList = $('form');
    var hidGUID = document.createElement("input");

    hidGUID.setAttribute("type", "hidden");
    hidGUID.setAttribute("name", "this.window.GUID");
    hidGUID.setAttribute("value", getWindowGUID());

    if (formList.length == 1) {
        formList.append(hidGUID);
    }
    else {
        for (var i = 0; i < formList.length; ++i) {
            formList[i].append(hidGUID);
        }
    }
} //-- windowLoadSetGUIDOnForms ------------------------------------------------

As POC, I devised two HTML scripts demonstrating the uniqueness even at child elements in frames or iFrames

作为 POC，我设计了两个 HTML 脚本，即使在框架或 iFrame 中的子元素中也能展示其独特性

---

---

GUIDTest.html

GUIDTest.html

---

---

<html>
  <head>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script language="javascript" type="text/javascript" src="UIGUID.js"></script>
  </head>
  <body onLoad="alert('Main document: ' + getWindowGUID());">
    <iframe id="frame001" src="GUIDFrame.html"></iframe>
    <iframe id="frame002" src="GUIDFrame.html"></iframe>
  </body>
</html>

---

---

GUIDFrame.html

GUIDFrame.html

---

---

<html>
  <head>
    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script language="javascript" type="text/javascript" src="UIGUID.js"></script>
  </head>
  <body onLoad="alert('iFrame: ' + getWindowGUID());" />
</html>