如何在 html 中单击按钮时在新 window 中执行 javascript 函数

Question

如何在单击按钮时调用 javascript 函数（Jitsi Meet API）并在新的 window 中打开结果（会议），在这种情况下，函数必须开启新的 Jitsi 会议我有一个 javascript 调用 Jitsi Meet API 并在单击按钮时打开或启动新会议的函数？

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

截至目前，会议在同一页面上启动，如果会议在新 window 按钮单击按钮时打开，那将非常有帮助。

简单来说，点击这个页面的按钮应该打开一个新的window，并执行新的window中的功能。我想知道这是如何实现的，以及如何使用带有示例代码段的 method.Do 指南

提前致谢

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

以下是单击按钮时必须在新 window 中执行的函数和文件 - 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);  
 
}

Answer 1

研究了一段时间，终于弄明白了

我利用当前 HTML 脚本中的 window.open() 打开新的 window 并利用 document.ready(){} 并在该函数中加载脚本加载新的 window.

瞧！！它按照我的要求工作，而不是在 src 上调用 javascript 即

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

这是我的函数修改后的样子

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>

结论

本教程演示了如何在单击按钮时打开新的 window（不是选项卡）并在打开 window 时执行 javascript 函数和/或脚本。

此致

如何在 html 中单击按钮时在新 window 中执行 javascript 函数

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

html

javascript

api

jitsi

jitsi-meet