Get best of the week

Guide complet des balises iframe

balise iframe

L'élément iframe (abréviation de frame intégré) est probablement l'une des balises HTML les plus anciennes et a été introduit en 1997 dans Microsoft Internet Explorer HTML 4.01.


Bien que tous les navigateurs modernes prennent en charge cette balise, de nombreux développeurs écrivent des articles sans fin sans la recommander. Je pense que la mauvaise réputation qui s'est formée autour de cette balise ne devrait pas vous empêcher de l'utiliser. Cette balise contient de nombreux bons exemples. De plus, les iframes ne sont pas si difficiles à protéger, vous n'avez donc pas à vous soucier d'infecter l'ordinateur de votre utilisateur.


Pour vous aider à vous faire votre propre opinion et à perfectionner vos compétences de développeur, nous parlerons de tout ce que vous devez savoir sur cette balise contradictoire.


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

J'espère que ce guide vous a aidé à améliorer vos connaissances sur les cadres.
Bien qu'ils puissent être dangereux si vous téléchargez du contenu non fiable, ils offrent également des avantages importants. Par conséquent, vous ne devez pas les exclure complètement de votre arsenal en développement, mais les utiliser uniquement dans des situations appropriées.


Si vous avez quelque chose à ajouter à cet article, vous pouvez me contacter dans les commentaires ci-dessous ou simplement me cingler sur Twitter @RifkiNada


Améliorons le Web.

More articles:


All Articles