fix(iframe): [PKG-IFRAME-05] checkpoint player and editor integration

docs/assets/example/iframe.js

@@ -15,6 +15,11 @@ const iframe = new ArtplayerToolIframe({
   url: '/iframe.html',
 })
 
+window.addEventListener('artplayer:example:cleanup', () => {
+  iframe.destroy()
+  $iframe.remove()
+}, { once: true })
+
 iframe.message(({ type, data }) => {
   switch (type) {
     case 'fullscreenWeb':
@@ -44,4 +49,7 @@ iframe.commit(() => {
       data: state,
     })
   })
+}).catch((error) => {
+  if (!iframe.destroyed)
+    console.error(error)
 })

docs/assets/js/common.js

@@ -205,8 +205,9 @@
   }
 
   function runCode() {
+    window.dispatchEvent(new Event('artplayer:example:cleanup'))
     // Destroy all existing instances
-    Artplayer.instances.forEach((art) => art.destroy(true))
+    Artplayer.instances.slice().forEach((art) => art.destroy(true))
     
     const value = editor.getValue()
     eval(value)

docs/index.html

@@ -229,12 +229,17 @@
         <div class="popinner"></div>
     </div>
     <script src="./assets/js/console.js"></script>
-    <script src="./assets/js/vs/loader.js"></script>
     <script>
         var artplayer = document.createElement('script');
+        var monacoLoader = document.createElement('script');
         var common = document.createElement('script');
 
         artplayer.onload = function () {
+            monacoLoader.src = "./assets/js/vs/loader.js";
+            document.body.appendChild(monacoLoader);
+        }
+
+        monacoLoader.onload = function () {
             common.src = "./assets/js/common.js";
             document.body.appendChild(common);
         }
@@ -274,4 +279,4 @@
     </script>
 </body>
 
-</html>
+</html>