Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Direct Manipulation Example</title> <style> #childIframe { width: 100%; height: 200px; border: 1px solid black; margin-top: 20px; } </style> </head> <body> <h1>Direct Manipulation Example</h1> <!-- Button to Open Popup --> <button id="openChild">Open Child Window</button> <div id="parentChildDisplay"></div> <!-- Iframe --> <iframe id="childIframe" srcdoc=" <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Child Iframe</title> </head> <body> <div id='childIframeContent'>Initial Content</div> </body> </html> "></iframe> <!-- Scripts for Parent Window --> <script> document.getElementById('openChild').addEventListener('click', () => { const childWindow = window.open('', 'childWindow', 'width=600,height=400'); childWindow.document.write(` <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Child Window</title> </head> <body> <div id='childContent'>Initial Content</div> </body> </html> `); // Ensure the content is updated after the window has fully loaded setTimeout(() => { childWindow.document.body.innerHTML += '<p>Message from parent window</p>'; }, 1000); // Adjust the timeout duration as necessary }); const iframe = document.getElementById('childIframe'); iframe.onload = () => { const iframeDoc = iframe.contentWindow.document; iframeDoc.getElementById('childIframeContent').innerText += ' - Updated by Parent Window'; }; </script> </body> </html>