როგორ გამოიყენეთ iframe ელემენტი თქვენს პროექტებში?

გამოყენება <iframe>-ის:

• შენიშვნა სხვა დომენებიდან: მესამე მხარის ვიჯეტების ჩაშენება (რუკები, ვიდეოპლეერები), რეკლამა ბლოკები, სერვისებთან ინტეგრაციები.
• გამოყოფილი გარემოების შექმნა: მესამე მხარის JavaScript კოდის ან სტილების გაშვება უშიშროების რისკის გარეშე. მაგალითად, სანდბოქსის გამოყენება მომხმარებლის კონტენტის ნახვის ან კოდის რედაქტორების გაშვების დროს.
• მეზდომენური ურთიერთქმედება: მონაცემების გადაცემა მშობელ გვერდსა და <iframe> შიგთავსს შორის window.postMessage-ის გამოყენებით.
• სტატიკური HTML გვერდების ჩაშენება: საიტის ან დოკუმენტის ნაწილის ჩვენება სრული ნავიგაციის გარეშე.

window.postMessage გამოყენების მაგალითი:

მშობელი გვერდი:

// შეტყობინების გაგზავნა iframe-კენ
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('გამარჯობა მშობელიდან', '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('გამარჯობა 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> შიგთავსი ინდექსირდება საძიებო სისტემებით ცალკე.