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