|
9 | 9 | .content { |
10 | 10 | margin-top: 10px; |
11 | 11 | border: none; |
12 | | - width: 100%; |
13 | | - height: calc(100% - 80px); |
| 12 | + width: 100%; |
| 13 | + height: calc(100% - 250px); |
14 | 14 | } |
15 | 15 |
|
16 | 16 | #avatarUrl { |
17 | 17 | margin-top: 10px; |
18 | 18 | } |
19 | 19 |
|
20 | 20 | body { |
21 | | - padding: 40; |
| 21 | + padding: 20 40; |
22 | 22 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, |
23 | 23 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; |
24 | 24 | background-color: rgb(243, 243, 243); |
|
27 | 27 |
|
28 | 28 | <script> |
29 | 29 | // Change this to your custom subdomain |
30 | | - const iframeUrl = "https://demo.readyplayer.me/" |
| 30 | + const iframeUrl = 'https://demo.readyplayer.me/' |
31 | 31 |
|
32 | | - window.addEventListener("message", receiveMessage, false) |
| 32 | + // Listen to messages from the iframe |
| 33 | + window.addEventListener('message', receiveMessage, false) |
33 | 34 |
|
| 35 | + // Handle messages from the iframe |
34 | 36 | function receiveMessage(event) { |
35 | | - setTimeout(() => { |
36 | | - // Get URL to avatar |
37 | | - if (iframeUrl.includes(event.origin)) { |
38 | | - console.log(`Avatar URL: ${event.data}`) |
39 | | - document.querySelector( |
40 | | - "#avatarUrl" |
41 | | - ).innerHTML = `Avatar URL: ${event.data}` |
42 | | - } |
43 | | - }, 1000); |
| 37 | + // Get URL to avatar |
| 38 | + const url = event.data |
| 39 | + console.log(`Avatar URL: ${url}`) |
| 40 | + document.querySelector('#avatarUrl').innerHTML = `Avatar URL: ${url}` |
| 41 | + document.querySelector('.container').removeChild(iframe) |
44 | 42 | } |
45 | 43 |
|
46 | | - function makeAvatar() { |
47 | | - let iframe = document.getElementById("iframe") |
| 44 | + function loadIframe() { |
| 45 | + let iframe = document.getElementById('iframe') |
| 46 | + |
48 | 47 | if (!iframe) { |
49 | | - iframe = document.createElement("iframe") |
50 | | - document.querySelector(".container").appendChild(iframe) |
| 48 | + iframe = document.createElement('iframe') |
| 49 | + document.querySelector('.container').appendChild(iframe) |
51 | 50 | } |
52 | | - iframe.id = "iframe" |
| 51 | + iframe.id = 'iframe' |
53 | 52 | iframe.src = iframeUrl |
54 | | - iframe.className = "content" |
55 | | - iframe.allow = "camera *; microphone *" |
| 53 | + iframe.className = 'content' |
| 54 | + iframe.allow = 'camera *; microphone *' |
56 | 55 | } |
57 | 56 | </script> |
58 | 57 | </head> |
59 | 58 |
|
60 | 59 | <body> |
61 | | - <input type="button" value="Open Ready Player Me" onClick="makeAvatar()" /> |
62 | | - <div id="avatarUrl">Avatar URL:</div> |
| 60 | + <h2>Ready Player Me iframe example</h2> |
| 61 | + <ul> |
| 62 | + <li>Click "Open Ready Player Me" button.</li> |
| 63 | + <li>Create an avatar.</li> |
| 64 | + <li>Click on "Done" button when you finish customizing your avatar.</li> |
| 65 | + <li>This page will receive the url when it is created.</li> |
| 66 | + <li>Url will be displayed, and Ready Player Me window will be closed.</li> |
| 67 | + </ul> |
| 68 | + <input type="button" value="Open Ready Player Me" onClick="loadIframe()" /> |
| 69 | + <div id="avatarUrl"><b>Avatar URL: </b></div> |
63 | 70 | <div class="container"></div> |
64 | 71 | </body> |
65 | 72 | </html> |
0 commit comments