Dynamically generated iframe with zoom inside generates the zmmtg-root div outside the iframe

Description
Due to the missing CSS functionality I tried to dynamically create an iframe with a web embedded zoom script inside the iframe.
I created the iframe with:

var iframehead = `
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Zoom Iframe</title>
			<link rel="stylesheet" href="https://source.zoom.us/1.9.0/css/bootstrap.css" type="text/css" />
			<link rel="stylesheet" href="https://source.zoom.us/1.9.0/css/react-select.css" type="text/css" />
			<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
			<script src="https://source.zoom.us/1.9.0/lib/vendor/react.min.js"></script>
			<script src="https://source.zoom.us/1.9.0/lib/vendor/react-dom.min.js"></script>
			<script src="https://source.zoom.us/1.9.0/lib/vendor/redux.min.js"></script>
			<script src="https://source.zoom.us/1.9.0/lib/vendor/redux-thunk.min.js"></script>
			<script src="https://source.zoom.us/1.9.0/lib/vendor/lodash.min.js"></script>
			<script src="https://source.zoom.us/zoom-meeting-1.9.0.min.js"></script>
			`;

		var iframebody=	`			
			<script>
			console.log('iframetext loaded');
			ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.0/lib', '/av'); 
			console.log('checkSystemRequirements');
			console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
			ZoomMtg.preLoadWasm();
			ZoomMtg.prepareJssdk();
			const zoomMeeting = document.getElementById('zmmtg-root');
			ZoomMtg.init({
				debug: true,
				screenShare: true,
				isSupportChat: true,
				leaveUrl: 'https://example.de/out2.php',
				isSupportAV: true,
				success: function() {
					console.log('zoom init successfully');
					ZoomMtg.join({
							signature: '` + data.signature + `',
							meetingNumber: ` + data.config.mid + `,
							userName: '` + app.talk.user.name + `',
							apiKey: '` + data.config.apikey + `',
							passWord: '` + data.config.password + `',
							success: (success) => {
								console.log('zoom join successfully: ' + success)
								},
							error: (error) => {
								console.log('error joining zoom: ' + error)
								}
							})		
					},
				error: function() {
					console.log('error initiating zoom: ' + error)
					}
				});		
				</script>
			`;
		  $('<iframe scrolling="no" allow="microphone; camera" id="zoomIframe" width="800px" height="600"" />').appendTo('#wrapper').contents().find('head').append(iframehead);
		  $('#zoomIframe').contents().find('body').append(iframebody);

Error
First error: Ok, thats my fault. Dynamically generated/inserted JS inside an iframe (body part) doesn´t work this way. I have to use eval().

Second and main error: In the header of the iframe, zoom-meeting-1.9.0.min.js is loaded and generates the

<div id="zmmtg-root"></div>
<div id="aria-notify-area" aria-atomic="true" aria-live="assertive"></div>

outside of the iframe in my main page and not inside the iframe.
Is there a way to generate the zmmtg-root and aria-notify-area in the body part of the iframe?

Which Client Web SDK version?
1.9.0

Device (please complete the following information):

  • OS: Win 10
  • Browser: Chrome
  • Browser Version 89.0.4389.82

Hey @MZL,

Thank you for reaching out to the Zoom Developer Forum. You’ve identified some interesting behavior here but it seems to be expected based on how the Web SDK works.

Currently, the Web SDK is not designed to be placed inside of an iFrame and instead is rendered directly on the page where it’s used. The behavior where the div is placed outside of the iframe that you’ve created seems to be due to this.

I would try adding the Zoom meeting window similar to the example that we have in our Sample Web App or Sample Angular App.

I hope that helps! Let me know if you have any questions.

Thanks,
Max

When opening zoom in browser with client Web SDK or without We are not getting advance feature like whiteboard and screen Portion sharing… Please help urgently

I got it to work with eval(), see

Be aware that you also have to load and wait for jquery and/or the zoom-js-files in the injected script before fireing the ZoomMtg.
You can do this with defer function: javascript - How to make script execution wait until jquery is loaded - Stack Overflow

@MZL, I’m glad to hear that you found a solution that works for you! Please note, you may encounter further issues when using the Web SDK from an iFrame.

@aftabh2018 I see that you have submitted a forum topic for this. I’ll follow-up with you there.

Thanks,
Max

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.