درج محتوای اکسترنال در صفحات وب

مقدمه

در دو درس قبل دیدیم که چطور می‌توانیم مدیاهایی مانند تصاویر، صداها و ویدیوها را در صفحات وب قرار دهیم. در این درس قصد داریم با نحوه‌ی قرار دادن انواع دیگری از محتواهای خارجی که برای پخش یا نمایش نیازمند پلاگین‌ها هستند، در صفحات وب آشنا شویم. در این راستا با سه عنصر دیگر از استاندارد HTML با نام‌های embed، object و iframe و نقش هر یک از این عناصر آشنا خواهیم شد.

جاسازی یک اپلیکیشن یا محتوای اینتراکتیو در صفحه

عنصر embed ناحیه‌ای را به عنوان مخزنی برای یک اپلیکیشن خارجی (external) یا محتوای تعاملی (interactive) که معمولاً برای اجرا یا پخش به یک پلاگین نیاز دارد، تعربف می‌کند، به نحوی که فایل یا محتوای خارجی مورد نظر را بتوان یه صورت یکپارچه با کدهای صفحه در نظر گرفت. در صورت عدم نصب پلاگین مورد نیاز روی مرورگر کاربر، امکان اجرای محتوای خارجی جاسازی‌شده توسط عنصر embed وجود ندارد.

با وجودی که اکثر مرورگرهای وب سالهاست که از عنصر embed پشتیبانی می‌کنند اما این عنصر از زمان انتشار HTML5 به مستندات این زبان اضافه شده و تا قبل از آن، استفاده از عنصر embed باعث می‌شد تا صفحه‌ی وب ما غیر استاندارد باشد.

HTML

<embed src="helloworld.swf">

همانطور که می‌بینید، برای ارجاع به محتوای خارجی مورد نظر از یک صفت src استفاده می‌شود. سایر صفت‌های استاندارد عنصر embed عبارتند از:

• src: آدرس فایل یا منبع مورد نظر را برای جاسازی در صفحه مشخص می‌کند.
• type: از این صفت برای اعلام نوع مدیا یا MIME type منبع جاسازی‌شده استفاده می‌شود.
• width: این صفت برای تعیین عرض ناحیه‌ی دربردارنده‌ی منبع جاسازی‌شده کاربرد دارد.
• height: برای تعیین ارتفاع ناحیه‌ی دربردارنده‌ی منبع جاسازی‌شده کاربرد دارد.

در کد زیر، چگونگی درج یا جاسازي یک فایل .mov را با استفاده از عنصر embed و صفت‌های آن می‌بینید.

HTML

<embed
   type="video/quicktime"
   src="movie.mov"
   width="640"
   height="480"
   title="Title of video">

همانطور که می‌بینید، در مثال بالا از صفت عمومی title نیز برای نمایش متنی به عنوان tooltip برای ویدیوی جاسازی شده استفاده شده است. این کار باعث می‌شود که کاربران ابزارهای صفحه‌خوان نیز بتوانند اطلاعاتی در مورد محتوای جاسازی‌شده بدست بیاورند.

جاسازی منابع خارجی در صفحه

با استفاده از عنصر object می‌توانیم یک منبع خارجی را که معمولاً برای اجرا به یک پلاگین نیاز دارد، درون صفحه جاسازی کنیم. البته این عنصر را می‌توان برای جاسازی یک عکس، یک ویدیو و یا یک صفحه‌ی وب دیگر نیز به کار گرفت اما بهتر است که برای عکس‌ها از عنصر img و برای ویدیوها از عنصر video و برای صفحات وب دیگر از عنصر iframe استفاده کنیم.

HTML

<object
   type="application/pdf"
   data="sample.pdf"
   width="320"
   height="240">
</object>

همانطور که می‌بینید، صفت object برای تعیین منبع مورد نظر از صفتی با نام data استفاده می‌کند. صفت type هم که نقش اعلام نوع مدیای منبع خارجی جاسازی‌شده را دارد.

جاسازی یک صفحه‌ی وب درون صفحه‌ی جاری

نام عنصر iframe از روی عبارت inline frame گرفته شده و برای نمایش یک browsing context به صورت تودرتو شده کاربرد دارد. در حقیقت، عنصر iframe تا حدی همانند عناصر object و embed است اما به جای اپلیکیشن‌ها و فایل‌های نیازمند پلاگین، سند HTML دیگری را درون صفحه جاسازی می‌کند.

HTML

<iframe src="https://google.com" width="800" height="600">
  If you can see this message, your browser doesn't support iframe.
</iframe>

عنصر iframe علاوه بر صفت‌های عمومی، از تعدادی صفت دیگر نیز پشتیبانی می‌کند که از این قرارند:

