$lang['tuto'] = "ਟਿ utorial ਟੋਰਿਅਲਸ"; ?> Angular ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ Iframe

Angular ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ Iframe ਵਿੱਚ PHP ਪੇਜ ਰੀਲੋਡ ਦਾ ਪਤਾ ਲਗਾਉਣਾ

Temp mail SuperHeros
Angular ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ Iframe ਵਿੱਚ PHP ਪੇਜ ਰੀਲੋਡ ਦਾ ਪਤਾ ਲਗਾਉਣਾ
Angular ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ Iframe ਵਿੱਚ PHP ਪੇਜ ਰੀਲੋਡ ਦਾ ਪਤਾ ਲਗਾਉਣਾ

ਕੋਣੀ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ Iframe ਰੀਲੋਡਸ ਨੂੰ ਸੰਭਾਲਣਾ

ਆਧੁਨਿਕ ਵੈੱਬ ਵਿਕਾਸ ਵਿੱਚ, ਇੱਕ iframe ਦੁਆਰਾ ਇੱਕ ਐਂਗੁਲਰ ਪ੍ਰੋਜੈਕਟ ਦੇ ਅੰਦਰ ਇੱਕ PHP ਪੰਨੇ ਵਰਗੇ ਬਾਹਰੀ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਏਮਬੈਡ ਕਰਨਾ ਇੱਕ ਆਮ ਪਹੁੰਚ ਹੈ। ਹਾਲਾਂਕਿ, ਇਹ ਉਸ ਆਈਫ੍ਰੇਮ ਦੇ ਅੰਦਰ ਈਵੈਂਟਾਂ ਜਾਂ ਪੇਜ ਰੀਲੋਡ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਸਮੇਂ ਚੁਣੌਤੀਆਂ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ PHP ਪ੍ਰੋਜੈਕਟ ਦੇ ਕੋਡ ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।

ਅਜਿਹੀ ਇੱਕ ਚੁਣੌਤੀ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਹਾਨੂੰ ਆਪਣੀ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਲੋਡਿੰਗ ਸਪਿਨਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਵੀ iframe ਸਮੱਗਰੀ ਨੂੰ ਤਾਜ਼ਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਕਿਉਂਕਿ ਤੁਸੀਂ PHP ਕੋਡ ਨੂੰ ਸੰਸ਼ੋਧਿਤ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਇਸਲਈ ਆਈਫ੍ਰੇਮ ਸਮੱਗਰੀ ਵਿੱਚ ਮੁੜ ਲੋਡ ਜਾਂ ਤਬਦੀਲੀਆਂ ਦਾ ਪਤਾ ਲਗਾਉਣਾ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦਾ ਹੈ। ਕੁੰਜੀ JavaScript ਪਾਸੇ ਤੋਂ iframe ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਦਾ ਤਰੀਕਾ ਲੱਭ ਰਹੀ ਹੈ।

ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਹੈਰਾਨ ਹੁੰਦੇ ਹਨ ਕਿ ਕੀ ਆਈਫ੍ਰੇਮ ਵਿੱਚ ਇੱਕ ਸਕ੍ਰਿਪਟ ਇੰਜੈਕਟ ਕਰਨਾ ਸੰਭਵ ਹੈ ਜੋ ਕਿ HTTP ਬੇਨਤੀਆਂ ਜਾਂ ਰੀਲੋਡਸ ਵਰਗੀਆਂ ਘਟਨਾਵਾਂ ਲਈ ਸੁਣਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਜੇਕਰ iframe ਕਿਸੇ ਪ੍ਰੋਜੈਕਟ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜਿੱਥੇ ਤੁਹਾਡੇ ਕੋਲ ਕੋਡ 'ਤੇ ਸਿੱਧਾ ਨਿਯੰਤਰਣ ਨਹੀਂ ਹੈ। ਇਹ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਤੁਹਾਡੀ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ JavaScript ਦੁਆਰਾ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ ਇਹ ਪਤਾ ਲਗਾਉਣ ਦੇ ਸੰਭਾਵਿਤ ਹੱਲਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ ਕਿ ਇੱਕ iframe ਦੇ ਅੰਦਰ ਇੱਕ PHP ਪੰਨਾ ਕਦੋਂ ਰੀਲੋਡ ਹੋ ਰਿਹਾ ਹੈ, ਅਤੇ ਤੁਸੀਂ ਅਜਿਹੀਆਂ ਤਬਦੀਲੀਆਂ ਦੇ ਜਵਾਬ ਵਿੱਚ ਇੱਕ ਲੋਡਿੰਗ ਸਪਿਨਰ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰ ਸਕਦੇ ਹੋ। ਹਾਲਾਂਕਿ ਤੁਹਾਡੇ ਕੋਲ PHP ਕੋਡ ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਹੈ, JavaScript ਰਚਨਾਤਮਕ ਹੱਲ ਪੇਸ਼ ਕਰ ਸਕਦਾ ਹੈ.

