需要在 javascript 中为选项卡窗口和 Internet Explorer 中的新窗口提供唯一 ID [重复]

Posted 2023-02-21

【中文标题】需要在 javascript 中为选项卡窗口和 Internet Explorer 中的新窗口提供唯一 ID [重复]

【英文标题】：Need a Unique ID in javascript for tab windows and for new windows in Internet Explorer [duplicate]

【发布时间】：2011-04-05 22:59:09

【问题描述】：

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

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

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

【问题讨论】：

您的代码在哪里运行？如果您的代码作为 IE 插件运行，则 ProcessID+ThreadID 可能会起作用。

代码在 Internet Explorer 6、7 或 8 的 javascript 中运行。我不能为此使用 IE 插件

这个问题不是链接答案的重复。这个问题显然是在询问将唯一标识符链接到 IE 中的选项卡窗口。这不是关于如何创建 GUID 的问题（尽管这可能是答案的一部分）。

【参考方案1】：

我正在为 ASP.Net 框架（WebForms 和 MVC 风格）定制一个 Session 类。

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

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

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

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

---

UIGUID.js

---

已编辑：原始版本在windowLoadSetGUIDOnForms 处为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 ------------------------------------------------

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

---

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

---

<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>

【讨论】：

啊！不得不说这适用于任何当前的浏览器... :-)

那里的任何人都可以将其转换为 JQuery 吗？！？！？！