Help With IFrame Api Appear Upon Button Click

[Chrisj]

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.

[requinix]

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?

[Chrisj]

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

[requinix]

If it's not loading on the page then you have to find out exactly why it's not loading on the page.

Any errors in your browser's developer console?