ਹੁਕਮ ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ
contentWindow iframe ਦੇ ਵਿੰਡੋ ਆਬਜੈਕਟ ਤੱਕ ਪਹੁੰਚ ਕਰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਪੇਰੈਂਟ ਵਿੰਡੋ ਤੋਂ iframe ਦੇ DOM ਵਿੱਚ ਸਕ੍ਰਿਪਟਾਂ ਨੂੰ ਹੇਰਾਫੇਰੀ ਜਾਂ ਇੰਜੈਕਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ: const iframe = document.querySelector("iframe").contentWindow;
addEventListener("load") ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਰਜਿਸਟਰ ਕਰਦਾ ਹੈ ਜੋ ਉਦੋਂ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ iframe ਲੋਡ ਜਾਂ ਰੀਲੋਡ ਕਰਨਾ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ। ਜਦੋਂ iframe ਸਮੱਗਰੀ ਬਦਲਦੀ ਹੈ ਤਾਂ ਟਰੈਕਿੰਗ ਲਈ ਉਪਯੋਗੀ। ਉਦਾਹਰਨ: iframe.addEventListener("load", function() {...});
postMessage ਇੱਕ iframe ਅਤੇ ਇਸਦੇ ਮੂਲ ਵਿੰਡੋ ਵਿਚਕਾਰ ਸੁਰੱਖਿਅਤ ਸੰਚਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ, ਸੁਨੇਹਿਆਂ ਨੂੰ ਅੱਗੇ ਅਤੇ ਪਿੱਛੇ ਪਾਸ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਉਦਾਹਰਨ: parent.postMessage("iframeReloaded", "*");
XMLHttpRequest.prototype.open ਇਹ ਪਤਾ ਲਗਾਉਣ ਲਈ ਇੱਕ XMLHttpRequest ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦਾ ਹੈ ਜਦੋਂ ਨੈੱਟਵਰਕ ਬੇਨਤੀਆਂ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਜਦੋਂ ਵੀ iframe ਵਿੱਚ ਇੱਕ HTTP ਬੇਨਤੀ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਤਾਂ ਕਸਟਮ ਤਰਕ ਨੂੰ ਇੰਜੈਕਟ ਕਰਨ ਲਈ ਮਦਦਗਾਰ। ਉਦਾਹਰਨ: XMLHttpRequest.prototype.open = function() {...};
fetch JavaScript Fetch API ਨੂੰ ਰੋਕਦਾ ਹੈ, HTTP ਬੇਨਤੀਆਂ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਇੱਕ ਸਪਿਨਰ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਜਦੋਂ ਇੱਕ ਨੈੱਟਵਰਕ ਬੇਨਤੀ ਪ੍ਰਗਤੀ ਵਿੱਚ ਹੁੰਦੀ ਹੈ। ਉਦਾਹਰਨ: window.fetch = function() {...};
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("spinner").style.display = "ਬਲਾਕ";

