Get best of the week

全面的iframe广告代码指南

iframe广告代码

iframe元素（内置框架的缩写）可能是最古老的HTML标记之一，并于1997年在Microsoft 4中引入。Explorer HTML 4.01。


尽管所有现代浏览器都支持此标记，但是许多开发人员在不推荐它的情况下写了很多文章。我相信围绕此标签形成的不良声誉不应阻止您使用它。这个标签有很多很好的例子。此外，iframe的保护并不是那么容易，因此您不必担心会感染用户的计算机。


为了帮助您形成自己的见解并磨练开发人员的技能，我们将讨论您需要了解的有关此矛盾标签的所有内容。


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

希望本指南对您提高框架知识有帮助。
尽管如果您下载不可信的内容，它们可能不安全，但它们也提供了一些明显的好处。因此，您不应将它们完全排除在正在发展的军火库中，而应仅在适当情况下使用它们。


如果您需要对本文进行补充，可以在下面的评论中与我联系，或者在Twitter @RifkiNada上ping我


让我们改善网络。

More articles:


All Articles