Cara kod anda dijalankan

Bila anda tekan Run, WANCode menggabungkan fail anda menjadi satu dokumen HTML dan memuatkannya ke dalam <iframe> di dalam halaman. Kod anda berjalan dalam pelayar anda sendiri — tiada server yang menjalankannya.

Sandbox

<iframe sandbox="allow-scripts allow-forms" srcdoc="…your page…"></iframe>

• allow-scripts membenarkan JavaScript anda berjalan, dan allow-forms membolehkan borang berfungsi.
• Tiada allow-same-origin, jadi pratonton mendapat opaque origin — pelayar menganggapnya orang asing. Kod anda tak boleh membaca cookie, IndexedDB, localStorage atau halaman WANCode, dan tak boleh menyentuh kemajuan anda.
• Ia tak boleh menavigasi tetingkap utama atau membuka popup. Satu-satunya saluran kembali ke WANCode ialah postMessage, dan WANCode menyemak setiap mesej datang daripada larian pratonton semasa.
• Content Security Policy yang ketat di dalam pratonton menyekat request rangkaian (fetch, XHR, WebSocket), penghantaran borang ke laman lain, worker dan plugin. Imej, media dan Google Fonts daripada alamat https: masih dibenarkan supaya halaman anda nampak sebenar.

Apa yang berbeza daripada halaman biasa

fetch("data.json")

Request untuk fail dalam projek anda dijawab daripada fail anda selepas jeda pendek yang realistik, supaya anda boleh berlatih async/await. Request ke tempat lain akan gagal, kerana rangkaian dimatikan.

Long loops

Loop yang berjalan lebih daripada 1.5 saat dihentikan, dengan mesej konsol yang menunjukkan barisnya. Ini menyelamatkan anda daripada kebanyakan infinite loop yang tidak disengajakan.

alert / confirm / prompt

alert() paparkan mesej kecil di atas pratonton dan dalam konsol, bukan membekukan halaman. confirm() menjawab OK (true) secara automatik. prompt() memulangkan nilai lalainya, atau null jika tiada.

Links and forms

Pautan tidak menavigasi — konsol beritahu ke mana ia sepatutnya pergi (pautan #section masih scroll). window.open dimatikan. Borang yang dihantar tanpa event.preventDefault() dihentikan, dengan petunjuk yang menerangkan kenapa anda biasanya memerlukannya.

localStorage

Ditiru secara berasingan bagi setiap projek dan disimpan bersama draf anda, sehingga lebih kurang 200 KB. Ia kekal walaupun anda tekan Run semula. sessionStorage juga berfungsi tetapi direset pada setiap larian.

Console

console.log, amaran dan ralat dipaparkan di bawah pratonton, dengan nama fail dan nombor baris dipetakan semula kepada fail anda. Kod yang terlalu banyak mencetak akan dipotong selepas beberapa ratus mesej bagi setiap larian.

Mod React

• React 18.3.1 (development build, jadi anda dapat amaran yang membantu) sudah dimuatkan.
• Fail .jsx anda ditukar kepada JavaScript biasa dalam pelayar oleh transform JSX yang kecil dan pantas (Sucrase). Ia tidak membuat semakan jenis dan tidak membundle package npm.
• App.jsx mesti export default satu component; ia dipasang (mount) ke dalam #root untuk anda.
• Anda boleh import react dan react-dom, fail anda sendiri (import Card from "./Card.jsx") dan fail CSS (import "./styles.css"). Package lain akan paparkan ralat yang jelas.

Had yang jujur

• Sandbox ialah sempadan yang kukuh di sekeliling data WANCode, tetapi bukan perisai sempurna terhadap segala-galanya. Skrip yang sengaja (atau ada bug) masih boleh membekukan pratonton — contohnya dengan rekursi berat atau pengiraan besar yang bukan loop — atau menggunakan banyak memori.
• Pratonton berkongsi sumber pelayar anda, jadi pratonton yang beku boleh menyebabkan seluruh tab WANCode perlahan atau tidak responsif. Muat semula tab — draf anda sudah disimpan secara automatik — dan baiki kod itu.
• Oleh kerana imej dan fon https: dibenarkan, halaman yang anda tampal masih boleh memuatkannya, dan ini memberitahu server tersebut bahawa seseorang membukanya — sama seperti mana-mana laman web.
• Kod server tak boleh berjalan di sini. Ciri server Next.js, Node.js, pangkalan data dan API key milik server. Bila WANCode mengajar topik tersebut, ia akan dilabel dengan jelas sebagai simulasi atau projek yang anda muat turun dan jalankan di komputer sendiri.