ਕੋਣ ਵਿੱਚ Iframe ਰੀਲੋਡਸ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ ਹੱਲਾਂ ਦੀ ਖੋਜ ਕਰਨਾ

ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਮੁੱਖ ਵਿਚਾਰ ਨੂੰ ਸੁਣਨਾ ਹੈ ਲੋਡ iframe ਦੀ ਘਟਨਾ. ਲੋਡ ਇਵੈਂਟ ਹਰ ਵਾਰ ਜਦੋਂ iframe ਦੀ ਸਮਗਰੀ ਬਦਲਦਾ ਹੈ ਜਾਂ ਰੀਲੋਡ ਹੁੰਦਾ ਹੈ ਤਾਂ ਟਰਿੱਗਰ ਹੁੰਦਾ ਹੈ। ਇਸ ਇਵੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਸੀਂ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹਾਂ ਕਿ iframe ਦੇ ਅੰਦਰ PHP ਪੰਨਾ ਕਦੋਂ ਰਿਫ੍ਰੈਸ਼ ਹੁੰਦਾ ਹੈ। ਸ਼ੁਰੂ ਵਿੱਚ, ਲੋਡਿੰਗ ਸਪਿਨਰ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਕੇ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਸ਼ੋਅ ਸਪਿਨਰ. ਇੱਕ ਵਾਰ iframe ਸਮੱਗਰੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋ ਜਾਂਦੀ ਹੈ, hideSpinner ਫੰਕਸ਼ਨ ਨੂੰ ਸਪਿਨਰ ਨੂੰ ਲੁਕਾਉਣ ਲਈ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਵਿਧੀ ਕਾਫ਼ੀ ਕੁਸ਼ਲ ਹੈ ਕਿਉਂਕਿ ਇਸਨੂੰ PHP ਕੋਡ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਅਤੇ ਸਿਰਫ਼ iframe ਦੀ ਸਥਿਤੀ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ।

ਦੂਜਾ ਹੱਲ JavaScript ਨੂੰ ਸਿੱਧੇ iframe ਵਿੱਚ ਇੰਜੈਕਟ ਕਰਕੇ ਇੱਕ ਵਧੇਰੇ ਉੱਨਤ ਪਹੁੰਚ ਲੈਂਦਾ ਹੈ। iframe's ਤੱਕ ਪਹੁੰਚ ਕਰਕੇ ਸਮੱਗਰੀ ਵਿੰਡੋ, ਅਸੀਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ iframe ਦੇ DOM ਵਿੱਚ ਇੱਕ ਸਕ੍ਰਿਪਟ ਐਲੀਮੈਂਟ ਬਣਾ ਅਤੇ ਪਾ ਸਕਦੇ ਹਾਂ। ਇਹ ਸਕ੍ਰਿਪਟ ਆਈਫ੍ਰੇਮ ਦੇ ਅੰਦਰ PHP ਪੰਨੇ ਦੁਆਰਾ ਸ਼ੁਰੂ ਕੀਤੀਆਂ ਕਿਸੇ ਵੀ HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰਦੀ ਹੈ, ਦੋਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ XMLHttp ਬੇਨਤੀ ਅਤੇ API ਪ੍ਰਾਪਤ ਕਰੋ. ਇੱਥੇ ਟੀਚਾ iframe ਦੇ ਅੰਦਰ ਨੈੱਟਵਰਕ ਗਤੀਵਿਧੀ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ ਅਤੇ ਅਜਿਹੀ ਕੋਈ ਗਤੀਵਿਧੀ ਹੋਣ 'ਤੇ ਲੋਡਿੰਗ ਸਪਿਨਰ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ। ਇਹ ਪਹੁੰਚ HTTP ਬੇਨਤੀਆਂ ਕੀਤੇ ਜਾਣ ਦੇ ਸਹੀ ਪਲ ਨੂੰ ਟਰੈਕ ਕਰਕੇ ਵਧੇਰੇ ਦਾਣੇਦਾਰ ਨਿਯੰਤਰਣ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੀ ਹੈ।

