Open external projects without blocked iframe embeds

static/js/player.js

@@ -245,21 +245,36 @@
                 // Hide side controls and console log panel, render full viewport width
                 sidePanel.style.display = "none";
                 layout.style.gridTemplateColumns = "1fr";
-                statusWrapper.style.display = "none"; // Iframe handles itself
-                
-                viewportFrame.classList.add("iframe-mode");
-                
-                const iframe = document.createElement("iframe");
-                iframe.className = "iframe-viewport";
-                iframe.allow = "autoplay; fullscreen; microphone; camera";
-                
+                statusWrapper.style.display = "none";
+
                 if (projectType === "html") {
+                    viewportFrame.classList.add("iframe-mode");
+                    const iframe = document.createElement("iframe");
+                    iframe.className = "iframe-viewport";
+                    iframe.allow = "autoplay; fullscreen; microphone; camera";
                     iframe.src = `/static_projects/${encodeURIComponent(studentToken)}/${encodeURIComponent(projectName)}/index.html`;
+                    viewportFrame.appendChild(iframe);
                 } else if (projectType === "external") {
-                    iframe.src = formatEmbedUrl(externalUrl);
+                    // External sites (MakeCode/Scratch/etc.) may send restrictive
+                    // frame headers. Open them directly instead of embedding an
+                    // iframe, which avoids COEP/CSP "frame blocked" errors.
+                    const card = document.createElement("div");
+                    card.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:18rem;padding:2rem;text-align:center;color:#e5eefb;";
+                    const title = document.createElement("h2");
+                    title.textContent = projectName;
+                    title.style.margin = "0";
+                    const note = document.createElement("p");
+                    note.textContent = "此作品位於外部網站，請點擊按鈕開啟。";
+                    note.style.cssText = "margin:0;color:#94a3b8;";
+                    const link = document.createElement("a");
+                    link.href = formatEmbedUrl(externalUrl);
+                    link.target = "_blank";
+                    link.rel = "noopener noreferrer";
+                    link.className = "btn-launch btn-launch-html";
+                    link.textContent = "開啟作品 ↗";
+                    card.append(title, note, link);
+                    viewportFrame.appendChild(card);
                 }
-                
-                viewportFrame.appendChild(iframe);
             }
         }