从另一个儿童窗口聚焦儿童窗口

时间:2015-01-19 07:14:01

标签: javascript jquery html5 dom

我有以下情况:

我有一个主窗口[main.html]。有三个链接叫做Popup1,Popup2,Popup3。点击链接分别打开Popup1 windowPopup2 window

<html>
<head>
  <title>Popup Focus Example</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script>
      var openWin = [];
      $(function(){
          $('#elem').on('click', 'a', function(){
              var index = $(this).index();
              var page = 'pop'+(index+1)+'.html';
              var w = window.open(page, $(this).attr('title'), '_blank');
              openWin[index] = w;

          });
      });
  </script>
</head>
<body>
  <div id="elem">
    <a href="javascript:void(0);" title="Pop 1">Pop 1</a>
    <a href="javascript:void(0);" title="Pop 2">Pop 2</a>
    <a href="javascript:void(0);" title="Pop 3">Pop 3</a>
  </div>

</body>
</html>

现在打开的窗户是1号窗口和1号窗口。窗口2.我想从窗口2转移窗口1的焦点。无论如何这可以做到吗?

pop1.html

<html>
<head>
  <title>Popup 1 Example</title>
  <script type="text/javascript">
    function go() {
        if(window.opener.openWin) {
            var popup2 = window.opener.openWin[1];
            popup2.focus();
        }
    }
  </script>
</head>
<body>
  <div>
    popup 1 example
  </div>
  <div><a href="javascript:void(0);" onclick="go();">Go to Popup2</a></div>
</body>
</html>

pop2.html

<html>
<head>
  <title>Popup 2 Example</title>
</head>
<body>
  <div>
    popup 2 example
  </div>
</body>
</html>

查看小提琴http://jsfiddle.net/tmf8cry8/2/

中的main.html代码

3 个答案:

答案 0 :(得分:0)

您已正确编写代码,请执行下面列出的两项更改...

1)您需要在openWin Array中推送窗口对象

var openWin = [];
  $(function(){
      $('#elem').on('click', 'a', function(){
          var index = $(this).index();
          var page = 'pop'+(index+1)+'.html';
          var w = window.open(page, $(this).attr('title'), '_blank');
          //openWin[index] = w;
          openWin.push(w); //Push the window object

      });
  });

2)使用数组索引访问窗口对象以聚焦窗口

function go() {
    //console.log(openWin);
    //if(window.opener.openWin) {
      //  var popup2 = window.opener.openWin[1];
        //popup2.focus();
    //}
    //Supposing that pop1, pop2 and pop3 are opened, you want to access pop2
    openWin[1].focus();

}

希望它有所帮助!

答案 1 :(得分:0)

您可以使用window.open

方法
window.open("",window_name).focus();

假设您的窗口已打开,您可以使用上面的代码将焦点转移到窗口。

请使用pop2.html中的以下代码并尝试[按顺序打开所有窗口后]。

<html>
<head>
<title>Popup 2 Example</title>
<script language="javascript">
function openNew()
{
    window.open("","Pop 3").focus();
}
</script>
</head>
<body>
<div>
popup 2 example
</div>
<a href="javascript:void(0);" onclick="javascript:openNew();">
 Go to pop3</a>
</body>
</html>

根据您的代码,您使用title属性来命名窗口,因此Pop 3用于将焦点转移到Pop 3窗口。

或者,您可以检查窗口实例是否已打开,然后完全加载URL或转移焦点

希望它有所帮助!!!

答案 2 :(得分:0)

make go()函数只需在opener窗口中调用一个函数,例如:

window.blur(); //focus out of here
window.opener.myParentWindowFunction( 2 );

该函数(在“父”窗口中)应该调用目标窗口中只有“window.focus()”的函数。

funtion myParentWindowFunction( target ){
 window.blur();//focus out of here also
 openWin[target].callFocus();
}

在每个弹出窗口中:

function callFocus(){ window.focus(); }

你不能让一个窗口将焦点“发送”到另一个(我猜安全问题),但是你可以创建一个窗口来“请求它”......并且取决于浏览器是否会得到它(在chrome中不起作用,但如果你在焦点后添加一个alert()它会改变窗口。很有趣,因为如果你只是把警报但没有焦点它不会交换窗口......)< / p>

代码只是一个模型,但这就是概念。您必须使用开启窗口作为中继通信到它必须调用焦点的所需窗口。希望你不需要它真正的crossbrowser。