【问题标题】:Pop up and pop in like gmail chat像gmail聊天一样弹出和弹出
【发布时间】:2014-01-17 00:41:32
【问题描述】:

我想像 gmail 聊天弹出窗口一样弹出窗口,也想要像 gmail 那样弹出窗口。

一旦弹出完成,特定的 div 应该在新窗口中打开,一旦弹出完成,特定的 div 应该被放置在它已经存在的位置,到目前为止我能够弹出带有以下代码的新窗口中的窗口,但我不知道如何弹出窗口

请注意:一旦弹出完成,特定的 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>

【问题讨论】:

  • @rps 感谢您的回复,是的,我只是期待,我觉得我在我的问题中解释了这一点,我不知道该怎么做。
  • 对不起,您想在新窗口中弹出一个窗口吗?如果您需要任何弹出式弹出式功能,您总是可以在 html 和 javascript 中进行一些自定义编码,对吧?
  • @Shahe 没问题,但在我的情况下,图表、销售分析等所有内容都将在单个窗口(html 页面)中,有时我们需要弹出该内容,我们将把它显示在另一台显示器(4 显示器)上,如果你不明白我在说什么,请回复我,因为我很着急,我会错过正确解释的。
  • 这个问题已经很老了,但这可能会有所帮助:stackoverflow.com/questions/4667714/…
  • 也许你需要写一个 Chrome 扩展来代替?我不明白您如何才能让新窗口重新连接

标签: javascript jquery html


【解决方案1】:

如果我正确理解了这个问题,您希望在弹出窗口时保留状态。看起来您正在从包含 iFrame 的 #page 节点填充弹出 HTML。

首先,要知道在使用 iFrame 时,任何 iframe 节点的重新父级都会导致重新加载,从而丢失所有状态。可惜了;(

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

如何做到这一点的细节......我将作为练习留给读者。

【讨论】:

    【解决方案2】:

    我会在您的窗口扩展的页面上创建一个命名窗口,例如。 “主窗口”。 然后使用类似于你所拥有的扩展窗口,除了使用 _blank 给它一个特定的名称,如“ExpandedWindow” 例如。

    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(); 
    

    【讨论】:

    • 可以给小样机吗?这样它对每个人都有用。
    • 好的,这是一个非常基本的工作示例:dialoz.com/downloads/PopUp-PopIn.zip
    • 它不适合我的问题,即:如果我输入 mail-id 并弹出我在 mail-id 文本框中没有得到任何值,请通过我给出的问题来源也请仔细阅读。
    猜你喜欢
    • 2014-08-18
    • 2012-10-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-08-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多