ಕೋನೀಯ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ Iframe ಮರುಲೋಡ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ, ಐಫ್ರೇಮ್ ಮೂಲಕ ಕೋನೀಯ ಯೋಜನೆಯೊಳಗೆ PHP ಪುಟದಂತಹ ಬಾಹ್ಯ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದು ಸಾಮಾನ್ಯ ವಿಧಾನವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಆ iframe ಒಳಗೆ ಈವೆಂಟ್ಗಳು ಅಥವಾ ಪುಟ ಮರುಲೋಡ್ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುವಾಗ ಇದು ಸವಾಲುಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ನೀವು PHP ಯೋಜನೆಯ ಕೋಡ್ಗೆ ಪ್ರವೇಶವನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ.
iframe ವಿಷಯವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗಲೆಲ್ಲಾ ನಿಮ್ಮ ಕೋನೀಯ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ನೀವು ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕಾದಾಗ ಅಂತಹ ಒಂದು ಸವಾಲು ಉದ್ಭವಿಸುತ್ತದೆ. ನೀವು PHP ಕೋಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಲು ಸಾಧ್ಯವಿಲ್ಲದ ಕಾರಣ, iframe ವಿಷಯಕ್ಕೆ ಮರುಲೋಡ್ಗಳು ಅಥವಾ ಬದಲಾವಣೆಗಳನ್ನು ಕಂಡುಹಿಡಿಯುವುದು ಟ್ರಿಕಿಯಾಗುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಡೆಯಿಂದ iframe ನಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಕಂಡುಹಿಡಿಯುವುದು ಪ್ರಮುಖವಾಗಿದೆ.
HTTP ವಿನಂತಿಗಳು ಅಥವಾ ಮರುಲೋಡ್ಗಳಂತಹ ಈವೆಂಟ್ಗಳನ್ನು ಆಲಿಸುವ iframe ಗೆ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲು ಸಾಧ್ಯವೇ ಎಂದು ಅನೇಕ ಡೆವಲಪರ್ಗಳು ಆಶ್ಚರ್ಯ ಪಡುತ್ತಾರೆ, ವಿಶೇಷವಾಗಿ iframe ಅನ್ನು ನೀವು ಕೋಡ್ನ ಮೇಲೆ ನೇರ ನಿಯಂತ್ರಣ ಹೊಂದಿರದ ಯೋಜನೆಯಿಂದ ಮೂಲದ್ದಾಗಿದ್ದರೆ. ನಿಮ್ಮ ಕೋನೀಯ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ JavaScript ಮೂಲಕ ಇದನ್ನು ಸಮರ್ಥವಾಗಿ ಮಾಡಬಹುದು.
ಈ ಲೇಖನದಲ್ಲಿ, 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 ಟ್ರೀಗೆ ಹೊಸ ನೋಡ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಡಿವಿ), iframe ಗೆ JavaScript ಅನ್ನು ಇಂಜೆಕ್ಷನ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆ: iframe.document.body.appendChild(script); |
window.onload | iframe ಪುಟವು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆದ ನಂತರ ಕಾರ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ, iframe ಮರುಲೋಡ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದಾಗ ಅಧಿಸೂಚನೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಉದಾಹರಣೆ: window.onload = ಕಾರ್ಯ() {...}; |
style.display | ಅವುಗಳ CSS ಡಿಸ್ಪ್ಲೇ ಆಸ್ತಿಯನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ HTML ಅಂಶಗಳ (ಸ್ಪಿನ್ನರ್ಗಳಂತೆ) ಗೋಚರತೆಯನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತದೆ. ಪುಟ ಲೋಡ್ಗಳ ಸಮಯದಲ್ಲಿ ಸ್ಪಿನ್ನರ್ ಗೋಚರತೆಯನ್ನು ಟಾಗಲ್ ಮಾಡಲು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆ: document.getElementById("ಸ್ಪಿನ್ನರ್").style.display = "block"; |
ಕೋನೀಯದಲ್ಲಿ ಐಫ್ರೇಮ್ ಮರುಲೋಡ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಪರಿಹಾರಗಳನ್ನು ಅನ್ವೇಷಿಸಲಾಗುತ್ತಿದೆ
ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ, ಕೇಳುವುದು ಮುಖ್ಯ ಆಲೋಚನೆಯಾಗಿದೆ ಲೋಡ್ iframe ನ ಈವೆಂಟ್. ಪ್ರತಿ ಬಾರಿ iframe ನ ವಿಷಯ ಬದಲಾದಾಗ ಅಥವಾ ಮರುಲೋಡ್ ಮಾಡಿದಾಗ ಲೋಡ್ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲಾಗುತ್ತದೆ. ಈ ಈವೆಂಟ್ ಅನ್ನು ಬಳಸುವ ಮೂಲಕ, iframe ಒಳಗಿನ PHP ಪುಟವನ್ನು ಯಾವಾಗ ರಿಫ್ರೆಶ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಾವು ಪತ್ತೆ ಮಾಡಬಹುದು. ಆರಂಭದಲ್ಲಿ, ಕಾರ್ಯವನ್ನು ಕರೆಯುವ ಮೂಲಕ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ತೋರಿಸಲಾಗುತ್ತದೆ ಶೋ ಸ್ಪಿನ್ನರ್. iframe ವಿಷಯವು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆದ ನಂತರ, ದಿ ಹೈಡ್ಸ್ಪಿನ್ನರ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಮರೆಮಾಡಲು ಕಾರ್ಯವನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ. ಈ ವಿಧಾನವು ಸಾಕಷ್ಟು ಪರಿಣಾಮಕಾರಿಯಾಗಿರುತ್ತದೆ ಏಕೆಂದರೆ ಇದಕ್ಕೆ PHP ಕೋಡ್ಗೆ ಪ್ರವೇಶ ಅಗತ್ಯವಿಲ್ಲ, ಮತ್ತು iframe ಸ್ಥಿತಿಯನ್ನು ಅವಲಂಬಿಸಿದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ನೇರವಾಗಿ iframe ಗೆ ಚುಚ್ಚುವ ಮೂಲಕ ಎರಡನೆಯ ಪರಿಹಾರವು ಹೆಚ್ಚು ಸುಧಾರಿತ ವಿಧಾನವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. iframe's ಅನ್ನು ಪ್ರವೇಶಿಸುವ ಮೂಲಕ ವಿಷಯವಿಂಡೋ, ನಾವು iframe ನ DOM ಗೆ ಸ್ಕ್ರಿಪ್ಟ್ ಅಂಶವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರಚಿಸಬಹುದು ಮತ್ತು ಸೇರಿಸಬಹುದು. ಈ ಸ್ಕ್ರಿಪ್ಟ್ ಐಫ್ರೇಮ್ನೊಳಗೆ PHP ಪುಟದಿಂದ ಪ್ರಾರಂಭಿಸಲಾದ ಯಾವುದೇ HTTP ವಿನಂತಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ, ಎರಡನ್ನೂ ಬಳಸಿ XMLHttpRequest ಮತ್ತು ದಿ API ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಿ. ಐಫ್ರೇಮ್ನಲ್ಲಿ ನೆಟ್ವರ್ಕ್ ಚಟುವಟಿಕೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು ಮತ್ತು ಅಂತಹ ಯಾವುದೇ ಚಟುವಟಿಕೆ ಸಂಭವಿಸಿದಾಗ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುವುದು ಇಲ್ಲಿನ ಗುರಿಯಾಗಿದೆ. ಈ ವಿಧಾನವು HTTP ವಿನಂತಿಗಳನ್ನು ಮಾಡಿದ ನಿಖರವಾದ ಕ್ಷಣವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ಮೂಲಕ ಹೆಚ್ಚು ಹರಳಿನ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.
ಮೂರನೇ ವಿಧಾನವು ಹತೋಟಿಯನ್ನು ಹೊಂದಿದೆ ಪೋಸ್ಟ್ ಸಂದೇಶ API, ಇದು iframe ಮತ್ತು ಮೂಲ ಕೋನೀಯ ಅಪ್ಲಿಕೇಶನ್ ನಡುವೆ ಸಂವಹನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, 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: ನೆಟ್ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು iframe ಗೆ ಇಂಜೆಕ್ಟ್ ಮಾಡಲಾಗುತ್ತಿದೆ
ಈ ವಿಧಾನವು ಯಾವುದೇ HTTP ವಿನಂತಿಗಳು ಅಥವಾ ಮರುಲೋಡ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು 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 ಮತ್ತು ಪೋಷಕರ ನಡುವೆ ಸಂವಹನ ಮಾಡಲು ಪೋಸ್ಟ್ಮೆಸೇಜ್ ಅನ್ನು ಬಳಸುವುದು
ಈ ವಿಧಾನವು 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);
ಕೋನೀಯದಲ್ಲಿ ಐಫ್ರೇಮ್ ಬದಲಾವಣೆಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಐಫ್ರೇಮ್ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತೊಂದು ಆಸಕ್ತಿದಾಯಕ ತಂತ್ರವನ್ನು ಬಳಸುವುದು ರೂಪಾಂತರ ವೀಕ್ಷಕ API. ಹೊಸ ನೋಡ್ಗಳನ್ನು ಸೇರಿಸಿದಾಗ ಅಥವಾ ತೆಗೆದುಹಾಕಿದಾಗ DOM ಟ್ರೀನಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಈ API ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. PHP ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿದಾಗ ಇದು ನಿಮಗೆ ನೇರವಾಗಿ ತಿಳಿಸುವುದಿಲ್ಲವಾದರೂ, iframe ನ ವಿಷಯದಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, iframe ನಲ್ಲಿರುವ ಕೆಲವು ಅಂಶಗಳನ್ನು ಮರುಲೋಡ್ ಮಾಡಿದ ನಂತರ ಬದಲಾಯಿಸಿದರೆ ಅಥವಾ ನವೀಕರಿಸಿದರೆ, ದಿ ರೂಪಾಂತರ ವೀಕ್ಷಕ ಆ ಬದಲಾವಣೆಗಳನ್ನು ಹಿಡಿಯಬಹುದು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಂತಹ ಬ್ರೌಸರ್ ಈವೆಂಟ್ಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದು ಇಳಿಸುವ ಮೊದಲು ಅಥವಾ ಇಳಿಸು iframe ಯಾವಾಗ ಮರುಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಪುಟವನ್ನು ಅನ್ಲೋಡ್ ಮಾಡುವಾಗ ಅಥವಾ ಪ್ರಸ್ತುತ ಪುಟದಿಂದ ದೂರದಲ್ಲಿರುವ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಈ ಘಟನೆಗಳು ಬೆಂಕಿಯಿಡುತ್ತವೆ. iframe ಒಳಗೆ ಈ ಈವೆಂಟ್ಗಳಿಗೆ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಸೇರಿಸುವ ಮೂಲಕ, ಸ್ಪಿನ್ನರ್ ಅನ್ನು ಸರಿಯಾದ ಸಮಯದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಮರುಲೋಡ್ ಸಂಭವಿಸಲಿದೆ ಎಂದು ನೀವು ಪೋಷಕ ವಿಂಡೋಗೆ ಸೂಚಿಸಬಹುದು. ಇತರ ವಿಧಾನಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ ಈ ವಿಧಾನವು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ಸಮಗ್ರ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಕೊನೆಯದಾಗಿ, ಬದಲಾವಣೆಗಳನ್ನು ಪರಿಶೀಲಿಸಲು ನೀವು iframe ಮತದಾನವನ್ನು ಒಂದು ವಿಧಾನವಾಗಿ ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಬಹುದು. ಈ ವಿಧಾನದಲ್ಲಿ, ಪೋಷಕ ಕೋನೀಯ ಅಪ್ಲಿಕೇಶನ್ ನಿಯತಕಾಲಿಕವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ iframe ವಿಷಯವು ಬದಲಾಗಿದೆಯೇ ಅಥವಾ ಮರುಲೋಡ್ ಆಗಿದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು iframe ಒಳಗೆ URL ಅಥವಾ ಇತರ ನಿರ್ದಿಷ್ಟ ಅಂಶಗಳು. ಈ ವಿಧಾನವು ಕಡಿಮೆ ಪರಿಣಾಮಕಾರಿಯಾಗಬಹುದಾದರೂ, ವಿಶೇಷವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ವಿಷಯದಲ್ಲಿ, ಇತರ ವಿಧಾನಗಳು ಕಾರ್ಯಸಾಧ್ಯವಾಗದಿದ್ದಾಗ ಇದು ಹಿಂತಿರುಗುವ ಆಯ್ಕೆಯಾಗಿದೆ. ನ್ಯೂನತೆಯೆಂದರೆ, ಮತದಾನವು ಎಲ್ಲಾ ಪುಟದಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚದಿರಬಹುದು ಆದರೆ ನಿರ್ದಿಷ್ಟ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇನ್ನೂ ಉಪಯುಕ್ತವಾಗಬಹುದು.
Iframe ಮರುಲೋಡ್ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ಕುರಿತು ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- iframe ಮರುಲೋಡ್ ಅನ್ನು ನಾನು ಹೇಗೆ ಕಂಡುಹಿಡಿಯಬಹುದು?
- ನೀವು ಬಳಸಬಹುದು addEventListener("load") iframe ಮರುಲೋಡ್ ಮಾಡಿದಾಗ ಅಥವಾ ಅದರ ವಿಷಯ ಬದಲಾದಾಗ ಪತ್ತೆಹಚ್ಚಲು ಈವೆಂಟ್.
- iframe ನಲ್ಲಿ ನೆಟ್ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಸಾಧ್ಯವೇ?
- ಹೌದು, iframe ಗೆ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಅತಿಕ್ರಮಿಸಬಹುದು fetch ಮತ್ತು XMLHttpRequest.prototype.open HTTP ವಿನಂತಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವ ವಿಧಾನಗಳು.
- iframe ಮತ್ತು ಪೋಷಕ ವಿಂಡೋ ನಡುವೆ ಸಂವಹನ ಮಾಡಲು ನಾನು ಪೋಸ್ಟ್ಮೆಸೇಜ್ ಅನ್ನು ಬಳಸಬಹುದೇ?
- ಹೌದು, ದಿ postMessage API ಐಫ್ರೇಮ್ ಮತ್ತು ಅದರ ಮೂಲ ವಿಂಡೋದ ನಡುವೆ ಸುರಕ್ಷಿತ ಸಂವಹನವನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಅವುಗಳ ನಡುವೆ ಸಂದೇಶವನ್ನು ರವಾನಿಸುವುದನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
- ನಾನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು iframe ಗೆ ಸೇರಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದರೆ ಏನು ಮಾಡಬೇಕು?
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲು ನೀವು ಪ್ರವೇಶವನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಬಳಸಿ MutationObserver API ಅಥವಾ postMessage iframe ಒಳಗಿನ ವಿಧಾನ (ಅದನ್ನು ಬೆಂಬಲಿಸಿದರೆ) ಸಂಭಾವ್ಯ ಪರ್ಯಾಯಗಳು.
- ಐಫ್ರೇಮ್ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು MutationObserver ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ?
- ದಿ MutationObserver DOM ನಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು API ಮಾನಿಟರ್ ಮಾಡುತ್ತದೆ, ಮರುಲೋಡ್ ಮಾಡಿದ ನಂತರ iframe ನೊಳಗಿನ ಅಂಶಗಳು ಬದಲಾದಾಗ ಅದು ನಿಮ್ಮನ್ನು ಎಚ್ಚರಿಸುತ್ತದೆ.
ಕೋನೀಯದಲ್ಲಿ ಐಫ್ರೇಮ್ ಮರುಲೋಡ್ಗಳನ್ನು ಮಾನಿಟರಿಂಗ್ ಮಾಡುವ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ಆಧಾರವಾಗಿರುವ PHP ಕೋಡ್ಗೆ ನೇರ ಪ್ರವೇಶವಿಲ್ಲದೆ iframe ಮರುಲೋಡ್ಗಳನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದನ್ನು ಸೃಜನಶೀಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರಗಳೊಂದಿಗೆ ಸಾಧಿಸಬಹುದು. ಈವೆಂಟ್ ಕೇಳುಗರು, ಇಂಜೆಕ್ಟ್ ಮಾಡಿದ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಅಥವಾ ಪೋಸ್ಟ್ಮೆಸೇಜ್ API ಅನ್ನು ಬಳಸುತ್ತಿರಲಿ, ಡೆವಲಪರ್ಗಳು ತಮ್ಮ ಕೋನೀಯ ಅಪ್ಲಿಕೇಶನ್ಗಳು ಸ್ಪಂದಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿರುತ್ತಾರೆ.
ಯೋಜನೆಯ ಸಂಕೀರ್ಣತೆ ಮತ್ತು iframe ಮೇಲಿನ ನಿಯಂತ್ರಣವನ್ನು ಅವಲಂಬಿಸಿ ಪ್ರತಿಯೊಂದು ವಿಧಾನವು ಅದರ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿದೆ. ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಪ್ರಕರಣಕ್ಕೆ ಉತ್ತಮ ಪರಿಹಾರವನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, iframe ವಿಷಯ ಬದಲಾವಣೆಗಳ ಸಮಯದಲ್ಲಿ ವಿಶ್ವಾಸಾರ್ಹ ಸ್ಪಿನ್ನರ್ ಅಧಿಸೂಚನೆಗಳ ಮೂಲಕ ನೀವು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು.
ಉಲ್ಲೇಖಗಳು ಮತ್ತು ಬಾಹ್ಯ ಸಂಪನ್ಮೂಲಗಳು
- ಐಫ್ರೇಮ್ ಈವೆಂಟ್ಗಳು ಮತ್ತು ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಸಂವಹನವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ ವಿವರವಾದ ದಸ್ತಾವೇಜನ್ನು ಇಲ್ಲಿ ಕಾಣಬಹುದು MDN ವೆಬ್ ಡಾಕ್ಸ್ - ಪೋಸ್ಟ್ ಮೆಸೇಜ್ API .
- DOM ಬದಲಾವಣೆಗಳಿಗಾಗಿ MutationObserver ಅನ್ನು ಬಳಸುವ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ, ಇದನ್ನು ನೋಡಿ MDN ವೆಬ್ ಡಾಕ್ಸ್ - MutationObserver .
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು iframes ಗೆ ಇಂಜೆಕ್ಟ್ ಮಾಡುವ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಲು, ಈ ಸಂಪನ್ಮೂಲವನ್ನು ಪರಿಶೀಲಿಸಿ StackOverflow - ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು iframe ಗೆ ಇಂಜೆಕ್ಟ್ ಮಾಡಿ .