Get best of the week

Comprehensive iframe tag guide

iframe tag

The iframe element (short for built-in frame) is probably one of the oldest HTML tags and was introduced back in 1997 in Microsoft 4. Explorer HTML 4.01.


Although all modern browsers support this tag, many developers write endless articles without recommending it. I believe that the bad reputation that has formed around this tag should not stop you from using it. This tag has many good examples. In addition, iframes are not so difficult to protect, so you don’t have to worry about infecting your user’s computer.


To help you form your own opinion and hone your developer skills, we’ll talk about everything you need to know about this contradictory tag.


, 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-lockAPI (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-sensorAmbientLightSensor
autoplay
batteryAPI
camera
fullscreen
geolocationAPI
gyroscopeSensors API Gyroscope.
magnetometerAPI
microphone
midi-MIDI API
paymentAPI
usbAPI WebUSB
vibrateAllows 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 . :



. , 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();

I hope this guide has helped you improve your knowledge of frames.
Although they may be unsafe if you download untrustworthy content, they also offer some significant benefits. Therefore, you should not completely exclude them from your developing arsenal, but use them only in appropriate situations.


If you have something to add to this article, you can contact me in the comments below or just ping me on Twitter @RifkiNada


Let's make the web better.

More articles:


All Articles