草庐IT

javascript - 像 gmail 聊天一样弹出和弹出

coder 2023-08-12 原文

我想像 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>

child

<!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>

最佳答案

我会在您的窗口从名为 eg 扩展的页面上创建一个命名窗口。 “家庭窗口”。 然后使用与您所拥有的类似的方式展开窗口,除了使用 _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(); 

关于javascript - 像 gmail 聊天一样弹出和弹出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20834291/

有关javascript - 像 gmail 聊天一样弹出和弹出的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容?我基本上想做类似numbers.slice(0,3)的事情,但要删除切片中的数组项。嗯...嗯,我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组,我们在StackOverflow上找到一

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  4. ruby - 可以像在 C# 中使用#region 一样在 Ruby 中使用 begin/end 吗? - 2

    我最近从C#转向了Ruby,我发现自己无法制作可折叠的标记代码区域。我只是想到做这种事情应该没问题:classExamplebegin#agroupofmethodsdefmethod1..enddefmethod2..endenddefmethod3..endend...但是这样做真的可以吗?method1和method2最终与method3是同一种东西吗?还是有一些我还没有见过的用于执行此操作的Ruby惯用语? 最佳答案 正如其他人所说,这不会改变方法定义。但是,如果要标记方法组,为什么不使用Ruby语义来标记它们呢?您可以使用

  5. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  6. 智能客服 | 浅谈人工智能聊天机器人ChatGPT - 2

    2022年底,OpenAI的预训练模型ChatGPT给人工智能领域的爱好者和研究人员留下了深刻的印象和启发,他展现的惊人能力将人工智能的研究和应用热度推向高潮,网上也充斥着和ChatGPT的各种聊天,他可以作诗、写小说、写代码、讨论疫情问题等。下面就是一些他的神回复:人命关天的坑: 写歌,留给词作者的机会不多了。。。 回答人类怎么样面对人工智能: 什么是ChatGPT?借用网上的一段介绍,ChatGPT是由人工智能研究实验室OpenAI在2022年11月30日发布的全新聊天机器人模型,一款人工智能技术驱动的自然语言处理工具。它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动

  7. java - Java 中的 "caller"和 Ruby 中的 "receiver"一样吗? - 2

    如果我说x.hello()在Java中,对象x正在“调用”它包含的方法。在Ruby中,对象x正在“接收”它包含的方法。这只是表达相同想法的不同术语,还是意识形态上的根本差异?来自Java,我发现Ruby的“接收器”想法非常令人困惑。也许有人可以解释这与Java的关系? 最佳答案 在您的示例中,x不调用hello()。包含该片段的任何对象都是“调用”(即,它是“调用者”)。在Java中,x可以称为接收者;它正在接收对hello()方法的调用。 关于java-Java中的"caller"和R

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

  10. ruby-on-rails - 如何在 ruby​​ on rails 中为 gmail 联系人创建访问 token - 2

    我正在使用Omniauth请求用户gmail凭据,因此我可以稍后请求用户friend/联系人。现在,我正在使用身份验证请求为我生成的访问token,在OmniauthCallbacksController中获取好友列表。像这样classUsers::OmniauthCallbacksController如何使用存储在数据库中的凭据创建新的访问token,以便从不同的Controller调用googleAPI? 最佳答案 从here获取您的client_id和client_secret|.这是一个粗略的脚本,可以很好地工作。根据您的需

随机推荐