Ինչպե՞ս է տեղի ունենում տվյալների փոխանակումը iframe և հիմնական էջի միջև։

Կան մի քանի մեթոդներ տվյալների փոխանակման համար:

1. PostMessage API:

   • հիմնական և անվտանգ միջոց:
   • թույլ է տալիս ուղարկել հաղորդագրություններ պատուհանների միջև (iframe/հորինական, տարբեր դոմեններ)
   • կարևոր է նշել սպասվող origin, որպեսզի կանխել XSS հարձակումները:

   // Ուղարկում հորինական պատուհանից iframe-ին
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Բարև հորից!', 'https://trusted-domain.com');
   
   // Ստացվում է iframe-ում
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Ստուգում ուղարկողին
       }
       console.log('Ստացված հաղորդագրություն iframe-ում:', event.data);
   });
   
   // Ուղարկում iframe-ից հորինական պատուհանին
   window.parent.postMessage('Բարև iframe-ից!', 'https://parent-domain.com');
   
   // Ստացվում է հորինական պատուհանում
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Ստուգում ուղարկողին
       }
       console.log('Ստացված հաղորդագրություն հորից:', event.data);
   });
   

2. Ճանապարհ դեպի window օբյեկտ (միայն Same-Origin համար):

   • Եթե iframe-ն և հորինական էջը նույն դոմենում են (Same-Origin Policy), նրանք կարող են ուղղակիորեն մուտք ունենալ միմյանց window օբյեկտները:

   // Հորինական պատուհանում
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Արժեք հորից';
   iframeWindow.someFunction();
   
   // iframe-ում
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • պարզ, բայց սահմանափակ միջոց:
   • կարող է փոխանցել փոքր տվյալներ, փոփոխելով hash-ը iframe-ի URL-ում
   • փոփոխությունները hash-ը չեն թարմացնում էջը
   • պահանջում է հետևել hash-ի փոփոխությանը (օրինակ, hashchange իրադարձության միջոցով)

   // Հորինական պատուհանում՝ hash-ը փոխելու համար
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=մեկ_արժեք';
   
   // iframe-ում՝ hash-ը կարդալու համար
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash փոխվեց:', hash);
       // տվյալների վերլուծում hash-ից
   });
   

4. location.href փոփոխություն (պակաս առաջարկվող):

   • տվյալների փոխանցում URL-ի փոփոխությամբ և կրկնակի բեռնումով
   • չի հարմար հաճախակի փոխանակման համար

5. Կիսվող պահոցներ (Same-Origin):

   • localStorage և sessionStorage
   • եթե iframe-ն և հորինական էջը նույն դոմենում են, կարող են օգտագործել նույն պահոցները

   // Հորինական պատուհանում
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Օրինակ' }));
   
   // iframe-ում
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Տվյալներ localStorage-ից:', data);
   

Ընտրությունը կախված է անվտանգության քաղաքականությունից (Same-Origin Policy) և փոխանցվող տվյալների ծավալից/տիպից: PostMessage-ը առավել ճկուն և անվտանգ լուծում է տարբեր դոմենների միջև տվյալների փոխանակման համար։