javascript에서 동일한 cookie 기반 세션에 있는 브라우저 창을 고유하게 식별하려면 어떻게 해야 합니까?아이디

javascript에서 동일한 cookie 기반 세션에 있는 브라우저 창을 고유하게 식별하려면 어떻게 해야 합니까?아이디

웹 어플리케이션 사용자가 여러 브라우저 창을 열어 같은 페이지를 가리킬 수 있습니다.페이지의 특정 상태(Ajax를 통해 로드)를 포스트백으로 유지하고 싶습니다.쿠키에 저장하거나 서버에 저장할 수 있습니다.어느 쪽이든, 각각의 창을 어떻게 구분할 수 있는지 생각이 나지 않습니다.

예를 들어 사용자 Bob이 List Of Something 페이지에 대해 열려 있는 두 개의 브라우저 창을 가지고 있다고 가정합니다.각 목록에는 Loaded Page Number 속성이 있으며 이를 유지해야 합니다.그렇지 않으면 사용자가 새로 고칠 때 항상 1페이지가 표시됩니다.Bob은 브라우저 창 1을 로드하여 5페이지를 가리킨 다음 브라우저 창 2를 로드하여 14페이지를 가리켰을 수 있습니다.세션 ID를 기반으로 속성을 저장하면 새로 고치면 Bob이 창 1에 페이지 14를 표시합니다.

상태 변수는 이 간단한 예보다 훨씬 더 복잡하며, 이를 지속할 수 없는 경우 큰 문제(앱의 약점)가 발생할 수 있습니다.

브라우저 윈도 아이디 같은 게 필요해요물론 크로스 브라우저 솔루션(IE6+, Wekbit?+, FF2+)이 필요합니다.

좋은 생각 있어요?

관련성 주의: 오래된 폼 기반 페이지를 새로운 AJAX 지원 항목과 혼합하는 경우에도 유용합니다.경우에 따라서는 양식을 포스트백해야 하며 클라이언트 측 상태 값을 놓치고 싶지 않을 수 있습니다.

당신은 당신 자신의 창 이름을 설정할 수 있고, 정확한 구문은 지금 당장은 알 수 없지만, 당신은 현재 시간과 세션 ID를 사용하여 창 로드 시 고유 ID를 생성하고, 그 ID를 사용할 수 있습니다.

이것은 javascript window.open() 함수로 이름을 설정하는 것과 같은 방법으로 이루어집니다(단, 새로운 창이 아닌 셀프 창으로도 가능합니다).

검색 프로그램:

self.window.name = myclass.getUniqueWindowId ( thisSession );

갱신하다

새로고침에서 새로고침으로 저장해야 할 필요성에 대해 몇 가지 테스트를 해봤는데 새로고침에서 새로고침으로 저장되는 것 같습니다.Firefox 3을 사용하여 처음 로드했을 때 창 이름이 비어 있고 CTRL+R을 반복해서 누르면 창 이름이 채워집니다.그런 다음 설정 코멘트를 하고 다시 로드했지만 이름은 그대로 유지되었습니다.

<script type="text/javascript">

    alert( self.window.name );

    self.window.name = "blah";

</script>

갱신하다

jQuery의 'jquery-session' 플러그인에 대한 코멘트를 아래에 기재해야 합니다.이 플러그인은 여기서 설명하는 것보다 훨씬 더 많은 기능을 갖추고 있습니다.

단, 이전 IE 버전에서는 지원되지 않는 HTML5의 웹 스토리지에 의존하고 있다는 점도 명확히 해야 합니다.

기업은 여전히 IE 7(이하 브라질)에 크게 의존하고 있습니다.

에에 based based self.window.nameHTML5에 준거하지 않는 모든 것에 대응하는 솔루션으로서, 크로스 브라우저 솔루션으로서 다음의 코드 스니펫을 제공합니다.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript" type="text/jscript">
    //----------------------------------------------------------------------
    //-- guarantees that window.name is a GUID, and that it would
    //-- be preserved whilst this window's life cicle
    //----------------------------------------------------------------------
    //-- window.name will be set to "GUID-<SOME_RANDOM_GUID>"
    //----------------------------------------------------------------------

    $(window).load(
        function () {
            //----------------------
            var GUID = function () {
                //------------------
                var S4 = function () {
                    return(
                            Math.floor(
                                    Math.random() * 0x10000 /* 65536 */
                                ).toString(16)
                        );
                };
                //------------------

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

            if (!window.name.match(/^GUID-/)) {
                window.name = "GUID-" + GUID();
            }
        }
    ) //--------------------------------------------------------------------
</script>

여기서 GUID 기능을 찾았습니다(코드 정리를 제안했습니다).

HTML5 세션 스토리지를 사용할 수 있습니다.고유한 ID를 생성하여 세션스토리지에 설정하기만 하면 됩니다.각 창 또는 탭에 독자적인 세션스토리지가 있는 것이 장점입니다.예를 들어 다음과 같습니다.

3개의 창에서 다음을 실행하는 경우:

1: § 1:sessionStorage.setItem('key' , 'window1');

2: § 2:sessionStorage.setItem('key' , 'window2');

3: § 3:sessionStorage.setItem('key' , 'window3');

sessionStorage.getItem('key' );<< 이것에 의해, 대응하는 값이 창에 반환됩니다!

1: § 1:sessionStorage.getItem('key' ); 1을 합니다.

2: § 2:sessionStorage.getItem('key' ); 2를 반환합니다.

3: § 3:sessionStorage.getItem('key'); 3 3 3 을 합니다.

변수(탭/윈도별로)를 저장하려고 하는 것 같습니다.

session Storage는 매력적으로 기능합니다.

브라우저가 HTML 5를 지원해야 하는 유일한 문제가 있습니다.

서버가 무작위로 ID를 생성하여 서비스될 때 페이지(일부 Javascript 변수)에 저장하도록 하는 것은 어떻습니까?그럼 그 아이디를 ajax 요청에 포함시켜주세요.브라우저의 갱신에는 도움이 되지 않지만, 유저가 그 페이지를 그대로 두는 한(그리고 ajax의 조작에 맡기는 것만으로) 정상적으로 동작합니다.

오래 전 일이지만 오늘 로이 리코의 답변이 도움이 되어 제 경험을 공유하고 싶습니다.페이지 리프레시 및 페이지 백버튼 사용을 처리하기 위해 다음과 같이 하고 있습니다.

• 서버는 브라우저가 요청과 함께 GUID를 전송하는지 확인합니다(ajax 또는 form submit에서만 작동).
• 브라우저가 없는 경우(브라우저 새로 고침, 백버튼), 작은 JavaScript 스크립트가 포함된 페이지를 다시 보냅니다.이 스크립트는 위에서 설명한 대로 GUID를 생성하여 window.name 스토리지에 저장합니다.그런 다음 스크립트는 GUID를 숨김 필드로 하는 양식을 작성하여 서버에 제출합니다.액션 아트리뷰트는 이전과 동일한 URL을 사용합니다(window.location.href).

--> 서버가 GUID를 인식하고, 필요에 따라서 컨텐츠를 전달할 수 있게 되었습니다.

다음은 내 코드입니다(보안상의 이유로 서버에 작성한 GUID, "${gUid}" 구문은 프리마커에서 가져온 것이며 서버에서 GUID를 삽입하기만 하면 됩니다).

<script>
    $(window).load(
        function () {
            if (!window.name.match(/^GUID-/)) {
                window.name = "GUID-" + "${gUid}";
            }
            $('<form action='+window.location.href+' method="POST"><input type="hidden" name="X-GUID" id="X-GUID" value='+window.name+'></form>').appendTo('body').submit();
        }
    );  
</script>

누군가에게 도움이 되었으면 좋겠다.

덧붙여서, 이 기술은 내용을 취득하기 위해서 JavaScript가 필요하기 때문에, 「NON SEO PAGES」에서만 사용합니다.그러나 일반적으로 SEO 페이지는 탭 세션을 식별할 필요가 없습니다.

물론 요즘은 HTML5 세션 스토리지를 사용할 수 있지만, 잘 작동하기 위해서는 오래된 브라우저도 필요하기 때문에 그것에 의존하고 싶지 않습니다.

실제로 새로운 Web Locks API를 사용하면 실제 내부 창 ID(일명.k.a)를 얻을 수 있습니다.clientId).LockManager.query()는 소유자 ID를 포함한 보류된 잠금에 대한 정보를 제공할 수 있습니다.보안 제한으로 인해 일부 iframe 컨텍스트에서는 작동하지 않을 수 있지만 일반적으로 위쪽 창은 정상입니다.

function getCurrentWindowId() {
    return new Promise((resolve) => {
        let lockName;
        tryGetLock(); // one attempt should almost always be enough

        function tryGetLock() {
            // generate some random lock name
            lockName = 'get-self-id-' + (Math.random() * 0xffffffff >>> 0);
            navigator.locks.request(lockName, { mode: 'exclusive', ifAvailable: true }, withLock);
        }

        function withLock(lock) {
            // unsing setTimeout(0) here to execute client's code after releasing the lock
            if (lock)
                return navigator.locks.query()
                    .then(({ held }) => held.find(lock => lock.name === lockName).clientId)
                    .then(clientId => setTimeout(resolve, 0, clientId));
            else {
                // unlucky - just try another lock
                setTimeout(tryGetLock, 0);
                return Promise.resolve();
            }
        }
    });
}

//usage

getCurrentWindowId().then(clientId => {
   // do something with id
});

Firefox 96 및 Chrome 97에서 작동합니다.쉽게 구할 수 있어야 할 정보를 얻기 위해 이런 어색한 구조를 만드는 것은 수치스러운 일이다.

window.name은 커스텀 Javascript 라이브러리, datetimepickers 등에 의해 덮어쓸 수 있습니다.

window.name 대신 DOM 헤드 메타 태그를 사용하여 ID를 저장하는 것이 좋습니다.

<html><head><meta id="windowID" content="{YOUR ID}">

페이지가 로드된 후 해당 창에서 Ajax를 통해 모든 내용을 로드해야 합니다. 그러면 이 ID를 헤더(또는 데이터) 값으로 모든 요청에 첨부할 수 있습니다.예를 들어 JQuery에서는 다음 코드가 사용됩니다.

$(document)
    .ajaxSend(function(event, jqXHR, ajaxOptions) {
        jqXHR.setRequestHeader('windowID',
            document.getElementById('windowID').content);
})

이 솔루션을 사용하려면 서버 측에서 사용자 정의 헤더 값에 액세스할 수 있어야 합니다.예를 들어 Java 서블릿의 경우:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String windowName = request.getHeader("windowID");

서버 측의 페이징, 정렬, 필터링 등의 정보를 세션 속성으로 저장할 경우 별도의 창 ID에 첨부하여 저장해야 합니다.

언급URL : https://stackoverflow.com/questions/864942/in-javascript-how-can-i-uniquely-identify-one-browser-window-from-another-which