கோணத்தைப் பயன்படுத்தி ஒரு இஃப்ரேமில் PHP பக்கத்தை மீண்டும் ஏற்றுவதைக் கண்டறிதல்

கோண பயன்பாடுகளில் ஐஃப்ரேம் ரீலோடுகளைக் கையாளுதல்

நவீன வலை வளர்ச்சியில், ஒரு PHP பக்கம் போன்ற வெளிப்புற பயன்பாடுகளை ஒரு கோண திட்டத்திற்குள் iframe மூலம் உட்பொதிப்பது ஒரு பொதுவான அணுகுமுறையாகும். இருப்பினும், அந்த iframe க்குள் நிகழ்வுகள் அல்லது பக்கம் மீண்டும் ஏற்றப்படுவதைக் கண்காணிக்க முயற்சிக்கும் போது, ​​குறிப்பாக PHP திட்டத்தின் குறியீட்டை நீங்கள் அணுகாதபோது சவால்களை இது அறிமுகப்படுத்துகிறது.

iframe உள்ளடக்கம் புதுப்பிக்கப்படும் போதெல்லாம், உங்கள் கோணப் பயன்பாட்டில் ஏற்றுதல் ஸ்பின்னரைக் காண்பிக்க வேண்டியிருக்கும் போது இதுபோன்ற ஒரு சவால் எழுகிறது. நீங்கள் PHP குறியீட்டை மாற்ற முடியாது என்பதால், ஐஃப்ரேம் உள்ளடக்கத்தில் மறுஏற்றங்கள் அல்லது மாற்றங்களைக் கண்டறிவது தந்திரமானதாக இருக்கும். ஜாவாஸ்கிரிப்ட் பக்கத்திலிருந்து iframe இல் ஏற்படும் மாற்றங்களைக் கண்காணிப்பதற்கான வழியைக் கண்டுபிடிப்பதே முக்கியமானது.

HTTP கோரிக்கைகள் அல்லது மறுஏற்றம் போன்ற நிகழ்வுகளைக் கேட்கும் iframe இல் ஸ்கிரிப்டை உட்செலுத்துவது சாத்தியமா என்று பல டெவலப்பர்கள் ஆச்சரியப்படுகிறார்கள், குறிப்பாக நீங்கள் குறியீட்டின் மீது நேரடிக் கட்டுப்பாடு இல்லாத திட்டத்திலிருந்து iframe பெறப்பட்டால். உங்கள் கோண பயன்பாட்டில் ஜாவாஸ்கிரிப்ட் மூலம் இதைச் செய்ய முடியும்.

இக்கட்டுரையில், iframe இல் உள்ள PHP பக்கம் எப்போது மீண்டும் ஏற்றப்படுகிறது என்பதைக் கண்டறிவதற்கான சாத்தியமான தீர்வுகளை ஆராய்வோம், மேலும் அத்தகைய மாற்றங்களுக்கு பதிலளிக்கும் வகையில் ஏற்றுதல் ஸ்பின்னரை எவ்வாறு செயல்படுத்தலாம். PHP குறியீட்டிற்கான அணுகல் உங்களிடம் இல்லை என்றாலும், JavaScript ஆக்கபூர்வமான தீர்வுகளை வழங்க முடியும்.

ஐஃப்ரேம் ரீலோடுகளை கோணத்தில் கண்டறிவதற்கான தீர்வுகளை ஆராய்தல்

முதல் ஸ்கிரிப்டில், முக்கிய யோசனை கேட்க வேண்டும் சுமை iframe இன் நிகழ்வு. ஒவ்வொரு முறையும் iframe இன் உள்ளடக்கம் மாறும்போது அல்லது மீண்டும் ஏற்றப்படும்போது ஏற்ற நிகழ்வு தூண்டப்படும். இந்த நிகழ்வைப் பயன்படுத்துவதன் மூலம், iframe க்குள் இருக்கும் PHP பக்கம் எப்போது புதுப்பிக்கப்படுகிறது என்பதைக் கண்டறியலாம். துவக்கத்தில், செயல்பாட்டை அழைப்பதன் மூலம் ஏற்றுதல் ஸ்பின்னர் காட்டப்படுகிறது ஷோ ஸ்பின்னர். iframe உள்ளடக்கம் முழுமையாக ஏற்றப்பட்டதும், தி மறை ஸ்பின்னர் ஸ்பின்னரை மறைக்க செயல்பாடு அழைக்கப்படுகிறது. PHP குறியீட்டிற்கான அணுகல் தேவையில்லை, மேலும் iframe இன் நிலையை நம்பியிருப்பதால் இந்த முறை மிகவும் திறமையானது.

இரண்டாவது தீர்வு ஜாவாஸ்கிரிப்டை நேரடியாக iframe இல் செலுத்துவதன் மூலம் மிகவும் மேம்பட்ட அணுகுமுறையை எடுக்கிறது. iframe-ஐ அணுகுவதன் மூலம் உள்ளடக்க சாளரம், iframe இன் DOM இல் ஸ்கிரிப்ட் உறுப்பை நாம் மாறும் வகையில் உருவாக்கலாம் மற்றும் செருகலாம். இந்த ஸ்கிரிப்ட் ஐஃப்ரேமுக்குள் PHP பக்கத்தால் தொடங்கப்பட்ட எந்த HTTP கோரிக்கைகளையும், இரண்டையும் பயன்படுத்தி கண்காணிக்கும் XMLHttpRequest மற்றும் தி API ஐப் பெறவும். ஐஃப்ரேமுக்குள் நெட்வொர்க் செயல்பாட்டைக் கண்காணிப்பதும், அத்தகைய செயல்பாடு ஏதேனும் நிகழும்போது ஏற்றுதல் ஸ்பின்னரைக் காண்பிப்பதும் இங்கு குறிக்கோளாகும். இந்த அணுகுமுறை HTTP கோரிக்கைகள் செய்யப்படும் சரியான தருணத்தைக் கண்காணிப்பதன் மூலம் அதிக நுண்ணிய கட்டுப்பாட்டை வழங்குகிறது.

மூன்றாவது முறை பலப்படுத்துகிறது பின்செய்தி API, இது iframe மற்றும் பெற்றோர் கோண பயன்பாட்டிற்கு இடையே தொடர்பு கொள்ள அனுமதிக்கிறது. இந்த நிலையில், iframe ஏற்றுதல் முடிக்கும் போதெல்லாம் பெற்றோருக்கு ஒரு செய்தியை அனுப்புகிறது. பெற்றோர் சாளரம் இந்த செய்திகளைக் கேட்கிறது மற்றும் அதற்கேற்ப ஸ்பின்னரைக் காட்டுகிறது அல்லது மறைக்கிறது. postMessage ஐப் பயன்படுத்துவதன் நன்மை என்னவென்றால், iframe இன் உள் குறியீட்டிற்கான அணுகல் உங்களிடம் இல்லாவிட்டாலும் கூட, விண்டோக்களுக்கு இடையே தகவல்களைப் பரிமாறிக்கொள்ள இது ஒரு பாதுகாப்பான வழியாகும். பெற்றோர் மற்றும் iframe வெவ்வேறு டொமைன்களில் இருந்து வரும் கிராஸ்-ஆரிஜின் ஐஃப்ரேம்களுக்கு இது சிறந்தது.

இந்த தீர்வுகள் ஒவ்வொன்றும் அதன் பலங்களைக் கொண்டுள்ளன, மேலும் முறையின் தேர்வு உங்களுக்குத் தேவையான கட்டுப்பாட்டின் நிலை மற்றும் iframe இன் நடத்தை ஆகியவற்றைப் பொறுத்தது. லோட் ஈவென்ட் லிஸனர் எளிமையானது ஆனால் முழு ரீலோடுகளைக் கண்டறிய மட்டுமே வேலை செய்கிறது. iframe இல் ஒரு ஸ்கிரிப்டை உட்செலுத்துவது அதன் செயல்பாட்டைப் பற்றிய விரிவான நுண்ணறிவுகளை அளிக்கிறது ஆனால் ஸ்கிரிப்ட் செருகலை அனுமதிக்க iframe தேவைப்படுகிறது. இறுதியாக, தி பின்செய்தி முறையானது குறுக்கு-டொமைன் தொடர்பைக் கையாள்வதற்கான ஒரு வலுவான தீர்வாகும் மற்றும் குறிப்பிட்ட iframe நிகழ்வுகளைப் பற்றி பெற்றோருக்கு தெரிவிக்க முடியும். இந்த முறைகள் PHP குறியீட்டிற்கான நேரடி அணுகல் தேவையில்லாமல் 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>

// 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);

// 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);

கோணத்தில் ஐஃப்ரேம் மாற்றங்களைக் கண்காணிப்பதற்கான மேம்பட்ட நுட்பங்கள்

ஐஃப்ரேமில் ஏற்படும் மாற்றங்களைக் கண்டறிவதற்கான மற்றொரு சுவாரஸ்யமான நுட்பம் ஐப் பயன்படுத்துவது பிறழ்வு கண்காணிப்பாளர் API. புதிய முனைகள் சேர்க்கப்படும்போது அல்லது அகற்றப்படும்போது, ​​DOM ட்ரீயில் ஏற்படும் மாற்றங்களைக் கண்காணிக்க இந்த API உங்களை அனுமதிக்கிறது. PHP பக்கம் மீண்டும் ஏற்றப்படும் போது இது உங்களுக்கு நேரடியாகத் தெரிவிக்காது என்றாலும், iframe இன் உள்ளடக்கத்தில் ஏற்படும் மாற்றங்களைக் கண்டறிய இது உதவும். எடுத்துக்காட்டாக, iframe இல் உள்ள சில கூறுகள் மாற்றப்பட்டால் அல்லது மறுஏற்றத்திற்குப் பிறகு புதுப்பிக்கப்பட்டால், தி பிறழ்வு கண்காணிப்பாளர் அந்த மாற்றங்களைப் பிடித்து அதற்கேற்ப ஸ்பின்னரைத் தூண்டலாம்.

கூடுதலாக, உலாவி நிகழ்வுகளை மேம்படுத்துதல் ஏற்றுவதற்கு முன் அல்லது இறக்கு iframe எப்போது மீண்டும் ஏற்றப்படும் என்பதைக் கண்டறிய உதவும். பக்கம் இறக்கப்படும் போது அல்லது தற்போதைய பக்கத்திலிருந்து ஒரு வழிசெலுத்தல் தொடங்கும் போது இந்த நிகழ்வுகள் சுடப்படும். iframe இல் இந்த நிகழ்வுகளுக்கு நிகழ்வு கேட்பவர்களைச் சேர்ப்பதன் மூலம், ஸ்பின்னர் சரியான நேரத்தில் காட்டப்படுவதை உறுதிசெய்து, மறுஏற்றம் நிகழவுள்ளதாக பெற்றோர் சாளரத்திற்குத் தெரிவிக்கலாம். இந்த முறை மற்ற அணுகுமுறைகளுடன் இணைந்து, ஒரு விரிவான தீர்வை வழங்கும் போது சிறப்பாக செயல்படுகிறது.

கடைசியாக, மாற்றங்களைச் சரிபார்க்க iframe வாக்கெடுப்பை ஒரு முறையாகப் பயன்படுத்துவதை நீங்கள் பரிசீலிக்கலாம். இந்த முறையில், பெற்றோர் கோண பயன்பாடு அவ்வப்போது சரிபார்க்கிறது iframe உள்ளடக்கம் மாறியதா அல்லது மீண்டும் ஏற்றப்பட்டதா என்பதைத் தீர்மானிக்க, iframe இல் உள்ள URL அல்லது பிற குறிப்பிட்ட கூறுகள். இந்த அணுகுமுறை குறைவான செயல்திறன் கொண்டதாக இருந்தாலும், குறிப்பாக செயல்திறனின் அடிப்படையில், மற்ற முறைகள் சாத்தியமில்லாத போது இது ஒரு பின்னடைவு விருப்பமாகும். எதிர்மறையானது என்னவென்றால், வாக்கெடுப்பு அனைத்து பக்க மாற்றங்களையும் கண்டறிய முடியாது, ஆனால் குறிப்பிட்ட சூழ்நிலைகளுக்கு இன்னும் பயனுள்ளதாக இருக்கும்.