O elemento iframe (abreviação de quadro interno) é provavelmente uma das tags HTML mais antigas e foi introduzido em 1997 no Microsoft 4. Explorer HTML 4.01.
Embora todos os navegadores modernos suportem essa tag, muitos desenvolvedores escrevem artigos sem fim sem recomendá-la. Acredito que a má reputação que se formou em torno dessa tag não deve impedi-lo de usá-la. Essa tag tem muitos bons exemplos. Além disso, os iframes não são tão difíceis de proteger, portanto você não precisa se preocupar em infectar o computador do usuário.
Para ajudar você a formar sua própria opinião e aprimorar suas habilidades de desenvolvedor, falaremos sobre tudo o que você precisa saber sobre essa tag contraditória.
, 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>"
height="100px"
width="100px"
name="my-iframe"
allow="fullscreen"
referrerpolicy="no-referrer"
sandbox="allow-same-origin"
></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
:
, 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.
:
,
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 este guia tenha ajudado a melhorar seu conhecimento de quadros.
Embora possam ser inseguros se você baixar conteúdo não confiável, eles também oferecem alguns benefícios significativos. Portanto, você não deve excluí-los completamente do seu arsenal em desenvolvimento, mas usá-los apenas em situações apropriadas.
Se você tem algo a acrescentar a este artigo, pode entrar em contato comigo nos comentários abaixo ou simplesmente fazer ping no Twitter @RifkiNada
Vamos melhorar a web.