如何使用jQuery / JavaScript打开弹出窗口/标签（ASPX登录页面），然后将值传递给已打开的窗口/标签上的DOM就绪事件？

Question

We currently have two asp.net 2.x web applications and we need to perform the following functionality:

From one application, we want to auto-login to the other web application automatically in a new tab; using the same browser instance/window.

So the process is:

Open New Window/Tab With Second System URL/Login Page Wait For Popup Window/Tab Page To Load (DOM Ready?)

OnPopupDomReady { Get Usename, Password, PIN Controls (jQuery Selectors) and Populate In Code Then Click Login Button (All Programmatically). }

I am currently using JavaScript to Open the window as follows:

<script type="text/javascript">
  $(document).ready(function () {
    $('a[rel="external"]').click(function ()
       {
         window.open($(this).attr('href'));
         return false;
       });
      });  
</script>

I would like to use jQuery chaining functionality if possible to extent the method above so that I can attach a DOM Ready event to the popped up page and then use that event to call a method on the code behind of the popped up page to automatically login. Something similar to this (Note: The following code sample does not work, it is here to try and help illustrate what we are trying to achieve)...

 <script type="text/javascript">
    $(document).ready(function () {
      $('a[rel="external"]').click(function () {
        window.open($(this).attr('href').ready(function ()
        {
           // Use JavaScript (Pref. jQuery Partial Control Name Selectors) To Populate Username/Password TextBoxes & Click Login Button.
        })
      });

    });  
  </script>

Our architecture is as follows: We have the source for both products (ASP.NET WebSite[s]) and they are run under different app. pools in IIS.

Answer 1

When you open a window with window.open , the new window gets a property called window.opener which references the parent window. So code in your child window can call functions in the parent window, for instance:

In Window A:

// Declared at global scope => ends up as property on `window`
function phoneHome(str) {
    alert(str);
}

In Window B (the child window):

$.ready(function() {
    if (window.opener && window.opener.phoneHome) {
        window.opener.phoneHome("Hi, Ma!");
    }
});

(Using $.ready in the child window requires that the child window have jQuery loaded.)

In the above all I've done is have the child window trigger a function in the parent window with a message, but of course the function call can carry any data you want it to.