ਤੀਜੀ ਵਿਧੀ ਦਾ ਲਾਭ ਉਠਾਉਂਦਾ ਹੈ ਪੋਸਟ ਸੁਨੇਹਾ API, ਜੋ iframe ਅਤੇ ਪੈਰੇਂਟ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿਚਕਾਰ ਸੰਚਾਰ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਜਦੋਂ ਵੀ ਇਹ ਲੋਡ ਕਰਨਾ ਪੂਰਾ ਕਰਦਾ ਹੈ ਤਾਂ iframe ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਇੱਕ ਸੁਨੇਹਾ ਭੇਜਦਾ ਹੈ। ਪੇਰੈਂਟ ਵਿੰਡੋ ਇਹਨਾਂ ਸੁਨੇਹਿਆਂ ਨੂੰ ਸੁਣਦੀ ਹੈ ਅਤੇ ਉਸ ਅਨੁਸਾਰ ਸਪਿਨਰ ਨੂੰ ਦਿਖਾਉਂਦੀ ਜਾਂ ਲੁਕਾਉਂਦੀ ਹੈ। ਪੋਸਟਮੈਸੇਜ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਫਾਇਦਾ ਇਹ ਹੈ ਕਿ ਇਹ ਵਿੰਡੋਜ਼ ਵਿਚਕਾਰ ਜਾਣਕਾਰੀ ਦਾ ਆਦਾਨ-ਪ੍ਰਦਾਨ ਕਰਨ ਦਾ ਇੱਕ ਸੁਰੱਖਿਅਤ ਤਰੀਕਾ ਹੈ, ਭਾਵੇਂ ਤੁਹਾਡੇ ਕੋਲ iframe ਦੇ ਅੰਦਰੂਨੀ ਕੋਡ ਤੱਕ ਪਹੁੰਚ ਨਾ ਹੋਵੇ। ਇਹ ਅੰਤਰ-ਮੂਲ ਆਈਫ੍ਰੇਮ ਲਈ ਆਦਰਸ਼ ਹੈ ਜਿੱਥੇ ਮਾਤਾ-ਪਿਤਾ ਅਤੇ iframe ਵੱਖ-ਵੱਖ ਡੋਮੇਨਾਂ ਤੋਂ ਆਉਂਦੇ ਹਨ।

ਇਹਨਾਂ ਹੱਲਾਂ ਵਿੱਚੋਂ ਹਰ ਇੱਕ ਦੀਆਂ ਆਪਣੀਆਂ ਸ਼ਕਤੀਆਂ ਹਨ, ਅਤੇ ਵਿਧੀ ਦੀ ਚੋਣ ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਨਿਯੰਤਰਣ ਦੇ ਪੱਧਰ ਅਤੇ iframe ਦੇ ਵਿਵਹਾਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀ ਹੈ। ਲੋਡ ਇਵੈਂਟ ਲਿਸਨਰ ਸਧਾਰਨ ਹੈ ਪਰ ਸਿਰਫ ਪੂਰੇ ਰੀਲੋਡਸ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ। iframe ਵਿੱਚ ਸਕ੍ਰਿਪਟ ਨੂੰ ਇੰਜੈਕਟ ਕਰਨ ਨਾਲ ਇਸਦੀ ਗਤੀਵਿਧੀ ਵਿੱਚ ਵਧੇਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਮਿਲਦੀ ਹੈ ਪਰ ਸਕ੍ਰਿਪਟ ਸੰਮਿਲਨ ਦੀ ਆਗਿਆ ਦੇਣ ਲਈ iframe ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਅੰਤ ਵਿੱਚ, ਦ ਪੋਸਟ ਸੁਨੇਹਾ ਵਿਧੀ ਕਰਾਸ-ਡੋਮੇਨ ਸੰਚਾਰ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਮਜ਼ਬੂਤ ​​ਹੱਲ ਹੈ ਅਤੇ ਖਾਸ iframe ਇਵੈਂਟਾਂ ਬਾਰੇ ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਸੂਚਿਤ ਕਰ ਸਕਦਾ ਹੈ। ਇਹ ਵਿਧੀਆਂ PHP ਕੋਡ ਤੱਕ ਸਿੱਧੀ ਪਹੁੰਚ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ iframe ਸਥਿਤੀ ਤਬਦੀਲੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਲਚਕਦਾਰ ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ।

ਹੱਲ 1: "ਲੋਡ" ਇਵੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਈਫ੍ਰੇਮ ਰੀਲੋਡ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ

ਇਹ ਹੱਲ 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: ਨੈੱਟਵਰਕ ਬੇਨਤੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ iframe ਵਿੱਚ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰਨਾ

ਇਹ ਵਿਧੀ ਕਿਸੇ ਵੀ 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 ਅਤੇ ਮਾਤਾ-ਪਿਤਾ ਵਿਚਕਾਰ ਸੰਚਾਰ ਕਰਨ ਲਈ postMessage ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਇਹ ਪਹੁੰਚ iframe ਅਤੇ ਪੇਰੈਂਟ ਵਿੰਡੋ ਦੇ ਵਿਚਕਾਰ ਸੰਚਾਰ ਕਰਨ ਲਈ "postMessage" API ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ, ਕਿਸੇ ਵੀ ਰੀਲੋਡ ਜਾਂ 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। ਇਹ API ਤੁਹਾਨੂੰ DOM ਟ੍ਰੀ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਨਵੇਂ ਨੋਡ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂ ਹਟਾਏ ਜਾਂਦੇ ਹਨ। ਹਾਲਾਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸੂਚਿਤ ਨਹੀਂ ਕਰੇਗਾ ਜਦੋਂ PHP ਪੰਨਾ ਰੀਲੋਡ ਹੁੰਦਾ ਹੈ, ਇਹ iframe ਦੀ ਸਮੱਗਰੀ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦਾ ਪਤਾ ਲਗਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਜੇਕਰ iframe ਵਿੱਚ ਕੁਝ ਤੱਤਾਂ ਨੂੰ ਰੀਲੋਡ ਕਰਨ ਤੋਂ ਬਾਅਦ ਬਦਲਿਆ ਜਾਂ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਮਿਊਟੇਸ਼ਨ ਆਬਜ਼ਰਵਰ ਉਹਨਾਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਫੜ ਸਕਦਾ ਹੈ ਅਤੇ ਉਸ ਅਨੁਸਾਰ ਸਪਿਨਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰ ਸਕਦਾ ਹੈ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਬ੍ਰਾਊਜ਼ਰ ਇਵੈਂਟਾਂ ਦਾ ਲਾਭ ਉਠਾਉਣਾ ਜਿਵੇਂ ਕਿ ਅਨਲੋਡ ਤੋਂ ਪਹਿਲਾਂ ਜਾਂ ਅਨਲੋਡ ਇਹ ਪਤਾ ਲਗਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ ਕਿ iframe ਕਦੋਂ ਰੀਲੋਡ ਹੋਣ ਵਾਲਾ ਹੈ। ਇਹ ਘਟਨਾਵਾਂ ਉਦੋਂ ਚਾਲੂ ਹੁੰਦੀਆਂ ਹਨ ਜਦੋਂ ਪੰਨੇ ਨੂੰ ਅਨਲੋਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੁੰਦਾ ਹੈ ਜਾਂ ਜਦੋਂ ਮੌਜੂਦਾ ਪੰਨੇ ਤੋਂ ਦੂਰ ਨੈਵੀਗੇਸ਼ਨ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। iframe ਦੇ ਅੰਦਰ ਇਹਨਾਂ ਇਵੈਂਟਾਂ ਵਿੱਚ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਮੂਲ ਵਿੰਡੋ ਨੂੰ ਸੂਚਿਤ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਇੱਕ ਰੀਲੋਡ ਹੋਣ ਵਾਲਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੇ ਹੋਏ ਕਿ ਸਪਿਨਰ ਸਹੀ ਸਮੇਂ 'ਤੇ ਦਿਖਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਵਿਧੀ ਸਭ ਤੋਂ ਵਧੀਆ ਕੰਮ ਕਰਦੀ ਹੈ ਜਦੋਂ ਦੂਜੀਆਂ ਪਹੁੰਚਾਂ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ, ਇੱਕ ਵਿਆਪਕ ਹੱਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਅੰਤ ਵਿੱਚ, ਤੁਸੀਂ ਤਬਦੀਲੀਆਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਇੱਕ ਢੰਗ ਵਜੋਂ iframe ਪੋਲਿੰਗ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਵਿਚਾਰ ਕਰ ਸਕਦੇ ਹੋ। ਇਸ ਵਿਧੀ ਵਿੱਚ, ਪੇਰੈਂਟ ਐਂਗੁਲਰ ਐਪ ਸਮੇਂ-ਸਮੇਂ 'ਤੇ ਜਾਂਚ ਕਰਦਾ ਹੈ iframe ਇਹ ਪਤਾ ਲਗਾਉਣ ਲਈ ਕਿ ਕੀ ਸਮੱਗਰੀ ਬਦਲ ਗਈ ਹੈ ਜਾਂ ਰੀਲੋਡ ਕੀਤੀ ਗਈ ਹੈ, URL ਜਾਂ iframe ਦੇ ਅੰਦਰ ਹੋਰ ਖਾਸ ਤੱਤ। ਹਾਲਾਂਕਿ ਇਹ ਪਹੁੰਚ ਘੱਟ ਕੁਸ਼ਲ ਹੋ ਸਕਦੀ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਰੂਪ ਵਿੱਚ, ਇਹ ਇੱਕ ਫਾਲਬੈਕ ਵਿਕਲਪ ਹੈ ਜਦੋਂ ਹੋਰ ਤਰੀਕੇ ਸੰਭਵ ਨਹੀਂ ਹਨ। ਨਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਪੋਲਿੰਗ ਪੰਨੇ ਵਿਚਲੀਆਂ ਸਾਰੀਆਂ ਤਬਦੀਲੀਆਂ ਦਾ ਪਤਾ ਨਹੀਂ ਲਗਾ ਸਕਦੀ ਪਰ ਫਿਰ ਵੀ ਖਾਸ ਸਥਿਤੀਆਂ ਲਈ ਉਪਯੋਗੀ ਹੋ ਸਕਦੀ ਹੈ।

Monitoring Iframe Reloads ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

  1. ਮੈਂ ਇੱਕ iframe ਰੀਲੋਡ ਦਾ ਪਤਾ ਕਿਵੇਂ ਲਗਾ ਸਕਦਾ ਹਾਂ?
  2. ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ addEventListener("load") ਇੱਕ iframe ਮੁੜ ਲੋਡ ਹੋਣ ਜਾਂ ਇਸਦੀ ਸਮੱਗਰੀ ਬਦਲਣ 'ਤੇ ਪਤਾ ਲਗਾਉਣ ਲਈ ਇਵੈਂਟ।
  3. ਕੀ iframe ਵਿੱਚ ਨੈੱਟਵਰਕ ਬੇਨਤੀਆਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ ਸੰਭਵ ਹੈ?
  4. ਹਾਂ, iframe ਵਿੱਚ ਇੱਕ ਸਕ੍ਰਿਪਟ ਇੰਜੈਕਟ ਕਰਕੇ, ਤੁਸੀਂ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹੋ fetch ਅਤੇ XMLHttpRequest.prototype.open HTTP ਬੇਨਤੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਢੰਗ।
  5. ਕੀ ਮੈਂ iframe ਅਤੇ ਪੇਰੈਂਟ ਵਿੰਡੋ ਵਿਚਕਾਰ ਸੰਚਾਰ ਕਰਨ ਲਈ postMessage ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ/ਸਕਦੀ ਹਾਂ?
  6. ਹਾਂ, ਦ postMessage API iframe ਅਤੇ ਇਸਦੀ ਮੂਲ ਵਿੰਡੋ ਦੇ ਵਿਚਕਾਰ ਸੁਰੱਖਿਅਤ ਸੰਚਾਰ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ, ਉਹਨਾਂ ਦੇ ਵਿਚਕਾਰ ਸੁਨੇਹਾ ਪਾਸ ਕਰਨ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ।
  7. ਜੇ ਮੈਂ iframe ਵਿੱਚ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਨਹੀਂ ਕਰ ਸਕਦਾ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
  8. ਜੇਕਰ ਤੁਹਾਡੇ ਕੋਲ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰਨ ਦੀ ਪਹੁੰਚ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਸਦੀ ਵਰਤੋਂ ਕਰਕੇ MutationObserver API ਜਾਂ postMessage iframe ਦੇ ਅੰਦਰ ਤੋਂ ਵਿਧੀ (ਜੇ ਇਹ ਇਸਦਾ ਸਮਰਥਨ ਕਰਦੀ ਹੈ) ਸੰਭਾਵੀ ਵਿਕਲਪ ਹਨ।
  9. MutationObserver iframe ਤਬਦੀਲੀਆਂ ਦਾ ਪਤਾ ਲਗਾਉਣ ਵਿੱਚ ਕਿਵੇਂ ਮਦਦ ਕਰਦਾ ਹੈ?
  10. MutationObserver API DOM ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦਾ ਹੈ, ਜੋ ਤੁਹਾਨੂੰ ਚੇਤਾਵਨੀ ਦੇ ਸਕਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਰੀਲੋਡ ਤੋਂ ਬਾਅਦ iframe ਦੇ ਅੰਦਰ ਤੱਤ ਬਦਲਦੇ ਹਨ।

