وثائق HTML قابلة للتشغيل: وسم iframe

Q: لماذا يقول iframe إن الموقع رفض الاتصال؟

يرسل الموقع ترويسة X-Frame-Options أو Content-Security-Policy: frame-ancestors تمنع المواقع الأخرى من تأطيره. مواقع كثيرة تفعل ذلك لمنع هجمات clickjacking. لا يمكنك تجاوز ذلك من صفحتك، فاستخدم عنوان التضمين الرسمي للموقع إن وُجد.

Q: كيف أزيل حدود iframe؟

اضبط border: 0 في CSS. السمة القديمة frameborder="0" مهجورة، مع أن كثيرًا من شيفرات التضمين المنسوخة ما زالت تحتويها.

Q: كيف أجعل iframe متجاوبًا؟

أعطه width: 100% وaspect-ratio في CSS، مثل aspect-ratio: 16 / 9 للفيديو، ولا تضع ارتفاعًا ثابتًا. عندها يتكيف iframe مع حاويته ويحافظ على شكله.

Q: ما وظيفة السمة sandbox في iframe؟

السمة sandbox الفارغة تمنع السكربتات وإرسال النماذج والنوافذ المنبثقة وغيرها داخل الإطار، وتعامل محتواه كأنه من مصدر فريد. ثم تسمح فقط بما يحتاجه التضمين بكلمات مثل allow-scripts أو allow-forms.

كيف تستخدم iframe

<iframe> يعرض صفحة أخرى داخل صفحتك. أعطه عنوان الصفحة في src، وtitle يصفها، وحجمًا:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

يحمّل الإطار الصفحة كمستند منفصل، بتنسيقاته وسكربتاته الخاصة. الأمثلة في هذه الصفحة تستخدم srcdoc بدلًا من src، فتضع HTML الإطار مباشرة في السمة، فتعمل من دون تحميل موقع آخر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

الفقرة الخارجية زرقاء وعريضة، أما الفقرة داخل الإطار فلا، رغم أن قاعدة p نفسها موجودة في الصفحة. التنسيقات لا تعبر حدود الإطار أبدًا، في أي من الاتجاهين. الحد الافتراضي والحجم الافتراضي 300×150 يأتيان من المتصفح، والسمتان width وheight تتجاوزان الحجم.

تضمين فيديو YouTube أو خريطة

مواقع الفيديو وخدمات الخرائط تعطيك شيفرة iframe جاهزة. في YouTube اضغط Share ثم Embed:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

في Google Maps افتح المكان، واضغط Share، ثم Embed a map، وانسخ iframe بالطريقة نفسها. أبقِ title (تعلنه قارئات الشاشة عند الدخول إلى الإطار) واستبدل الأحجام الثابتة بـ CSS المتجاوب أدناه. السمة allow تمنح الإطار ميزات مثل التشغيل التلقائي أو ملء الشاشة، وهي متوقفة افتراضيًا للصفحات المضمّنة.

الحجم والحدود والإطارات المتجاوبة

شيفرات التضمين المنسوخة تستخدم أحجامًا ثابتة بالبكسل تفيض على الهواتف. width: 100% مع aspect-ratio تجعل الإطار يملأ حاويته ويحافظ على شكله، وborder: 0 تزيل الحد الغائر الافتراضي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

غيّر max-width: 480px إلى قيمة أخرى وسيحافظ الإطار على شكله 16:9 عند كل عرض. احذف border: 0 لترى الحد الافتراضي للمتصفح. السمات القديمة frameborder وscrolling وmarginheight مهجورة، فاستخدم CSS.

sandbox: حدّ مما يستطيع الإطار فعله

يستطيع الإطار تشغيل السكربتات وإرسال النماذج وفتح النوافذ المنبثقة مثل أي صفحة. السمة sandbox تنزع منه هذه القدرات، فـ sandbox الفارغة تمنع كل شيء تقريبًا، وكل كلمة تعيد قدرة واحدة. الإطاران أدناه يحصلان على HTML نفسه مع سكربت صغير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

يحتفظ الإطار الأول بنصه المؤقت لأن سكربته لا يعمل أبدًا (تسجل وحدة تحكم Chrome رسالة «Blocked script execution» له). استخدم sandbox كلما أطّرت محتوى لا تثق به تمامًا، مثل HTML يكتبه المستخدمون، وأضف فقط الكلمات التي يحتاجها:

الكلمة	تسمح بـ
`allow-scripts`	تشغيل JavaScript
`allow-forms`	إرسال النماذج
`allow-popups`	`window.open` وروابط `target="_blank"`
`allow-modals`	`alert()` و`confirm()` و`prompt()`
`allow-same-origin`	معاملة المحتوى كمصدره الحقيقي (ملفات تعريف الارتباط، التخزين)
`allow-top-navigation`	نقل التبويب كله بعيدًا عن صفحتك

لا تجمع أبدًا بين allow-scripts وallow-same-origin لمحتوى من مصدرك نفسه: إذ يستطيع السكربت المؤطَّر حينها إزالة الـ sandbox عن نفسه.

التواصل مع الإطار: postMessage

الصفحة الخارجية والإطار مستندان منفصلان. حين يختلف مصدراهما لا يستطيع أحدهما لمس DOM الآخر، لكنهما يستطيعان تبادل الرسائل. اكتب رسالة وأرسلها إلى داخل الإطار:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

في الشيفرة الحقيقية، مرّر المصدر الدقيق للإطار (مثل 'https://maps.example.com') بدلًا من '*'، وتحقق من e.origin لدى المستقبل، كي لا تذهب الرسائل إلا إلى الموقع الذي تتوقعه ولا تأتي إلا منه.

الأداء وحين يرفض الموقع

التحميل الكسول. أضف loading="lazy" إلى الإطارات البعيدة في أسفل الصفحة، فلا يحمّلها المتصفح إلا حين يقترب القارئ منها بالتمرير. كل iframe تحميل صفحة كاملة، فالصفحة الكثيرة التضمينات تصبح بطيئة من دونها.
«Refused to connect». مواقع كثيرة (البنوك، ومعظم الشبكات الاجتماعية، وبحث Google) ترسل ترويسة X-Frame-Options أو frame-ancestors تمنع التأطير، فيعرض المتصفح خطأ داخل الإطار. لا تستطيع صفحتك تجاوز ذلك. استخدم عنوان التضمين الرسمي للموقع، أو رابطًا.
إمكانية الوصول. اضبط title دائمًا. بها يسمّي قارئ الشاشة الإطار، والصفحة ذات الإطارات المتعددة بلا عناوين صعبة التنقل.

أخطاء شائعة

غياب title. تعلن قارئات الشاشة الإطار بلا اسم.
عروض ثابتة من شيفرة تضمين منسوخة. استبدلها بـ width: 100% وaspect-ratio.
تأطير ملف فيديو عادي. لملف .mp4 الخاص بك استخدم عنصر video، فعناصر iframe للصفحات.
الثقة بالمحتوى المؤطَّر. أضف sandbox لأي شيء لم تكتبه بنفسك.
توقع أن ينسّق CSS الخارجي الإطار. نسّق الصفحة المؤطَّرة من داخلها.

الأسئلة الشائعة

ما هو iframe في HTML؟

<iframe> (إطار مضمّن) صندوق يعرض صفحة ويب منفصلة داخل الصفحة الحالية. له مستنده وتنسيقاته وسكربتاته الخاصة، ولهذا يُستخدم للتضمينات مثل الفيديوهات والخرائط والإعلانات ومعاينات الشيفرة.

كيف أضمّن فيديو YouTube بـ iframe؟

في YouTube اختر Share ثم Embed وانسخ الشيفرة. هي iframe قيمة src فيه https://www.youtube.com/embed/ مضافًا إليها معرّف الفيديو. أبقِ السمتين title وallowfullscreen، واستخدم aspect-ratio: 16 / 9 مع width: 100% في CSS لجعله متجاوبًا.

لماذا يقول iframe إن الموقع رفض الاتصال؟

يرسل الموقع ترويسة X-Frame-Options أو Content-Security-Policy: frame-ancestors تمنع المواقع الأخرى من تأطيره. مواقع كثيرة تفعل ذلك لمنع هجمات clickjacking. لا يمكنك تجاوز ذلك من صفحتك، فاستخدم عنوان التضمين الرسمي للموقع إن وُجد.

كيف أزيل حدود iframe؟

اضبط border: 0 في CSS. السمة القديمة frameborder="0" مهجورة، مع أن كثيرًا من شيفرات التضمين المنسوخة ما زالت تحتويها.

كيف أجعل iframe متجاوبًا؟

أعطه width: 100% وaspect-ratio في CSS، مثل aspect-ratio: 16 / 9 للفيديو، ولا تضع ارتفاعًا ثابتًا. عندها يتكيف iframe مع حاويته ويحافظ على شكله.

ما وظيفة السمة sandbox في iframe؟

السمة sandbox الفارغة تمنع السكربتات وإرسال النماذج والنوافذ المنبثقة وغيرها داخل الإطار، وتعامل محتواه كأنه من مصدر فريد. ثم تسمح فقط بما يحتاجه التضمين بكلمات مثل allow-scripts أو allow-forms.

مفاهيم ذات صلة