在同一页面上打开第三方实时聊天，无需单独打开 window

Question

目标环境：Wordpress VIP header.php

目标：点击图标 div 打开第三方聊天，如果需要切换关闭，聊天图标在所有页面上保持不变。

大家好

我的任务是在我们的站点中集成第 3 方聊天应用程序。我希望它像传统聊天页内聊天应用程序一样执行（在 div 中），但是，共享脚本使用 js window.open 方法并将聊天打开到单独的 window .我试过不成功地使用 , 标签。怀疑这不应该太难，但我无法弄清楚。我希望我在这里有足够的信息。

提前致谢！我要替换的代码很简单，但会打开一个新的 window，但我需要 window 看起来像现代聊天

     script type="text/javascript "
   const chatFunc = () => {
          var x = screen.width - 550;
          var y = screen.height - 800;
          var params = 'height=550,width=375,popup=yes,left='+x+',top='+y;
          var Url = 'thridpartychat link';
          **window.open(Url, '', params);** // this seems to be the issue
          }
  script
    
<div id="test" class="chat" onClick="chatFunc()" data-toggle="tooltip" data-placement="top" title="Chat" style=""> </div>

我的尝试：

    <div id="test" class="chat fas fa-comment-dots fa-7x embed-responsive" data-toggle="tooltip" data-placement="top" title="Chat now!" style="">
  <iframe id="chatIframe" class="embed-responsive-item" style="border:none" seamless>
      </iframe>
</div>

var x = screen.width - 550;
var y = screen.height - 800;
var params = "height=550,width=375,popup=yes,left=" + x + ",top=" + y;

var Url =
  "[link to third Party Chat]";

var test = document.getElementById('test');

test.addEventListener("click", function() {
  // Get Iframe - I had exception catch here -didnt work

  var iframe = document.getElementById('chatIframe');
  // Assign Attr-Used Object.assign at one point to no avail
  iframe.setAttribute('left', '+' + x + '+');
  iframe.setAttribute('top', '+' + y, );
  iframe.setAttribute('height', '550');
  iframe.setAttribute('weight', '375');
  iframe.setAttribute('src', 'Url');

  this.parentNode.appendChild(iframe);

  this.parentNode.removeChild(this);
});

这是我希望聊天的样子：

Answer 1

不知道你为什么把这个复杂化了。是否有特定原因要在之后加载 iframe？如果不使用 css 来设置样式，只是将其切换为可见是最好的解决方案。

HTML

<body>
<header>
    <button id="js-chat-toggle" class="chat fas fa-comment-dots fa-7x embed-responsive" data-toggle="tooltip" data-placement="top" title="Chat now!" style="">
        Chat now!
    </button>
</header>
<div class="chat-container" id="js-chat-container">
    <iframe id="chat-iframe" class="embed-responsive-item" seamless src="https://google.com">
</div>
</iframe>
</body>

CSS

.chat-container {
    display: none;
    position: absolute;
    bottom: 10px;
    right: 10px;
    max-width: 320px;
    overflow:hidden;
}

.chat-container.open {
    display: block;
}

.chat-container iframe {
    width: 100%;
    border: none;
    overflow:hidden;
}

JavaScript

const chatToggle = document.getElementById('js-chat-toggle');
const chatContainer = document.getElementById('js-chat-container')

chatToggle.addEventListener('click', function() {
    chatContainer.classList.toggle('open')
})

在同一页面上打开第三方实时聊天，无需单独打开 window

Open third party Live chat on the same page without opening a separate window

javascript

iframe