Ինչպե՞ս եք օգտագործել iframe տարրն ձեր նախագծերում։

Օգտագործել <iframe>՝

• Ներկայացման բովանդակություն այլ դոմեններից՝ արտաքին վիդջեթների (արտապատկերներ, տեսահոլովակներ), գովազդային բլոկների, ծառայությունների ինտեգրացիաների ներդրում:
• Ստեղծել առանձնացված միջավայրեր՝ արտաքին JavaScript-կոդ կամ ոճեր գործարկելու համար առանց հիմնական էջի ազդեցության ռիսկի: Օրինակ՝ օգտագործողի բովանդակության դիտման կամ կոդի խմբագիրների գործարկման համար:
• Միջդոմենային փոխազդեցություն՝ տվյալների փոխանցում ծնողական էջի և <iframe> բովանդակության միջև window.postMessage օգտագործելով:
• Ստատիկ HTML-էջերի ներդրում՝ կայքի կամ փաստաթղթի մաս ցուցադրելու համար առանց ամբողջական նավիգացիայի:

Օրինակ՝ window.postMessage օգտագործմամբ:

Ծնող էջը:

// հաղորդագրություն ուղարկում iframe-ին
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('hello from parent', 'https://trusted-domain.com');

// հաղորդագրություն ընդունում iframe-ից
window.addEventListener('message', (event) => {
  // անվտանգության համար աղբյուրի ստուգում
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Հաղորդագրություն iframe-ից:', event.data);
  }
});

iframe-ի ներսի էջը:

// հաղորդագրություն ընդունում ծնողական էջից
window.addEventListener('message', (event) => {
  // անվտանգության համար աղբյուրի ստուգում
  if (event.origin === 'https://parent-domain.com') {
    console.log('Հաղորդագրություն ծնողից:', event.data);

    // պատասխան ուղարկում ծնողական էջին
    event.source.postMessage('hello from iframe', event.origin);
  }
});

Տեսահոլովակի ներդրման օրինակ:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

<iframe>-ի հետ աշխատելիս միշտ ուշադրություն դարձնում էի անվտանգության հարցերին, հատկապես sandboxատրիբուտին և event.origin ստուգմանը window.postMessage օգտագործելիս: Նշում էի նաև SEO-պարամետրերը, քանի որ <iframe> բովանդակությունը առանձին ինդեքսավորվում է որոնողական համակարգերով։