Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

169
Visualizações
Abra el chat en vivo de terceros en la misma página sin abrir una ventana separada

Entorno de destino: Wordpress VIP header.php

objetivo: haga clic en el icono div para abrir el chat de terceros, alternar para cerrar si es necesario, icono de chat para continuar en todas las páginas.

Hola todos

Me encargaron integrar una aplicación de chat de terceros en nuestro sitio. Quiero que funcione como una aplicación de chat en la página de chat tradicional (en un div), sin embargo, el script compartido usa js el método window.open y abre el chat en una ventana separada. Intenté sin éxito usar las etiquetas . Sospecho que esto no debería ser demasiado difícil, pero no puedo resolverlo. Espero tener suficiente información aquí.

¡Gracias por adelantado! El código que estoy reemplazando es sencillo pero se abre en una nueva ventana, pero necesito que la ventana se vea como un chat moderno

 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>

Mi intento:

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

Así es como quiero que se vea el chat: Ventana de chat de objetivos

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

No tengo idea de por qué estás complicando esto. ¿Hay alguna razón específica por la que desee cargar el iframe después? si no usa css para diseñarlo y simplemente cambiarlo para que sea visible es la mejor solución.

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') })
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda