ആംഗുലർ ഉപയോഗിച്ച് ഒരു

Gerald Girard

2024, ഒക്‌ടോബർ 8, ചൊവ്വാഴ്ച 1:14:02 PM

കോണീയ ആപ്ലിക്കേഷനുകളിൽ Iframe റീലോഡുകൾ കൈകാര്യം ചെയ്യുന്നു
ആധുനിക വെബ് വികസനത്തിൽ, ഒരു കോണീയ പ്രോജക്റ്റിനുള്ളിൽ ഒരു PHP പേജ് പോലെയുള്ള ബാഹ്യ ആപ്ലിക്കേഷനുകൾ ഒരു iframe വഴി ഉൾച്ചേർക്കുന്നത് ഒരു സാധാരണ സമീപനമാണ്. എന്നിരുന്നാലും, ആ iframe-ൽ ഇവൻ്റുകൾ അല്ലെങ്കിൽ പേജ് റീലോഡുകൾ നിരീക്ഷിക്കാൻ ശ്രമിക്കുമ്പോൾ അത് വെല്ലുവിളികൾ അവതരിപ്പിക്കുന്നു, പ്രത്യേകിച്ചും നിങ്ങൾക്ക് PHP പ്രോജക്റ്റിൻ്റെ കോഡിലേക്ക് ആക്സസ് ഇല്ലെങ്കിൽ.
iframe ഉള്ളടക്കം പുതുക്കിയെടുക്കുമ്പോഴെല്ലാം നിങ്ങളുടെ ആംഗുലർ ആപ്ലിക്കേഷനിൽ ഒരു ലോഡിംഗ് സ്പിന്നർ പ്രദർശിപ്പിക്കേണ്ടിവരുമ്പോൾ അത്തരം ഒരു വെല്ലുവിളി ഉയർന്നുവരുന്നു. നിങ്ങൾക്ക് PHP കോഡ് പരിഷ്‌ക്കരിക്കാൻ കഴിയാത്തതിനാൽ, റീലോഡുകളോ iframe ഉള്ളടക്കത്തിലെ മാറ്റങ്ങളോ കണ്ടെത്തുന്നത് ബുദ്ധിമുട്ടാണ്. JavaScript വശത്ത് നിന്ന് iframe-ലെ മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യുന്നതിനുള്ള ഒരു മാർഗം കണ്ടെത്തുകയാണ് പ്രധാനം.
HTTP അഭ്യർത്ഥനകളോ റീലോഡുകളോ പോലുള്ള ഇവൻ്റുകൾ ശ്രദ്ധിക്കുന്ന ഒരു സ്‌ക്രിപ്റ്റ് iframe-ലേക്ക് കുത്തിവയ്ക്കാൻ കഴിയുമോ എന്ന് പല ഡവലപ്പർമാരും ആശ്ചര്യപ്പെടുന്നു, പ്രത്യേകിച്ചും നിങ്ങൾക്ക് കോഡിന്മേൽ നേരിട്ടുള്ള നിയന്ത്രണം ഇല്ലാത്ത ഒരു പ്രോജക്റ്റിൽ നിന്നാണ് iframe ഉറവിടം എങ്കിൽ. നിങ്ങളുടെ ആംഗുലർ ആപ്ലിക്കേഷനിൽ ജാവാസ്ക്രിപ്റ്റ് വഴി ഇത് ചെയ്യാൻ സാധ്യതയുണ്ട്.
ഈ ലേഖനത്തിൽ, ഒരു iframe-നുള്ളിലെ ഒരു PHP പേജ് വീണ്ടും ലോഡുചെയ്യുന്നത് കണ്ടെത്തുന്നതിനുള്ള സാധ്യമായ പരിഹാരങ്ങൾ ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും, കൂടാതെ അത്തരം മാറ്റങ്ങൾക്ക് പ്രതികരണമായി നിങ്ങൾക്ക് എങ്ങനെ ഒരു ലോഡിംഗ് സ്പിന്നർ നടപ്പിലാക്കാം. നിങ്ങൾക്ക് PHP കോഡിലേക്ക് തന്നെ ആക്‌സസ് ഇല്ലെങ്കിലും, JavaScript-ന് ക്രിയാത്മകമായ പരിഹാരങ്ങൾ നൽകാൻ കഴിയും.

കമാൻഡ് ഉപയോഗത്തിൻ്റെ ഉദാഹരണം

contentWindow iframe-ൻ്റെ വിൻഡോ ഒബ്‌ജക്‌റ്റ് ആക്‌സസ് ചെയ്യുന്നു, പാരൻ്റ് വിൻഡോയിൽ നിന്ന് iframe-ൻ്റെ DOM-ലേക്ക് സ്‌ക്രിപ്റ്റുകൾ കൈകാര്യം ചെയ്യാനോ ഇൻജക്റ്റ് ചെയ്യാനോ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണം: const iframe = document.querySelector("iframe").contentWindow;

addEventListener("load") iframe ലോഡുചെയ്യുകയോ വീണ്ടും ലോഡുചെയ്യുകയോ ചെയ്യുമ്പോൾ ഫയർ ചെയ്യുന്ന ഒരു ഇവൻ്റ് ലിസണർ രജിസ്റ്റർ ചെയ്യുന്നു. iframe ഉള്ളടക്കം മാറുമ്പോൾ ട്രാക്കുചെയ്യുന്നതിന് ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: iframe.addEventListener("ലോഡ്", ഫംഗ്‌ഷൻ() {...});

postMessage ഒരു iframe-ഉം അതിൻ്റെ പാരൻ്റ് വിൻഡോയും തമ്മിലുള്ള സുരക്ഷിത ആശയവിനിമയം പ്രവർത്തനക്ഷമമാക്കുന്നു, സന്ദേശങ്ങൾ അങ്ങോട്ടും ഇങ്ങോട്ടും കൈമാറാൻ അനുവദിക്കുന്നു. ഉദാഹരണം: parent.postMessage("iframeReloaded", "*");

XMLHttpRequest.prototype.open നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ഉണ്ടാകുമ്പോൾ കണ്ടെത്തുന്നതിന് ഒരു XMLHttpRequest-ൻ്റെ ഡിഫോൾട്ട് സ്വഭാവം അസാധുവാക്കുന്നു. iframe-ൽ ഒരു HTTP അഭ്യർത്ഥന ആരംഭിക്കുമ്പോഴെല്ലാം ഇഷ്‌ടാനുസൃത ലോജിക് കുത്തിവയ്ക്കാൻ സഹായകമാണ്. ഉദാഹരണം: XMLHttpRequest.prototype.open = ഫംഗ്‌ഷൻ() {...};

fetch ഒരു നെറ്റ്‌വർക്ക് അഭ്യർത്ഥന പുരോഗമിക്കുമ്പോൾ ഒരു സ്പിന്നർ പ്രദർശിപ്പിക്കുന്നതിന്, HTTP അഭ്യർത്ഥനകൾ നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന JavaScript Fetch API തടസ്സപ്പെടുത്തുന്നു. ഉദാഹരണം: window.fetch = ഫംഗ്‌ഷൻ() {...};

createElement DOM-ൽ ചലനാത്മകമായി ഒരു പുതിയ HTML ഘടകം സൃഷ്ടിക്കുന്നു. iframe-ൻ്റെ ഡോക്യുമെൻ്റിലേക്ക് സ്ക്രിപ്റ്റുകളോ മറ്റ് ഘടകങ്ങളോ കുത്തിവയ്ക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഉദാഹരണം: const script = iframe.document.createElement('script');

appendChild iframe-ൻ്റെ DOM ട്രീയിലേക്ക് ഒരു പുതിയ നോഡ് (സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ div പോലുള്ളവ) ചേർക്കുന്നു, iframe-ലേക്ക് JavaScript കുത്തിവയ്ക്കാൻ അനുവദിക്കുന്നു. ഉദാഹരണം: iframe.document.body.appendChild(script);

window.onload iframe-ൻ്റെ പേജ് പൂർണ്ണമായി ലോഡുചെയ്‌തുകഴിഞ്ഞാൽ ഒരു ഫംഗ്‌ഷൻ എക്‌സിക്യൂട്ട് ചെയ്യുന്നു, iframe ഒരു റീലോഡ് പൂർത്തിയാകുമ്പോൾ അറിയിപ്പുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നു. ഉദാഹരണം: window.onload = function() {...};

style.display അവരുടെ CSS ഡിസ്പ്ലേ പ്രോപ്പർട്ടി മാറ്റുന്നതിലൂടെ HTML ഘടകങ്ങളുടെ (സ്പിന്നർമാരെ പോലെ) ദൃശ്യപരത കൈകാര്യം ചെയ്യുന്നു. പേജ് ലോഡ് ചെയ്യുമ്പോൾ സ്പിന്നർ ദൃശ്യപരത ടോഗിൾ ചെയ്യുന്നതിന് ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: document.getElementById("സ്പിന്നർ").style.display = "ബ്ലോക്ക്";

കമാൻഡ്	ഉപയോഗത്തിൻ്റെ ഉദാഹരണം
contentWindow	iframe-ൻ്റെ വിൻഡോ ഒബ്‌ജക്‌റ്റ് ആക്‌സസ് ചെയ്യുന്നു, പാരൻ്റ് വിൻഡോയിൽ നിന്ന് iframe-ൻ്റെ DOM-ലേക്ക് സ്‌ക്രിപ്റ്റുകൾ കൈകാര്യം ചെയ്യാനോ ഇൻജക്റ്റ് ചെയ്യാനോ നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണം: const iframe = document.querySelector("iframe").contentWindow;
addEventListener("load")	iframe ലോഡുചെയ്യുകയോ വീണ്ടും ലോഡുചെയ്യുകയോ ചെയ്യുമ്പോൾ ഫയർ ചെയ്യുന്ന ഒരു ഇവൻ്റ് ലിസണർ രജിസ്റ്റർ ചെയ്യുന്നു. iframe ഉള്ളടക്കം മാറുമ്പോൾ ട്രാക്കുചെയ്യുന്നതിന് ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: iframe.addEventListener("ലോഡ്", ഫംഗ്‌ഷൻ() {...});
postMessage	ഒരു iframe-ഉം അതിൻ്റെ പാരൻ്റ് വിൻഡോയും തമ്മിലുള്ള സുരക്ഷിത ആശയവിനിമയം പ്രവർത്തനക്ഷമമാക്കുന്നു, സന്ദേശങ്ങൾ അങ്ങോട്ടും ഇങ്ങോട്ടും കൈമാറാൻ അനുവദിക്കുന്നു. ഉദാഹരണം: parent.postMessage("iframeReloaded", "*");
XMLHttpRequest.prototype.open	നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ഉണ്ടാകുമ്പോൾ കണ്ടെത്തുന്നതിന് ഒരു XMLHttpRequest-ൻ്റെ ഡിഫോൾട്ട് സ്വഭാവം അസാധുവാക്കുന്നു. iframe-ൽ ഒരു HTTP അഭ്യർത്ഥന ആരംഭിക്കുമ്പോഴെല്ലാം ഇഷ്‌ടാനുസൃത ലോജിക് കുത്തിവയ്ക്കാൻ സഹായകമാണ്. ഉദാഹരണം: XMLHttpRequest.prototype.open = ഫംഗ്‌ഷൻ() {...};
fetch	ഒരു നെറ്റ്‌വർക്ക് അഭ്യർത്ഥന പുരോഗമിക്കുമ്പോൾ ഒരു സ്പിന്നർ പ്രദർശിപ്പിക്കുന്നതിന്, HTTP അഭ്യർത്ഥനകൾ നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന JavaScript Fetch API തടസ്സപ്പെടുത്തുന്നു. ഉദാഹരണം: window.fetch = ഫംഗ്‌ഷൻ() {...};
createElement	DOM-ൽ ചലനാത്മകമായി ഒരു പുതിയ HTML ഘടകം സൃഷ്ടിക്കുന്നു. iframe-ൻ്റെ ഡോക്യുമെൻ്റിലേക്ക് സ്ക്രിപ്റ്റുകളോ മറ്റ് ഘടകങ്ങളോ കുത്തിവയ്ക്കാൻ ഇത് ഉപയോഗിക്കുന്നു. ഉദാഹരണം: const script = iframe.document.createElement('script');
appendChild	iframe-ൻ്റെ DOM ട്രീയിലേക്ക് ഒരു പുതിയ നോഡ് (സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ div പോലുള്ളവ) ചേർക്കുന്നു, iframe-ലേക്ക് JavaScript കുത്തിവയ്ക്കാൻ അനുവദിക്കുന്നു. ഉദാഹരണം: iframe.document.body.appendChild(script);
window.onload	iframe-ൻ്റെ പേജ് പൂർണ്ണമായി ലോഡുചെയ്‌തുകഴിഞ്ഞാൽ ഒരു ഫംഗ്‌ഷൻ എക്‌സിക്യൂട്ട് ചെയ്യുന്നു, iframe ഒരു റീലോഡ് പൂർത്തിയാകുമ്പോൾ അറിയിപ്പുകൾ പ്രവർത്തനക്ഷമമാക്കുന്നു. ഉദാഹരണം: window.onload = function() {...};
style.display	അവരുടെ CSS ഡിസ്പ്ലേ പ്രോപ്പർട്ടി മാറ്റുന്നതിലൂടെ HTML ഘടകങ്ങളുടെ (സ്പിന്നർമാരെ പോലെ) ദൃശ്യപരത കൈകാര്യം ചെയ്യുന്നു. പേജ് ലോഡ് ചെയ്യുമ്പോൾ സ്പിന്നർ ദൃശ്യപരത ടോഗിൾ ചെയ്യുന്നതിന് ഉപയോഗപ്രദമാണ്. ഉദാഹരണം: document.getElementById("സ്പിന്നർ").style.display = "ബ്ലോക്ക്";

കോണിൽ ഐഫ്രെയിം റീലോഡുകൾ കണ്ടെത്തുന്നതിനുള്ള പരിഹാരങ്ങൾ പര്യവേക്ഷണം ചെയ്യുന്നു

ആദ്യ സ്ക്രിപ്റ്റിൽ, പ്രധാന ആശയം കേൾക്കുക എന്നതാണ് iframe-ൻ്റെ ഇവൻ്റ്. iframe-ൻ്റെ ഉള്ളടക്കം മാറുമ്പോഴോ വീണ്ടും ലോഡുചെയ്യുമ്പോഴോ ഓരോ തവണയും ലോഡ് ഇവൻ്റ് ട്രിഗർ ചെയ്യപ്പെടുന്നു. ഈ ഇവൻ്റ് ഉപയോഗിക്കുന്നതിലൂടെ, iframe-നുള്ളിലെ PHP പേജ് പുതുക്കിയെടുക്കുമ്പോൾ നമുക്ക് കണ്ടെത്താനാകും. തുടക്കത്തിൽ, ഫംഗ്ഷൻ വിളിക്കുന്നതിലൂടെ ലോഡിംഗ് സ്പിന്നർ കാണിക്കുന്നു . iframe ഉള്ളടക്കം പൂർണ്ണമായി ലോഡ് ചെയ്തുകഴിഞ്ഞാൽ, the സ്പിന്നറെ മറയ്ക്കാൻ ഫംഗ്ഷൻ വിളിക്കുന്നു. ഈ രീതി വളരെ കാര്യക്ഷമമാണ്, കാരണം ഇതിന് PHP കോഡിലേക്ക് ആക്‌സസ് ആവശ്യമില്ല, കൂടാതെ iframe-ൻ്റെ അവസ്ഥയെ ആശ്രയിക്കുന്നു.

രണ്ടാമത്തെ പരിഹാരം iframe-ലേക്ക് നേരിട്ട് JavaScript കുത്തിവച്ചുകൊണ്ട് കൂടുതൽ വിപുലമായ സമീപനം സ്വീകരിക്കുന്നു. iframe's ആക്‌സസ് ചെയ്യുന്നതിലൂടെ , iframe-ൻ്റെ DOM-ൽ നമുക്ക് ചലനാത്മകമായി ഒരു സ്‌ക്രിപ്റ്റ് ഘടകം സൃഷ്‌ടിക്കാനും ചേർക്കാനും കഴിയും. ഈ സ്‌ക്രിപ്‌റ്റ് ഐഫ്രെയിമിനുള്ളിലെ PHP പേജ് ആരംഭിച്ച എല്ലാ HTTP അഭ്യർത്ഥനകളും ട്രാക്ക് ചെയ്യുന്നു. കൂടാതെ . iframe-നുള്ളിലെ നെറ്റ്‌വർക്ക് പ്രവർത്തനം നിരീക്ഷിക്കുകയും അത്തരം പ്രവർത്തനം നടക്കുമ്പോൾ ലോഡിംഗ് സ്പിന്നർ പ്രദർശിപ്പിക്കുകയും ചെയ്യുക എന്നതാണ് ഇവിടെ ലക്ഷ്യം. HTTP അഭ്യർത്ഥനകൾ നടത്തിയ കൃത്യമായ നിമിഷം ട്രാക്ക് ചെയ്യുന്നതിലൂടെ ഈ സമീപനം കൂടുതൽ ഗ്രാനുലാർ നിയന്ത്രണം വാഗ്ദാനം ചെയ്യുന്നു.

മൂന്നാമത്തെ രീതി പ്രയോജനപ്പെടുത്തുന്നു ഐഫ്രെയിമും പാരൻ്റ് ആംഗുലർ ആപ്ലിക്കേഷനും തമ്മിലുള്ള ആശയവിനിമയം അനുവദിക്കുന്ന API. ഈ സാഹചര്യത്തിൽ, ലോഡിംഗ് പൂർത്തിയാകുമ്പോഴെല്ലാം iframe രക്ഷിതാവിന് ഒരു സന്ദേശം അയയ്ക്കുന്നു. പാരൻ്റ് വിൻഡോ ഈ സന്ദേശങ്ങൾ ശ്രദ്ധിക്കുകയും അതിനനുസരിച്ച് സ്പിന്നറെ കാണിക്കുകയോ മറയ്ക്കുകയോ ചെയ്യുന്നു. postMessage ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനം, iframe-ൻ്റെ ആന്തരിക കോഡിലേക്ക് നിങ്ങൾക്ക് ആക്‌സസ് ഇല്ലെങ്കിൽ പോലും, വിൻഡോകൾക്കിടയിൽ വിവരങ്ങൾ കൈമാറുന്നതിനുള്ള ഒരു സുരക്ഷിത മാർഗമാണിത്. രക്ഷിതാവും iframe ഉം വ്യത്യസ്ത ഡൊമെയ്‌നുകളിൽ നിന്ന് വരുന്ന ക്രോസ്-ഒറിജിൻ ഐഫ്‌രെയിമുകൾക്ക് ഇത് അനുയോജ്യമാണ്.

ഈ പരിഹാരങ്ങളിൽ ഓരോന്നിനും അതിൻ്റേതായ ശക്തികളുണ്ട്, കൂടാതെ രീതി തിരഞ്ഞെടുക്കുന്നത് നിങ്ങൾക്ക് ആവശ്യമായ നിയന്ത്രണ നിലവാരത്തെയും iframe-ൻ്റെ പെരുമാറ്റത്തെയും ആശ്രയിച്ചിരിക്കുന്നു. ലോഡ് ഇവൻ്റ് ലിസണർ ലളിതമാണ്, എന്നാൽ മുഴുവൻ റീലോഡുകളും കണ്ടെത്തുന്നതിന് മാത്രമേ ഇത് പ്രവർത്തിക്കൂ. iframe-ലേക്ക് ഒരു സ്‌ക്രിപ്റ്റ് കുത്തിവയ്ക്കുന്നത് അതിൻ്റെ പ്രവർത്തനത്തെക്കുറിച്ച് കൂടുതൽ വിശദമായ ഉൾക്കാഴ്ചകൾ നൽകുന്നു, എന്നാൽ സ്‌ക്രിപ്റ്റ് ചേർക്കൽ അനുവദിക്കുന്നതിന് iframe ആവശ്യമാണ്. ഒടുവിൽ, ദി ക്രോസ്-ഡൊമെയ്ൻ ആശയവിനിമയം കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഒരു ശക്തമായ പരിഹാരമാണ് രീതി, കൂടാതെ നിർദ്ദിഷ്ട iframe ഇവൻ്റുകളെക്കുറിച്ച് രക്ഷിതാവിനെ അറിയിക്കാനും കഴിയും. ഈ രീതികൾ PHP കോഡിലേക്ക് നേരിട്ട് ആക്സസ് ആവശ്യമില്ലാതെ iframe അവസ്ഥയിലെ മാറ്റങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള വഴക്കമുള്ള വഴികൾ നൽകുന്നു.

പരിഹാരം 1: "ലോഡ്" ഇവൻ്റ് ഉപയോഗിച്ച് iframe റീലോഡ് നിരീക്ഷിക്കുന്നു

iframe-ൻ്റെ "ലോഡ്" ഇവൻ്റ് കേൾക്കാൻ ഈ പരിഹാരം JavaScript ഉപയോഗിക്കുന്നു, iframe വീണ്ടും ലോഡുചെയ്യുമ്പോഴോ ഉള്ളടക്കം മാറ്റുമ്പോഴോ കണ്ടെത്തുന്നു.

// Select the iframe element by its ID or query selector
const iframe = document.getElementById("myIframe");
// Function to display the spinner
function showSpinner() {
  document.getElementById("spinner").style.display = "block";
}
// Function to hide the spinner
function hideSpinner() {
  document.getElementById("spinner").style.display = "none";
}
// Add event listener for the iframe's load event
iframe.addEventListener("load", function() {
  hideSpinner();
});
// Display the spinner initially before iframe reload completes
showSpinner();
// HTML: Loading spinner (CSS or image-based)
<div id="spinner" style="display: none;">Loading...</div>

പരിഹാരം 2: നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ട്രാക്ക് ചെയ്യുന്നതിനായി JavaScript ഇഞ്ചെക്റ്റ് ചെയ്യുന്നു iframe

ഏതെങ്കിലും HTTP അഭ്യർത്ഥനകളോ റീലോഡുകളോ കണ്ടെത്തുന്നതിന് ഈ രീതി iframe-ലേക്ക് ഒരു സ്ക്രിപ്റ്റ് കുത്തിവയ്ക്കുന്നു, നിങ്ങൾക്ക് iframe-ൽ നിന്ന് പേജിലെ മാറ്റങ്ങളോ റീലോഡുകളോ ട്രാക്കുചെയ്യേണ്ടിവരുമ്പോൾ ഉപയോഗപ്രദമാണ്.

// Access the iframe's content window
const iframe = document.querySelector("iframe").contentWindow;
// Create a script to inject into the iframe
const script = iframe.document.createElement('script');
// JavaScript to track network requests
script.textContent = `
  (function() {
    const oldFetch = window.fetch;
    window.fetch = function() {
      document.querySelector('#spinner').style.display = 'block';
      return oldFetch.apply(this, arguments);
    };
    const oldXHR = window.XMLHttpRequest;
    XMLHttpRequest.prototype.open = function() {
      document.querySelector('#spinner').style.display = 'block';
      oldXHR.open.apply(this, arguments);
    };
  })();`;
// Append the script to the iframe's document
iframe.document.body.appendChild(script);

പരിഹാരം 3: iframe ഉം രക്ഷിതാക്കളും തമ്മിൽ ആശയവിനിമയം നടത്താൻ പോസ്റ്റ്‌മെസേജ് ഉപയോഗിക്കുന്നു

ഐഫ്രെയിമും പാരൻ്റ് വിൻഡോയും തമ്മിൽ ആശയവിനിമയം നടത്താൻ ഈ സമീപനം "പോസ്റ്റ്മെസേജ്" എപിഐ ഉപയോഗിക്കുന്നു, ഐഫ്രെയിമിലെ റീലോഡുകളോ മാറ്റങ്ങളോ രക്ഷിതാവിനെ അറിയിക്കുന്നു.

// Parent script (Angular application)
const iframe = document.querySelector("iframe");
// Listen for messages from the iframe
window.addEventListener("message", function(event) {
  if (event.data === "iframeReloaded") {
    document.getElementById("spinner").style.display = "none";
  }
});
// Iframe script to post a message on reload
const iframeScript = document.createElement('script');
iframeScript.textContent = `
  window.onload = function() {
    parent.postMessage("iframeReloaded", "*");
  };`;
// Inject the script into the iframe
iframe.contentWindow.document.body.appendChild(iframeScript);

കോണിലുള്ള ഐഫ്രെയിം മാറ്റങ്ങൾ നിരീക്ഷിക്കുന്നതിനുള്ള വിപുലമായ സാങ്കേതിക വിദ്യകൾ

ഒരു iframe-ലെ മാറ്റങ്ങൾ കണ്ടെത്തുന്നതിനുള്ള മറ്റൊരു രസകരമായ സാങ്കേതികതയാണ് ഉപയോഗിക്കുന്നത് API. പുതിയ നോഡുകൾ ചേർക്കുമ്പോഴോ നീക്കം ചെയ്യുമ്പോഴോ പോലുള്ള DOM ട്രീയിലെ മാറ്റങ്ങൾ നിരീക്ഷിക്കാൻ ഈ API നിങ്ങളെ അനുവദിക്കുന്നു. PHP പേജ് റീലോഡ് ചെയ്യുമ്പോൾ ഇത് നിങ്ങളെ നേരിട്ട് അറിയിക്കില്ലെങ്കിലും, iframe-ൻ്റെ ഉള്ളടക്കത്തിലെ മാറ്റങ്ങൾ കണ്ടെത്താൻ ഇത് സഹായിക്കും. ഉദാഹരണത്തിന്, ഒരു റീലോഡിന് ശേഷം iframe-ലെ ചില ഘടകങ്ങൾ മാറ്റിസ്ഥാപിക്കുകയോ അപ്ഡേറ്റ് ചെയ്യുകയോ ചെയ്താൽ, the മ്യൂട്ടേഷൻ ഒബ്സർവർ ആ മാറ്റങ്ങൾ പിടിച്ചെടുക്കാനും അതിനനുസരിച്ച് സ്പിന്നറെ ട്രിഗർ ചെയ്യാനും കഴിയും.

കൂടാതെ, പോലുള്ള ബ്രൗസർ ഇവൻ്റുകൾ പ്രയോജനപ്പെടുത്തുന്നു അല്ലെങ്കിൽ iframe എപ്പോൾ റീലോഡ് ചെയ്യാൻ പോകുന്നുവെന്ന് കണ്ടെത്താൻ സഹായിക്കും. പേജ് അൺലോഡ് ചെയ്യുമ്പോൾ അല്ലെങ്കിൽ നിലവിലെ പേജിൽ നിന്ന് ഒരു നാവിഗേഷൻ ആരംഭിക്കുമ്പോൾ ഈ ഇവൻ്റുകൾ ഫയർ ചെയ്യുന്നു. iframe-നുള്ളിൽ ഈ ഇവൻ്റുകളിലേക്ക് ഇവൻ്റ് ശ്രോതാക്കളെ ചേർക്കുന്നതിലൂടെ, ഒരു റീലോഡ് സംഭവിക്കാൻ പോകുകയാണെന്ന് നിങ്ങൾക്ക് പാരൻ്റ് വിൻഡോയെ അറിയിക്കാനാകും, സ്പിന്നർ ശരിയായ സമയത്ത് കാണിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക. മറ്റ് സമീപനങ്ങളുമായി സംയോജിപ്പിക്കുമ്പോൾ ഈ രീതി മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു, ഇത് ഒരു സമഗ്രമായ പരിഹാരം നൽകുന്നു.

അവസാനമായി, മാറ്റങ്ങൾ പരിശോധിക്കുന്നതിനുള്ള ഒരു രീതിയായി iframe പോളിംഗ് ഉപയോഗിക്കുന്നത് നിങ്ങൾക്ക് പരിഗണിക്കാവുന്നതാണ്. ഈ രീതിയിൽ, പാരൻ്റ് ആംഗുലാർ ആപ്പ് ഇടയ്ക്കിടെ പരിശോധിക്കുന്നു ഉള്ളടക്കം മാറിയിട്ടുണ്ടോ അല്ലെങ്കിൽ വീണ്ടും ലോഡുചെയ്‌തിട്ടുണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ URL അല്ലെങ്കിൽ iframe-ലെ മറ്റ് നിർദ്ദിഷ്ട ഘടകങ്ങൾ. ഈ സമീപനത്തിന് കാര്യക്ഷമത കുറവായിരിക്കാമെങ്കിലും, പ്രത്യേകിച്ച് പ്രകടനത്തിൻ്റെ കാര്യത്തിൽ, മറ്റ് രീതികൾ പ്രായോഗികമല്ലാത്തപ്പോൾ ഇത് ഒരു ഫാൾബാക്ക് ഓപ്ഷനാണ്. പോൾ ചെയ്യുന്നത് പേജിലെ എല്ലാ മാറ്റങ്ങളും കണ്ടെത്താനായേക്കില്ല, എന്നാൽ നിർദ്ദിഷ്ട സാഹചര്യങ്ങൾക്ക് അത് ഉപയോഗപ്രദമാകും.

ഒരു iframe റീലോഡ് എനിക്ക് എങ്ങനെ കണ്ടെത്താനാകും?
നിങ്ങൾക്ക് ഉപയോഗിക്കാം ഒരു iframe വീണ്ടും ലോഡുചെയ്യുമ്പോഴോ അതിൻ്റെ ഉള്ളടക്കം മാറുമ്പോഴോ കണ്ടെത്താനുള്ള ഇവൻ്റ്.
iframe-ൽ നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ നിരീക്ഷിക്കാൻ കഴിയുമോ?
അതെ, iframe-ലേക്ക് ഒരു സ്ക്രിപ്റ്റ് കുത്തിവയ്ക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് അസാധുവാക്കാനാകും ഒപ്പം HTTP അഭ്യർത്ഥനകൾ ട്രാക്ക് ചെയ്യുന്നതിനുള്ള രീതികൾ.
iframe-ഉം പാരൻ്റ് വിൻഡോയും തമ്മിൽ ആശയവിനിമയം നടത്താൻ എനിക്ക് postMessage ഉപയോഗിക്കാമോ?
അതെ, ദി ഐഫ്രെയിമും അതിൻ്റെ പാരൻ്റ് വിൻഡോയും തമ്മിൽ സുരക്ഷിതമായ ആശയവിനിമയം API അനുവദിക്കുന്നു, അവയ്‌ക്കിടയിൽ സന്ദേശം കൈമാറുന്നത് സാധ്യമാക്കുന്നു.
iframe-ലേക്ക് JavaScript കുത്തിവയ്ക്കാൻ എനിക്ക് കഴിയുന്നില്ലെങ്കിൽ എന്തുചെയ്യും?
നിങ്ങൾക്ക് JavaScript കുത്തിവയ്ക്കാൻ ആക്‌സസ് ഇല്ലെങ്കിൽ, API അല്ലെങ്കിൽ iframe-ൽ നിന്നുള്ള രീതി (അത് പിന്തുണയ്ക്കുന്നുവെങ്കിൽ) സാധ്യതയുള്ള ഇതരമാർഗങ്ങളാണ്.
iframe മാറ്റങ്ങൾ കണ്ടുപിടിക്കാൻ MutationObserver എങ്ങനെ സഹായിക്കുന്നു?
ദി DOM-ലെ മാറ്റങ്ങൾ API നിരീക്ഷിക്കുന്നു, റീലോഡ് ചെയ്തതിന് ശേഷം iframe-ലെ ഘടകങ്ങൾ മാറുമ്പോൾ അത് നിങ്ങളെ അറിയിക്കും.

ക്രിയേറ്റീവ് ജാവാസ്ക്രിപ്റ്റ് സൊല്യൂഷനുകൾ ഉപയോഗിച്ച് അടിസ്ഥാന PHP കോഡിലേക്ക് നേരിട്ടുള്ള ആക്സസ് ഇല്ലാതെ iframe റീലോഡുകൾ നിരീക്ഷിക്കുന്നത് സാധ്യമാക്കാം. ഇവൻ്റ് ലിസണർമാർ, കുത്തിവച്ച സ്‌ക്രിപ്റ്റുകൾ അല്ലെങ്കിൽ പോസ്റ്റ്‌മെസേജ് API എന്നിവ ഉപയോഗിച്ചാലും, ഡെവലപ്പർമാർക്ക് അവരുടെ ആംഗുലർ ആപ്ലിക്കേഷനുകൾ റെസ്‌പോൺസ് ആയി തുടരുന്നത് ഉറപ്പാക്കാനുള്ള ഓപ്‌ഷനുകൾ ഉണ്ട്.

പ്രോജക്റ്റിൻ്റെ സങ്കീർണ്ണതയും iframe-ൻ്റെ നിയന്ത്രണവും അനുസരിച്ച് ഓരോ സമീപനത്തിനും അതിൻ്റേതായ ശക്തികളുണ്ട്. നിങ്ങളുടെ നിർദ്ദിഷ്ട കേസിന് ഏറ്റവും മികച്ച പരിഹാരം ഉപയോഗിക്കുന്നതിലൂടെ, iframe ഉള്ളടക്ക മാറ്റങ്ങളിൽ വിശ്വസനീയമായ സ്പിന്നർ അറിയിപ്പുകളിലൂടെ നിങ്ങൾക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകാനാകും.

iframe ഇവൻ്റുകൾ നിരീക്ഷിക്കുന്നതും ക്രോസ്-ഒറിജിൻ ആശയവിനിമയവും സംബന്ധിച്ച വിശദമായ ഡോക്യുമെൻ്റേഷൻ ഇവിടെ കാണാം MDN വെബ് ഡോക്‌സ് - postMessage API .
DOM മാറ്റങ്ങൾക്കായി MutationObserver ഉപയോഗിക്കുന്നതിനെക്കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക്, കാണുക MDN വെബ് ഡോക്‌സ് - മ്യൂട്ടേഷൻ ഒബ്‌സർവർ .
iframes-ലേക്ക് JavaScript കുത്തിവയ്ക്കുന്നതിനുള്ള സാങ്കേതിക വിദ്യകൾ പര്യവേക്ഷണം ചെയ്യാൻ, ഈ ഉറവിടം പരിശോധിക്കുക StackOverflow - iframe-ലേക്ക് JavaScript കുത്തിവയ്ക്കുക .

ആംഗുലർ ഉപയോഗിച്ച് ഒരു ഐഫ്രെയിമിൽ PHP പേജ് റീലോഡ് ചെയ്യുന്നത് കണ്ടെത്തുന്നു

കോണിൽ ഐഫ്രെയിം റീലോഡുകൾ കണ്ടെത്തുന്നതിനുള്ള പരിഹാരങ്ങൾ പര്യവേക്ഷണം ചെയ്യുന്നു

പരിഹാരം 1: "ലോഡ്" ഇവൻ്റ് ഉപയോഗിച്ച് iframe റീലോഡ് നിരീക്ഷിക്കുന്നു

പരിഹാരം 2: നെറ്റ്‌വർക്ക് അഭ്യർത്ഥനകൾ ട്രാക്ക് ചെയ്യുന്നതിനായി JavaScript ഇഞ്ചെക്റ്റ് ചെയ്യുന്നു iframe

പരിഹാരം 3: iframe ഉം രക്ഷിതാക്കളും തമ്മിൽ ആശയവിനിമയം നടത്താൻ പോസ്റ്റ്‌മെസേജ് ഉപയോഗിക്കുന്നു

കോണിലുള്ള ഐഫ്രെയിം മാറ്റങ്ങൾ നിരീക്ഷിക്കുന്നതിനുള്ള വിപുലമായ സാങ്കേതിക വിദ്യകൾ