• src: این صفت تعیین‌کننده‌ی سندی است که باید درون صفحه جاسازی شود. طبیعتاً مقداری که این صفت دریافت می‌کند، آدرس url سند مورد نظر است.
• width: از این صفت برای تعیین اندازه‌ی عرض فریم حاوی سند مورد نظر استفاده می‌شود. مقدار این صفت را باید به صورت یک عدد صحیح بدون واحد وارد کرد و این مقدار به صورت خودکار بر حسب پیکسل در نظر گرفته می‌شود.
• height: از این صفت برای تعیین اندازه‌ی ارتفاع فریم حاوی سند مورد نظر استفاده می‌شود. مقدار این صفت را باید به صورت یک عدد صحیح بدون واحد وارد کرد و این مقدار به صورت خودکار بر حسب پیکسل در نظر گرفته می‌شود.
• name: با استفاده از این صفت می‌توانیم مقداری را به عنوان نام فریم تعریف کنیم. یک عنصر a می‌تواند با وارد کردن نام یک فریم برای صفت target خود، ترتیبی بدهد تا سند لینک‌شده به جای نمایش در یک زبانه یا پنجره‌ی مرورگر، در این فریم نمایش داده شود.
• loading: این صفت، تعیین‌کننده‌ی نحوه‌ی بارگذاری فریم است و می‌تواند یکی از مقادیر eager یا lazy را دریافت کند که اولی به معنای بارگذاری سریع و بدون تأخیر فریم است و دومی به معنای تعویق بارگذاری فریم تا زمانی است که کاربر با پیمایش یا اسکرول صفحه به فاصله‌ی مشخصی از فریم برسد.
• referrerpolicy: این صفت، تعیین‌کننده‌ی نوع و میزان اطلاعاتی است که هدر referer هنگام واکشی منبع فریم با خود حمل می‌کند. قبلاً در مورد مقادیر قابل تخصیص به این صفت صحبت کرده‌ایم.
• allow: این صفت مربوط به Feature Policy است که مکانیزمی است برای کنترل ویژگی‌های در دسترس برای هر مبدأ (origin). به عبارت دیگر، این مکانیزم به ما امکان می‌دهد که تعیین کنیم هر مبدأ به چه ویژگی‌هایی دسترسی داشته باشد. روش پیاده‌سازی این مکانیزم برای فریم‌های درونی صفحه، استفاده از صفت allow است. توضیحات بیشتر در مورد این صفت، نیازمند درک مکانیزم Feature-Policy است که به بحث مفصلی نیاز دارد.
• srcdoc: با استفاده از این صفت می‌توانیم محتوای HTML را برای نمایش در فریم مشخص کنیم. بنابراین، این صفت مقداری کد HTML را به عنوان مقدار دریافت می‌کند. اگر برای یک عنصر iframe از این صفت استفاده کنیم، صفت src نادیده گرفته می‌شود.
• csp: از این صفت برای تحمیل CSP یا Content Security Policy به منبع جاسازی‌شده درون فریم استفاده می‌شود.
• sandbox: از این صفت برای اعمال برخی محدودیت‌ها روی سند درون فریم استفاده می‌شود. اگر از این صفت بدون اینکه هیچ مقداری را به آن اختصاص دهیم، استفاده کنیم، مرورگر همه‌ی ویژگی‌هایی را که می‌توانند خطر بالقوه‌ای داشته باشند و یا اینکه برای کاربر آزار دهنده باشند، بلاک کرده و اجازه‌ی دسترسی به آنها را نمی‌دهد. اما اگر یک لیست از مقادیر زیر که با فاصله از هم جدا شده‌اند، به صفت sandbox اختصاص داده شود، محدودیت مربوط به هر مقدار حذف شده و ویژگی متناظر آن قابل استفاده خواهد بود. به عبارت دیگر، اعطای هر یک از مقادیر زیر به صفت sandbox باعث می‌شود که ویژگی مربوط به آن مقدار از محدودیت معاف شده و در دسترس باشد.
  • allow-forms: تأیید (submit) فرم برای منبع درون فریم مجاز است. در غیاب این مقدار، تأیید فرم برای منبع ممکن نیست.
  • allow-modals: منبع جاسازی‌شده درون فریم مجاز به باز کردن کادرهای محاوره ای modal است.
  • allow-orientation-lock: منبع جاسازی‌شده درون فریم مجاز به قفل کردن جهت صفحه ی نمایش روی یکی از حالت‌های portrait یا landscape است.
  • allow-pointer-lock: Pointer Lock نام یک API است که استفاده از این مقدار به معنای مجاز شمردن استفاده از این API توسط منبع جاسازی‌شده است.
  • allow-popups: باز شدن پنجره‌های جدید (برای مثال با تخصیص مقدار _blank به صفت target) برای سند جاسازی‌شده مجاز است.
  • allow-popups-to-escape-sandbox: سندی که درون فریم جاسازی شده، می‌تواند پنجره‌های جدیدی را باز کند که محدودیت‌های اعمال شده روی سند جاسازی‌شده، روی آنها اعمال نشود و به عبارتی، آن محدویتها را به ارث نبرند.
  • allow-presentation: استفاده از یک API با نام Presentation که برای کنترل دستگاه‌های نمایش‌دهنده‌ای مانند پروژکتورها یا تلویزیون‌ها کاربرد دارد، مجاز است.
  • allow-same-origin: اگر از این مقدار استفاده نکنیم، با سند جاسازی‌شده طوری رفتار می‌شود که انگار از یک مبدأ خاصی است که هیچ‌وقت در سیاست مبدأ واحد (same origin policy) صدق نمی‌کند.
  • allow-scripts: اجرای اسکریپت‌ها برای سند جاسازی‌شده مجاز است.
  • allow-top-navigation: به منبع اجازه‌ی پیمایش top level browsing context داده می‌شود.
  • allow-top-navigation-by-user-activation: به منبع اجازه‌ی پیمایش top level browsing context داده می‌شود، منتها به شرطی که این کار به اشاره‌ی یک کاربر باشد.