ਕੋਣੀ ਵਿੱਚ Iframe ਰੀਲੋਡਸ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਬਾਰੇ ਅੰਤਮ ਵਿਚਾਰ

ਅੰਡਰਲਾਈੰਗ PHP ਕੋਡ ਤੱਕ ਸਿੱਧੀ ਪਹੁੰਚ ਤੋਂ ਬਿਨਾਂ iframe ਰੀਲੋਡ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨਾ ਰਚਨਾਤਮਕ JavaScript ਹੱਲਾਂ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਚਾਹੇ ਇਵੈਂਟ ਲਿਸਨਰ, ਇੰਜੈਕਟਡ ਸਕ੍ਰਿਪਟਾਂ, ਜਾਂ ਪੋਸਟਮੈਸੇਜ API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਡਿਵੈਲਪਰਾਂ ਕੋਲ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਵਿਕਲਪ ਹਨ ਕਿ ਉਹਨਾਂ ਦੀਆਂ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਰਹਿਣ।

ਪ੍ਰੋਜੈਕਟ ਦੀ ਗੁੰਝਲਤਾ ਅਤੇ iframe ਉੱਤੇ ਨਿਯੰਤਰਣ ਦੇ ਅਧਾਰ ਤੇ, ਹਰੇਕ ਪਹੁੰਚ ਦੀਆਂ ਆਪਣੀਆਂ ਸ਼ਕਤੀਆਂ ਹੁੰਦੀਆਂ ਹਨ। ਆਪਣੇ ਖਾਸ ਕੇਸ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਹੱਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ iframe ਸਮੱਗਰੀ ਤਬਦੀਲੀਆਂ ਦੌਰਾਨ ਭਰੋਸੇਯੋਗ ਸਪਿਨਰ ਸੂਚਨਾਵਾਂ ਰਾਹੀਂ ਇੱਕ ਬਿਹਤਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੇ ਹੋ।

ਹਵਾਲੇ ਅਤੇ ਬਾਹਰੀ ਸਰੋਤ
  1. ਆਈਫ੍ਰੇਮ ਇਵੈਂਟਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਅਤੇ ਅੰਤਰ-ਮੂਲ ਸੰਚਾਰ 'ਤੇ ਵਿਸਤ੍ਰਿਤ ਦਸਤਾਵੇਜ਼ ਇੱਥੇ ਲੱਭੇ ਜਾ ਸਕਦੇ ਹਨ MDN ਵੈੱਬ ਡੌਕਸ - postMessage API .
  2. DOM ਤਬਦੀਲੀਆਂ ਲਈ MutationObserver ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ, ਵੇਖੋ MDN ਵੈੱਬ ਡੌਕਸ - ਮਿਊਟੇਸ਼ਨ ਔਬਜ਼ਰਵਰ .
  3. iframes ਵਿੱਚ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰਨ ਦੀਆਂ ਤਕਨੀਕਾਂ ਦੀ ਪੜਚੋਲ ਕਰਨ ਲਈ, ਇਸ ਸਰੋਤ ਨੂੰ ਦੇਖੋ StackOverflow - iframe ਵਿੱਚ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰੋ .