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

آمل أن يكون هذا الدليل قد ساعدك على تحسين معرفتك بالإطارات.
على الرغم من أنها قد تكون غير آمنة إذا قمت بتنزيل محتوى غير موثوق به ، إلا أنها توفر أيضًا بعض الفوائد المهمة. لذلك ، لا يجب استبعادها تمامًا من ترسانتك النامية ، ولكن استخدمها فقط في المواقف المناسبة.


إذا كان لديك شيء لإضافته إلى هذه المقالة ، يمكنك الاتصال بي في التعليقات أدناه أو فقط الاتصال بي على TwitterRifkiNada


دعونا نجعل الويب أفضل.

More articles:


All Articles