Question

我想像gmail聊天弹出窗口一样弹出窗口以及我想像gmail一样弹出窗口。

一旦弹出完成，特定div应该在新窗口中打开，一旦弹出完成特定div应该放在已经存在的位置，到目前为止我能够弹出新窗口中的窗口带有以下代码，但我不知道怎么做pop-in

请注意：一旦弹出完成特定div应该在另一个窗口中打开，主窗口中的变量也应该在弹出窗口中可访问。

在Jsfiddle中锻炼弹出演示

  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    //<![CDATA[ 
    $(function(){
    $('.popup').click(function (event) {
     event.preventDefault();
     window.open($(this).attr("href"), "popupWindow",              
     "width=600,height=600,scrollbars=yes");
    });
   });//]]>  

</script>


</head>
<body>
  <a href="http://google.com" class="popup">google</a>
</body>
</html>

更新

我找到了如何在新窗口中打开div的代码，如下所示，现在我能够在div中弹出包含内容的窗口，现在我需要知道如何访问变量值弹出窗口以及如何将弹出窗口附加到原始位置

Jsfiddle demo

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>
      Popup demo
    </title>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
    </script>

  </head>
  <body>
    <a href="#" class="popup">
      google
    </a>
    <div id="toNewWindow">
      Testing
      <input type="button" onclick="test()" value="click">
    </div>

    <script type="text/javascript">
      //<![CDATA[ 

      $('.popup').click(function (event) {
        event.preventDefault();
        var w = window.open("","myWin","height=400px,width=600px");
        w.document.write( $("#toNewWindow").html() );

        $('#toNewWindow').detach();
      });

      var a=3;
      function test()
      {
        alert(a);
      }
      //]]>      
    </script>
  </body>
</html>

第二次修改

现在我已经找到了在opener和child之间访问变量的方法，代码如下

现在我的问题是

如果我在child.html中的文本框中输入了iframe内部的文本框，则弹出窗口时没有显示。

开瓶器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
    winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
    var s=document.getElementById('page').innerHTML;
    console.log(s);
    //var s=document.getElementById('page');
winObj.document.write(s);
    //win.parent.detach(win);

}
function changeValue()
{
    console.log(winObj.document.getElementById('changer').value);
    winObj.document.getElementById('changer').value='changer';
}
</script>
</head>

<body>
   <div id="page">
        <iframe src="child.html" width="100" height="100"></iframe>
   </div>
   <div id="page1">
    <input type="text" id="text1"/>
    <input type="button" value="popup" onclick="openwindow()"/>
    <input type="button" value="changevalue" onclick="changeValue()"/>
   </div>
</body>
</html>

儿童

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function openerChange()
    {
            window.opener.document.getElementById('text1').value="Value changed.."
    }
</script>
</head>

<body>
    <input type="text" value="" id="changer" />
    <input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>

Answer 1

我会在你的窗口扩展的页面上创建一个命名窗口，例如。＆＃34; HomeWindow＆＃34 ;. 然后使用类似于你拥有的东西展开窗口，除了使用_blank给它一个特定的名称，如＆＃34; ExpandedWindow＆＃34; 例如

window.open("http://YourLink.TLD","ExpandedWindow","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

然后在弹出的Retract窗口中使用这些单击功能。

    window.open(document.URL,"HomeWindow");

    ExpandedWindow.close();

Answer 2

如果我正确理解了这个问题，则您希望在弹出窗口时保留状态。似乎您正在从#page节点填充弹出HTML，该节点包含一个iFrame。

首先，要知道在使用iFrame时，iframe节点的任何重配都会导致重新加载，并丢失所有状态。真不幸;（

如果我是你，我会做到的，以便所有事件处理和状态管理都在主窗口中完成。您在正确的轨道上。当您打开弹出窗口时，如果主窗口保持该状态，则可以将该状态写入打开的窗口的iframe中。同样，当您关闭弹出窗口并且iframe重新安装在主窗口中时，您可以使用正确的值对其进行初始化，因为主窗口会跟踪状态。

具体操作方法...我将作为练习留给读者。

像gmail聊天弹出并弹出

2 个答案: