Jump to content

Help With IFrame Api Appear Upon Button Click


Chrisj
 Share

Recommended Posts

I have placed this jitsi script on a web page:

<script src='https://meet.jit.si/external_api.js'></script>

<div id="meeting"></div>

<script>
const options = {
    parentNode: document.querySelector('#meeting'),
    width: "100%",
    height: "100%",
    };

meetAPI = new JitsiMeetExternalAPI("meet.jit.si", options);
</script>

but the jitsi screen only appears after I refresh the page.
I see in the jitsi handbook, it has an onload: option:
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-iframe

So I have tried (unsucessfully) to modify the code to allow the web page visitor to 'click' to get the jitsi screen to appear, using this code:

<button id="meeting" onclick="button()"></button>

<script>
const options = {
    parentNode: document.querySelector('#meeting'),
    width: "100%",
    height: "100%",
    onload: function button() {
    document.getElementById('#meeting').click();
}
    };

meetAPI = new JitsiMeetExternalAPI("meet.jit.si", options);
</script>

any help/guidance with either getting the screen to appear without refresh or successfully having the screen appear upon 'click' is appreciated.

Link to comment
Share on other sites

I don't know where you're getting that button stuff from.

Refreshing a page starts everything over from the beginning. A page won't interfere with a future version of itself unless someone writes code specifically designed to do that.
You say it appears after a refresh. That sounds like you're saying that it is now appearing every time. What precisely is it that you do and don't do when the page works and does not work?

Link to comment
Share on other sites

Thank you for your reply.

Regarding " What precisely is it that you do and don't do when the page works and does not work",

when the page is loaded and the screen doesn't appear, so I refresh the page and the jitsi Start meeting box appears

at this location on the web page:

<div id="meeting"></div>

 and I proceed.

that is the only way it appears. Without a refresh the "meeting" just appears with this style:

#meeting{
background-color: #000;
width: 500px;
height: 400px;
margin: 0 auto;
}

just a black box.

Is there a solution to have the jitsi Start meeting to appear without refreshing the page?

The jitsi handbook states:

"The API object constructor uses the following options:

height: ......
width: ........
etc.

onload: The IFrame onload event handler.

etc....

 

I was trying (unsuccessfully) to use the onload: option to have the Start meeting appear without refreshing the page (by trying to add a 'click').

Any ideas/suggestions.guidance with getting the jitsi meeting Start to appear without refreshing the page, is welcomed

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.