How to execute a javascript function in a new window on a buttonclick in html

How to call a javascript function(Jitsi Meet API) on button click and open the result(meeting) in a new window, in this case the function has to open up a new Jitsi meeting I have a javascript function that calls the Jitsi Meet API and opens up or launches a new meeting on button click?

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

JavaScript
​x
 
//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
   });
​

As of now, the meeting launches on the same page, It would be really helpful if the meeting opens up in a new window on button click.

In simple terms, button click on this page should open up a new window and execute the function in the new window. I want to know how this can be achieved and by using what method.Do guide with an example snippet

Thanks in advance

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

Below is the function and the file that has to be executed in a new window on button click- 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);  
 
}

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

Answer

After researching a while, I finally figured it out

I made use of the window.open() in the current HTML script to open up new window and made use of document.ready(){} and loaded the script inside this function on loading the new window.

Voila!! It worked as per my requirement instead of calling the javascript on src i.e.,

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

If you want to open a document/html in a new window and not tab on button click or link use the window.open() as shown below Syntax window.open(URL, name, specs, replace)

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

This is what my function looks like now after modification

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>

JavaScript
 
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>
​
​

This is where the window.open() redirects to.

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

Conclusion

This tutorial demonstrates on how to open a new window(not tab) on button click and execute a javascript function and or script on opening the window.

Regards

Advertisement

Answer