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