iframe क्या है?

एक <iframe> (inline frame) एक HTML element है जो वर्तमान पृष्ठ के अंदर किसी अन्य वेब पृष्ठ या दस्तावेज़ को embed करता है। यह पृष्ठ के एक आयताकार क्षेत्र के भीतर एक अलग browsing context बनाता है, जिससे एक अलग URL से content — जैसे कि मानचित्र, वीडियो, या third-party widget — को बिना उपयोगकर्ता को दूर किए प्रदर्शित किया जा सकता है।

Iframes आमतौर पर YouTube वीडियो, Google Maps, payment forms, social media widgets, और विज्ञापन banners को embed करने के लिए उपयोग किए जाते हैं। चूंकि embedded content अपने स्वयं के context में चलता है, sandbox और allow जैसी attributes developers को यह नियंत्रित करने देती हैं कि embedded पृष्ठ क्या कर सकता है।

Tool विवरण

यह tool एक सरल form से तुरंत paste करने के लिए तैयार <iframe> HTML code generate करता है। source URL, dimensions, scrolling behavior, loading strategy, permissions, और sandbox restrictions को configure करें, और tool तुरंत संबंधित tag output करता है। कोई manual attribute-writing या sandbox flag syntax को याद रखने की आवश्यकता नहीं है।

उदाहरण

न्यूनतम iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Lazy-loaded iframe sandbox के साथ:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Camera और microphone permissions के साथ iframe:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

विशेषताएं

  • एक visual form से valid <iframe> code generate करता है — कोई HTML ज्ञान आवश्यक नहीं है
  • permissions (allow) और sandbox restrictions पर पूर्ण नियंत्रण
  • Live preview जो किसी भी option को बदलने पर update होता है

विकल्प समझाया गया

विकल्प विवरण
URL src attribute — embed करने के लिए पृष्ठ का पता
Width / Height iframe के pixel dimensions
Title Accessible label (title attribute) screen readers के लिए
Name name attribute, link target के रूप में उपयोग किया जाता है
Scrolling Scrollbar को नियंत्रित करता है: auto, हमेशा on, या हमेशा off
Loading eager तुरंत load करता है; lazy viewport के पास होने तक defer करता है
Allow fullscreen allowfullscreen जोड़ता है ताकि embedded content fullscreen जा सके
Border जब unchecked हो, default border को हटाने के लिए style="border: none;" जोड़ता है
Allow features Embedded पृष्ठ को specific browser API permissions देता है
Sandbox flags Embedded पृष्ठ को प्रतिबंधित करता है; प्रत्येक flag एक specific capability को फिर से enable करता है

सुझाव

  • Accessibility के लिए हमेशा title attribute प्रदान करें — screen readers इसे iframe पर focus करते समय घोषित करते हैं।
  • Page load performance में सुधार के लिए fold के नीचे iframes के लिए loading="lazy" का उपयोग करें।
  • sandbox attribute को बिना flags के जोड़ने से content पूरी तरह से lock हो जाता है; केवल वे flags जोड़ें जिनकी आपको वास्तव में आवश्यकता है।