Get best of the week

Guía completa de etiquetas de iframe

etiqueta de iframe

El elemento iframe (abreviatura de marco integrado) es probablemente una de las etiquetas HTML más antiguas y se introdujo en 1997 en Microsoft 4. Explorer HTML 4.01.


Aunque todos los navegadores modernos admiten esta etiqueta, muchos desarrolladores escriben artículos interminables sin recomendarlo. Creo que la mala reputación que se ha formado alrededor de esta etiqueta no debería impedir que la uses. Esta etiqueta tiene muchos buenos ejemplos. Además, los iframes no son tan difíciles de proteger, por lo que no tiene que preocuparse por infectar la computadora de su usuario.


Para ayudarlo a formar su propia opinión y perfeccionar sus habilidades de desarrollador, hablaremos sobre todo lo que necesita saber sobre esta etiqueta contradictoria.


, 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
Le permite establecer el contenido del marco directamente en el atributo. El valor debe tener la sintaxis HTML correcta, opcionalmente contener <!DOCTYPE> y <html> , así como cualquier número de espacios, saltos de línea, comentarios y otros elementos. Cuando se utilizan los atributos src y srcdoc al mismo tiempo , se ignora el atributo 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();

Espero que esta guía te haya ayudado a mejorar tu conocimiento de los marcos.
Aunque pueden ser inseguros si descarga contenido no confiable, también ofrecen algunos beneficios significativos. Por lo tanto, no debe excluirlos por completo de su arsenal en desarrollo, sino usarlos solo en situaciones apropiadas.


Si tiene algo que agregar a este artículo, puede contactarme en los comentarios a continuación o simplemente enviarme un ping en Twitter @RifkiNada


Hagamos que la web sea mejor.

More articles:


All Articles