Loyihalaringizda iframe elementidan qanday foydalandingiz?

Men <iframe> dan foydalanardim:

• Boshqa domenalardan kontentni ko‘rsatish uchun: Tashqi vidjetlar (xaritalar, video pleerlar), reklama bloklari, xizmatlar bilan integratsiya qilish.
• Izolyatsiya muhitlarini yaratish uchun: Asosiy sahifaga ta’sir qilmasdan tashqi JavaScript kodlari yoki uslublarini ishga tushirish. Masalan, foydalanuvchi kontentini ko‘rib chiqish yoki kod muharrirlarini ishga tushirish uchun sandbox.
• Domenlararo o‘zaro ta’sir: window.postMessage yordamida ota sahifa va <iframe> mazmuni o‘rtasida ma’lumotlarni uzatish.
• Statik HTML sahifalarni joylashtirish: Sayt yoki hujjatning bir qismini to‘liq navigatsiyasiz ko‘rsatish.

window.postMessage bilan foydalanish misoli:

Ota sahifa:

// iframe ga xabar yuborish
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('salom ota tomonidan', 'https://trusted-domain.com');

// iframe dan xabar olish
window.addEventListener('message', (event) => {
  // Xabar manbasini xavfsizlik uchun tekshirish
  if (event.origin === 'https://trusted-domain.com') {
    console.log('iframe dan xabar:', event.data);
  }
});

iframe ichidagi sahifa:

// ota sahifadan xabar olish
window.addEventListener('message', (event) => {
  // Xabar manbasini xavfsizlik uchun tekshirish
  if (event.origin === 'https://parent-domain.com') {
    console.log('ota sahifadan:', event.data);

    // ota sahifaga javob yuborish
    event.source.postMessage('salom iframe dan', event.origin);
  }
});

Video joylash uchun misol:

<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> bilan ishlashda, xavfsizlik masalalariga, ayniqsa sandbox atributi va event.origin ni tekshirishga e’tibor berish muhim. Shuningdek, SEO aspektlarini ham hisobga olish kerak, chunki <iframe> mazmuni qidiruv tizimlari tomonidan indekslanadi.