Since host document and document in the iframe use separate browsing contexts this example uses the BroadcastChannel API to exchange messages between the two documents.
The documents must share the same origin!
<script>
// create/join Broadcast Channel
// creates a new broadcast channel object if it does not exist yet
// or joins the channel if it already exists
const bc = new BroadcastChannel('bcChannel');
// handler for an incoming message from the above created/joined channel
bc.onmessage = (event) => {
console.log(event);
if (event.data === 'iframe_clicked') {
iframeHostPanel.front();
}
}
// create a demo jsPanel with iframe as content
let iframeHostPanel = jsPanel.create({
headerTitle: 'iframe host-panel',
theme: 'rebeccapurple filledlight',
content: '<iframe src="iframe.html" style="width:100%;height:100%;"></iframe>',
contentSize: '400 500',
contentOverflow: 'hidden'
});
// create another demo panel
jsPanel.create({
position: 'center 80 80',
content: '<p>A standard demo panel.</p>'
});
</script>
<script>
// create/join Broadcast Channel
// creates a new broadcast channel object if it does not exist yet
// or joins the channel if it already exists
const bc = new BroadcastChannel('bcChannel');
// click handler posting a message to the channel
document.addEventListener('click', (event) => {
bc.postMessage('iframe_clicked');
});
</script>