Как выполнить функцию javascript в новом окне при нажатии кнопки в html

Как вызвать функцию javascript (API Jitsi Meet) при нажатии кнопки и открыть результат (собрание) в новом окне, в этом случае функция должна открыть новую встречу Jitsi У меня есть функция javascript, которая вызывает API Jitsi Meet и открывает или запускает новую встречу по нажатию кнопки?

//Javascript function to launch the meeting on the button click
 $('#btnStart').on('click',function(){
    Launch();//need to open the new window here and execute this function in new page
   });

На данный момент собрание запускается на той же странице. Было бы очень полезно, если бы собрание открывалось в новом окне при нажатии кнопки.

Проще говоря, нажатие кнопки на этой странице должно открыть новое окно и выполнить функцию в новом окне. Я хочу знать, как этого можно достичь и с помощью какого метода. Сделайте руководство с примером фрагмента

заранее спасибо

<html>
<head>
    <title>Launch Page</title>>
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="javascript.js"></script>

<script>

    $('#btnStart').on('click',function(){
    Launch();
   });

</script>

</head>

<body >

<div id='meet'>
<button id='btnStart' class ="button">Launch</button> 
</div>>

</body>

</html>

Ниже приведена функция и файл, который должен выполняться в новом окне при нажатии кнопки — javascript.js.

var api=null;

function Launch(){
 
 const domain = 'your.domain.com' 
  const options = {
      roomName:'room123',
      width: "100%",
      height: "100%",
      parentNode:document.querySelector('#meet'),
      interfaceConfigOverwrite: {  SHOW_JITSI_WATERMARK: true,SHOW_WATERMARK_FOR_GUESTS: true, DEFAULT_BACKGROUND: "#212529", 
      DEFAULT_LOCAL_DISPLAY_NAME: 'oc' ,TOOLBAR_BUTTONS: [
        'microphone', 'camera', 'desktop', 'fullscreen',
        'fodeviceselection', 'recording', 'profile', 'chat',
        'settings', 'raisehand','info','hangup',
        'videoquality', 'filmstrip', 'stats',
        'tileview'
    ]}
  };

    api = new JitsiMeetExternalAPI(domain,options);  
 
}

person NISCHAL ND    schedule 17.02.2021    source источник
comment
Посмотрите stackoverflow.com/questions/18890599/ для получения рекомендаций по выполнению действий во всплывающем окне.   -  person Nathan Taylor    schedule 17.02.2021
comment
Спасибо, @Nathan, но это не соответствует требованиям, пришлите мне, если есть другие ссылки. С уважением   -  person NISCHAL ND    schedule 18.02.2021


Ответы (1)


После изучения некоторое время, я, наконец, понял это

Я использовал window.open() в текущем HTML-скрипте, чтобы открыть новое окно, и использовал document.ready(){} и загрузил скрипт внутри этой функции при загрузке нового окна.

Вуаля!! Он работал в соответствии с моим требованием вместо вызова javascript на src, т.е.

<script src ="example.js"></script>

Если вы хотите открыть документ/html в новом окне, а не использовать вкладку при нажатии кнопки или ссылке, используйте window.open(), как показано ниже. Синтаксис window.open(URL, name, specs, replace)

window.open("example.html","windowname","_blank","height=500,width=500");

Вот как выглядит моя функция после модификации

example.html

<html>
 
 <head>
    
     <title>Welcome to My HTML</title>

     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
     <script>
        
             $(function(){

               $('#btnStart').on('click',function(){
                             
                 window.open("example2.html","newWindow","_blank","height=500,width=500");    
                
               });
               
             });
             
     </script>
 
 </head>

  <body>
   
     <div>
            <button id='btnStart' class ="button">Launch New WIndow</button> 
     </div>

  </body>
</html>

Вот куда перенаправляет window.open().

example2.html

<html>

  <head>

     <title>My page 2</title>

     <script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" 
     </script>

     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

     <script>

            //Printing log to check if DOM is loaded
            $( document ).ready(function() {

                console.log( "Ready" );
            
            });
             
            //Load your function/script to execute here
            $(document).ready(function(){
               
                //Your function goes here or the script you wanna run
             
             });
                
  </head>

</html>

Заключение

В этом руководстве показано, как открыть новое окно (не вкладку) при нажатии кнопки и выполнить функцию javascript или сценарий при открытии окна.

С уважением

person NISCHAL ND    schedule 19.02.2021