👩🏻‍🤝‍👨🏿 👩🏽‍💻 ‼️ व्यापक आइफ्रेम टैग गाइड 👨🏽‍💼 🥖 🍷

Iframe तत्व (अंतर्निहित फ़्रेम के लिए छोटा) संभवतः सबसे पुराने HTML टैग्स में से एक है और इसे 1997 में Microsoft 4. एक्सप्लोरर HTML 4.01 में वापस पेश किया गया था।

हालांकि सभी आधुनिक ब्राउज़र इस टैग का समर्थन करते हैं, लेकिन कई डेवलपर्स इसकी सिफारिश किए बिना अंतहीन लेख लिखते हैं। मेरा मानना है कि इस टैग के चारों ओर जो खराब प्रतिष्ठा है, उसे आपको इसका उपयोग करने से नहीं रोकना चाहिए। इस टैग के कई अच्छे उदाहरण हैं। इसके अलावा, iframes को सुरक्षित रखना इतना मुश्किल नहीं है, इसलिए आपको अपने उपयोगकर्ता के कंप्यूटर को संक्रमित करने की चिंता नहीं करनी चाहिए।

अपनी खुद की राय बनाने और अपने डेवलपर कौशल को सुधारने में आपकी मदद करने के लिए, इस विरोधाभासी टैग के बारे में आपको जो कुछ भी जानना चाहिए, हम उसके बारे में बात करेंगे।

, iframe, , , , iframe . , , iframe, .

iframe ?

iframe HTML- .

, , (, «» Facebook), YouTube, -.

, 500px Google:

<iframe src="https://www.google.com/" height="500px" width="500px"></iframe>

, , - Twitter:

<iframe src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"></iframe>

iframe, , HTML- . , JavaScript CSS . iframe — iframe.

, , .Iframe .
— .

(* -, )

, JavaScript CSS, :

1) . , . CSS- , , iframe srcdoc . .

<iframe srcdoc="<html><body>The content you see here will never be affected by the CSS of its parent container. It supposed to be rendered in black on a white background.</body></html>"></iframe>

* srcdoc

. HTML, <!DOCTYPE> <html> , , , . src srcdoc, src .

2) , iframe , , WYSIWYG- . , , .

iframe , , , . iframe ( ), .

, iframe

, iframe.

<iframe

  src="https://google.com/"    <!--      --> 

  srcdoc="<p>Some html</p>"    <!--  HTML-    --> 

  height="100px"               <!--   iframe   -->

  width="100px"                <!--   iframe   -->

  name="my-iframe"          <!--   iframe (        JavaScript -->

  allow="fullscreen"           <!--     iframe.-->

  referrerpolicy="no-referrer" <!--        iframe -->

  sandbox="allow-same-origin"  <!--   iframe (   ) -->
></iframe>

, , , HTML5: align, frameborder, longdesc, marginheight, marginwidth scrolling…

*. iframe . , style, CSS border none.

<iframe src="https://logrocket.com/" style="border: none;"></iframe>

iframe

iframe , . iframe, , . , , :

load event — c . , iframe . , , DOM load.

— error event .

onload onerror :

<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>

, iframe .

//   iframe
const iframe = document.createElement("iframe");

iframe.onload = function() {
  console.log("iframe ");
};
iframe.onerror = function() {
  console.log("-   , ,  !");
};

iframe.src = "https://logrocket.com/";
document.body.appendChild(iframe);

//   iframe
const iframe = document.querySelector('.my-iframe');

iframe.onload = function() {
  console.log("iframe ");
}
iframe.onerror = function() {
  console.log("-   , ,  !");
}

iframe. postMessage, MDN .

const myiframe = document.getElementById('myIframe');

myIframe.contentWindow.postMessage('message', '*');

iframe:

window.onmessage = function(event){
    if (event.data == 'message') {
        console('Message received!');
    }
};

iframe

iframe:

window.top.postMessage('reply', '*')

window.onmessage = function(event){
    if (event.data == 'reply') {
        console('Reply received!');
    }
};

: , , - , (fire-and-forget) ( . — ).

iframe, , , .

, (, ).

, .

sandbox () allow() .

! , — , . « ».

sandbox


allow-forms
allow-modals
allow-orientation-lock	.
allow-pointer-lock	API (Pointer Lock API)
allow-popups	.
allow-popups-to-escape-sandbox	, .
allow-presentation	.
allow-same-origin	.
allow-scripts	.
allow-top-navigation	.
allow-top-navigation-by-user-activation	, .

, iframe.

, iframe , :

<iframe sandbox="allow-forms allow-modals" src="https://www.something.com/"></iframe>

, , , .
, , .
, , «» «» iframe.

, JavaScript iframe , (*, ).

, , .

<iframe sandbox="allow-forms allow-modals" src="https://www.something.com/"></iframe>

. Internet Explorer 9 .

allow

allow Chromium. , iframe , .

25 , . Mozilla.


accelerometer
ambient-light-sensor	AmbientLightSensor
autoplay
battery	API
camera
fullscreen
geolocation	API
gyroscope	Sensors API Gyroscope.
magnetometer	API
microphone
midi	-MIDI API
payment	API
usb	API WebUSB
vibrate	Allows access to the Vibration API

,

iframe, , <iframe> </ iframe>.

, , .

<iframe>
  <p>      iframe</p>
</iframe>

, iframe (.. )?

seamless. ( Chromium).

* W3C HTML5 .

<iframe seamless src="https://logrocket.com/"></iframe>

iframes SEO ?

, . .

iframes, . , , , :

“ , -, , , — . Iframes, , . “

, , , iframes, Google. , , Googlebot .

. , .

?

iframe , , . iframe, , , .

, , (.. , , , ). , loading = «lazy».

, Chromium . lazyload, .

<iframe src = "https://logrocket.com/" loading = "lazy"> </ iframe>

. loading = «lazy» img, .

iframe ?

, , , . , ?

iframe . :

(, ) , , iframe HTML CSS.
, iframe , .
Iframe Resizer, , , , .

. , embed-responsive embed-responsive-16by9, , .

<div class="embed-responsive embed-responsive-16by9">
  <iframe src="https://logrocket.com/" loading="lazy"></iframe>
</div>

iframe

, , . , iframes CSS- , , .

iframe

! iframe contentWindow, :

// Get the iframe
const iframe = document.getElementById('myIframe');  
// Reload the iframe
iframe.contentWindow.location.reload();

मुझे उम्मीद है कि इस गाइड ने आपको फ़्रेम के अपने ज्ञान को बेहतर बनाने में मदद की है।
यद्यपि वे असुरक्षित हो सकते हैं यदि आप अविश्वसनीय सामग्री डाउनलोड करते हैं, तो वे कुछ महत्वपूर्ण लाभ भी प्रदान करते हैं। इसलिए, आपको उन्हें अपने विकासशील शस्त्रागार से पूरी तरह से बाहर नहीं करना चाहिए, लेकिन उनका उपयोग केवल उपयुक्त स्थितियों में करना चाहिए।

अगर आपको इस लेख में कुछ जोड़ना है, तो आप मुझे नीचे टिप्पणी में संपर्क कर सकते हैं या ट्विटर @RifkiNada पर मुझसे संपर्क कर सकते हैं

वेब को बेहतर बनाते हैं।

व्यापक आइफ्रेम टैग गाइड

iframe ?

, iframe

iframe

sandbox

allow

,

, iframe (.. )?

iframes SEO ?

?

iframe ?

iframe

iframe

More articles: