javascript - 如何在新窗口上打开相同的页面，并与它们交叉 JavaScript？

Question

我知道这是一个不寻常的问题。不，这不是错字。

我希望在新窗口中打开同一页面。有了这个新窗口，我想进行跨 javascript 操作。意味着新窗口可以操作旧窗口，反之亦然；从 JavaScript（可以是 jQuery）到完整的 DOM。加同步滚动

非常感谢！

Answer 1

这里：

// you use a regular window.open()
var w = window.open(window.location.href);
// the variable w now contains a reference to the newly opened window.

// from the newly opened window use window.opener : 
window.opener.alert("Called in parent window.");

Answer 2

行。终于找到了解决我所有头痛的真正答案。

我将解释在同一页面中的父窗口和子窗口之间进行通信的最佳方式是什么。可以针对不同的页面（但来自同一主机）调整此逻辑。

使用：JavaScript + PHP

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
 <!--
 var window_ = null;
 var n = false;  //Variable n


<?php
    if(isset($_GET['n'])) //This will make the n variable go true if 
    //'?n' (without quotes) is found in the URL. Meaning, that the child exists
    {
        print('n = true;');
    }
?>


function openChildWindow()  //function which opens the child window. 
 {
  if (window_ != null) //This will check if the window is opened
  {
   if  ( window_.closed == false ) //if the window is opened, a.k.a is not closed
    window_.close(); // close the window
   window_ = null; // and nullify the variable, so it can be reopened if desired. 
  }

else
{
 window_ = window.open(window.location.href+'?n'); //This is the tricky part. 

/*Assign the window.location.href so it will open a new window with the same page 
BUT assign it the n variable, so the GET function will receive it, and set n to true.
*/

 window_.focus();
}
 // Need to call on a delay to allow
  // the child window to fully load...

 }

function callChildWindowFunction()
 {
  if ( (window_ != null) && (window_.closed == false) )
        {
        window_.shout('bearl');
        }


 }
 // -->

 function shout(val)
 {
     alert(val);
 }
 $(document).ready(function(e) { 
 /*Wait for the document to load, so you can check if the variable n is true,
 which means that **IT IS** the child window and it has been loaded completely. Meaning 
 that you can finally manipulate the child window with the parent document*/
    if(n == true)
 {
    window.opener.callChildWindowFunction(); //Call the parent telling it "I'm ready" 
 } 
});

 </script>


 <input type="button" value="Blear" onClick="openChildWindow();">

现在，解释代码。

这里的技巧是创建一个“人工开关”，它会告诉浏览器哪个页面是父页面，哪个页面是子页面。

这样做的人是变量n。通过为其分配一个错误值，我告诉它是已加载的父级而不是子级。

当子窗口打开时，（请参见 openChildWindow() 函数），它将验证窗口是否已打开，以便根据情况关闭/打开它。

如果窗口打开，它将分配 EXACT URL 和 ?n 变量，这将帮助 PHP 识别它是子窗口。

在打开的页面底部，文档加载完成后，n 为 true，因此它会通过window.opener函数调用父级。这将触发一个函数，该函数将触发子函数 (shout(val))。

您也可以使用两个不同的页面来执行此操作。

创建一个页面“A.html”和一个页面“B.html”（不带引号）。

A页面会得到如下代码：

<script type="text/javascript">
 <!--
 var window_ = null;
function openChildWindow() 
 {
  if ( (window_ != null))
  {
   if  ( window_.closed == false )
    window_.close();
   window_ = null;
  }

 var windowUrl = 'B.html';

 window_ = window.open(windowUrl);

 window_.focus();
 }

function callChildWindowFunction()
 {
  if ( (window_ != null) && (window_.closed == false) )
        {
        window_.shout('bearl');
        }
}
 // -->
 </script>


 <input type="button" value="Blear" onClick="openChildWindow();">

B页会得到这个

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
 function shout(val)
 {
     alert(val);
 }
 $(document).ready(function(e) {
 {
    window.opener.callChildWindowFunction(); 
 } 
});

 </script>

请注意，机制是相同的。唯一不需要“人工切换”的事情，因为页面不同。

只需将要创建的页面 B 分配一个 $(document).ready() 函数来验证它是否已完全加载，并通过 window.opener 函数调用父级，以便它可以开始调用子级。

If you've found a better way to do this, then go ahead and show me. setTimeOut, setInterval functions did not work because the code pre-executed before the time was out (Opera). Furthermore, this will assure you that the document was 100% loaded, and the code will not break if the user has slowpoke Internet connection.