How to detect a click in an iframe in order to front a jsPanel containing the iframe.

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!

Relevant javascript code in host document:

<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>

Relevant javascript code in document displayed in iframe:

<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>