این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت SandBox در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت SandBox در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت SandBox در HTML
صفت sandbox صفتی است که در تگ IFrame مورد استفاده قرار میگیرد و میتواند یکسری محدودیت هایی برای ( محتوای ) داخل آی فریم ایجاد نماید.
محدودیت هایی که توسط این صفت میتوان اعمال کرد :
- محتوا را به عنوان یک منبع منحصر بفرد در نظر میگیرد
- غیرفعال کردن فرم ها ( جلوگیری از ارسال فرم ها )
- غیرفعال کردن اسکریپت ها ( جلوگیری از اجرا شدن )
- غیرفعال کردن API ها
- غیرفعال کردن پلاگین ها (مثله <embed>, <object> )
- غیرفعال کردن ویژگی هایی که خودکار هستند مثله پخش اتوماتیک ویدئوها و..
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <iframe> |
Free-Learn
مثال از صفت SandBox در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : چون بصورت مستقیم و بدون مقدار از این صفت استفاده کردیم پس تمامی محدودیت ها اعمال میشه
|
1 2 3 4 5 |
<body> <iframe src="files/demo_sandbox.html" sandbox></iframe> </body> |
مثال شماره ۲ : میتونیم یک یا چندین محدودیت رو تعریف کنیم ( در مثال زیر فقط میزاره اسکریپت ها اجرا بشن )
|
1 2 3 4 5 |
<body> <iframe src="files/demo_sandbox.html" sandbox="allow-scripts"></iframe> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت sandbox در HTML پشتیبانی میکنند یا خیر.
| نام صفت | Chrome | Firefox | Opera | Safari | Edge |
| sandbox | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 |
<iframe sandbox="Value"> |
Free-Learn
جدول مقادیر صفت SandBox در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| بدون مقدار |
تمام محدودیت ها را اعمال میکند |
| allow-forms | اجازه ارسال فرم ها را میدهد |
| allow-modals | اجازه بازشدن پنجره های مدال را میدهد |
| allow-orientation-lock | اجازه قفل کردن جهت صفحه نمایش را میدهد |
| allow-pointer-lock | اجازه استفاده از Pointer Lock API را میدهد |
| allow-popups | اجازه میدهد پنجره های بازشو باز شوند |
| allow-popups-to-escape-sandbox | به پنجره‌های بازشو اجازه میدهد بدون توجه به محدودیت های SandBox، پنجره‌های جدید را باز کنند |
| allow-presentation | اجازه شروع یک جلسه / ارائه را میدهد |
| allow-same-origin | اجازه میدهد تا محتوای IFrame را به عنوان منبع یکسانی با صفحه جاری در نظر بگیرد |
| allow-scripts | اجازه اجرای دستورات جاوااسکریپت را میدهد |
| allow-top-navigation | اجازه میدهد تا IFrame به محتوای سطح بالا دسترسی پیدا کند |
| allow-top-navigation-by-user-activation | اجازه میدهد تا IFrame به محتوای سطح بالا دسترسی پیدا کند فقط به شرطی که کاربر فعالی وجود داشته باشد |
Free-Learn
نکات و توضیحات
- اگه این صفت رو بدون مقدار ( مثه مثال شماره ۱ ) استفاده کنیم ،تمامی محدودیت ها برای محتوا اعمال خواهد شد ولی اگر به این صفت مقدار بدهیم ( مثه مثال شماره ۲ ) میتوانیم مثلا تعریف کنیم که اسکریپت ها فعال باشند ولی بقیه محدودیت ها اعمال شود.
- برای مشخص کردن چندین گزینه باید بین آنها فاصله گذاشت ، مثال :
|
1 |
<iframe src="#" sandbox="allow-forms allow-scripts"></iframe> |
