این متن هنوز کامل نیست و در حال بروزرسانی است. نسخه‌ی نهایی پس از تکمیل در دسترس قرار خواهد گرفت.

جاسازی محتوای خارجی و اشیاء

در توسعه وب مدرن ادغام محتوای خارجی (External Content Integration) به عنوان یکی از اصلی‌ترین ابزارهای ساخت سایت‌های پویا، چندوجهی و کاربردی مطرح می‌شود. این فصل به بررسی جامع و تخصصی روش‌های جاسازی محتوای خارجی در HTML5 می‌پردازد شامل استفاده از <iframe> - <embed> - <object> و بررسی انتخاب‌های امنیتی، دسترسی‌پذیری و همچنین تحلیل تگ‌های منسوخ‌شده که همچنان در برخی محیط‌ها وجود دارند. این عناصر نه تنها به افزایش قابلیت‌های سایت کمک می‌کنند بلکه مدیریت امنیتی، عملکرد و سازگاری با استانداردهای جهانی را نیز تضمین می‌نمایند.

7.1 نمایش صفحات خارجی با iframe: ادغام بخشی در صفحه

7.1.1 <iframe>: چارچوب داخلی (Inline Frame)

این عنصر برای جاسازی صفحات وب، محتوای خارجی یا ابزارهای آنلاین در صفحه فعلی استفاده می‌شود.
<iframe> یک عنصر "محدوده" (sandboxed) است که می‌تواند به صورت موقت یا دائمی اجرای کد خارجی را فراهم کند.

src	مسیر صفحه یا منبع خارجی (ضروری)
width / height	ابعاد چارچوب
title	عنوان مختصر برای دسترسی‌پذیری (ضروری)
loading="lazy"	بارگذاری تأخیری (برای بهینه‌سازی)
sandbox	کنترل دسترسی به کد خارجی (امنیتی)
allowfullscreen	فعال‌سازی پخش کامل صفحه

<iframe
 src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
 title="ویدئوی آموزشی در یوتیوب" 
 width="560" 
 height="315" 
 loading="lazy"
 sandbox="allow-scripts allow-same-origin"
 allowfullscreen
></iframe>

sandbox یکی از مهم‌ترین ویژگی‌های <iframe> است. بدون آن محتوای خارجی می‌تواند به صورت کامل دسترسی به صفحه فعلی داشته باشد.

allow-scripts: اجازه اجرای JavaScript
allow-same-origin: اجازه دسترسی به origin مشابه
allow-popups: اجازه باز کردن پنجره‌های جدید
allow-forms: اجازه ارسال فرم
allow-modals: اجازه باز کردن پنجره‌های مودال

اگر sandbox فعال باشد حتی اگر allow-scripts وجود داشته باشد اجرای کد خارجی فقط در محیط محدود انجام می‌شود و از دسترسی به DOM صفحه فعلی جلوگیری می‌کند.

7.1.2 مدیریت دسترسی‌پذیری و تجربه کاربری

استفاده از title برای توصیف محتوای داخل iframe ضروری است.
از aria-label یا aria-labelledby برای افزایش دسترسی‌پذیری استفاده کنید.
در صورتی که iframe حاوی محتوای مهم است باید محتوای جایگزین (fallback) درون تگ قرار داده شود.

<iframe 
 src="https://example.com/form" 
 title="فرم ثبت‌نام آنلاین"
 aria-label="فرم ثبت‌نام آنلاین"
 sandbox="allow-scripts allow-same-origin"
>
 <p>لطفاً از مرورگر خود برای دسترسی به فرم استفاده کنید.</p>
</iframe>

برای جلوگیری از مشکلات دسترسی از aria-describedby برای ارجاع به توضیحات جانبی استفاده کنید.

7.2 فایل‌های خارجی با embed و object: ادغام اشیاء فنی

7.2.1 <embed>: عنصر ساده برای ادغام محتوای خارجی

این عنصر برای ادغام اشیاء خارجی مانند فایل‌های PDF، ویدئوها، فایل‌های صوتی، یا ابزارهای چندرسانه‌ای استفاده می‌شود.
ساده، بدون نیاز به تعریف مجدد منبع.
معایب شامل کمتر کنترل‌پذیر، بدون پشتیبانی قوی از دسترسی‌پذیری.

<embed 
 src="presentation.pdf" 
 type="application/pdf" 
 width="100%" 
 height="600px"
 title="اسلاید‌های ارائه"
/>

7.2.2 <object>: عنصر قابل تنظیم برای ادغام اشیاء

این عنصر یک جایگزین قوی‌تر و انعطاف‌پذیرتر از <embed> است.
می‌تواند شامل param برای پارامترهای فنی باشد.
پشتیبانی بهتر از دسترسی‌پذیری و مدیریت محتوای جایگزین.

<object 
 data="video.mp4" 
 type="video/mp4" 
 width="640" 
 height="360"
 title="ویدئوی آموزشی"
>
 <param name="autoplay" value="false">
 <param name="controls" value="true">
 <p>مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.</p>
</object>

امکان تعیین پارامترهای فنی با <param>
پشتیبانی از محتوای جایگزین (<p>)
بهترین انتخاب برای فایل‌های PDF، ویدئو، صوت، اسلاید و غیره

7.3 بررسی تگ‌های منسوخ‌شده HTML: از گذشته به آینده

7.3.1 <applet>: ماشین مجازی جاوا (Java Applet)

این تگ برای اجرای برنامه‌های جاوا در مرورگر استفاده می‌شد. این تگ منسوخ‌شده (Deprecated) در HTML5. دلایل منسوخ شدن:

مشکلات امنیتی (دارای سطح بالایی از آسیب‌پذیری‌ها)
عدم پشتیبانی از ابزارهای مدرن
کاهش استفاده از Java در وب

از استفاده از <applet> خودداری کنید. به جای آن از فریم‌ورک‌های مدرن مانند React - Vue یا WebAssembly استفاده کنید.

7.3.2 <frame> و <frameset>: چارچوب‌های صفحه (Frame-based Layouts)

این تگ‌ها برای تقسیم صفحه به چند بخش (frame) استفاده می‌شدند. منسوخ‌شده در HTML5. دلایل منسوخ شدن:

مشکلات دسترسی‌پذیری (Screen Readers نمی‌توانستند چارچوب‌ها را تشخیص دهند)
مشکلات ناوبری (URL هر چارچوب جداگانه بود)
عدم سازگاری با موبایل
امکان تداخل بین چارچوب‌ها

<frameset cols="25%,75%">
 <frame src="menu.html">
 <frame src="content.html">
</frameset>

استفاده از <section> - <aside> - <main> و CSS Grid/Flexbox برای ساختارهای چندبخشی استفاده از <iframe> برای ادغام محتوای خارجی در بخش‌های مختلف
یک صفحه وب موفق فقط با زیبایی ظاهری نیست بلکه با استفاده هوشمندانه از ادغام محتوا، مدیریت امنیتی، و اجتناب از فناوری‌های منسوخ‌شده ساخته می‌شود. این فصل پایه‌ای برای نوشتن محتوای چندرسانه‌ای معتبر، امن و متناسب با استانداردهای جهانی است.

بعدی قبلی