I am rendering an iFrame developed by a different org using:

<script type="text/javascript" src="https://externalUrl/popup.js"></script>
<iframe ref={iframeRef} id="ImportantFrame" src={iframeURL}></iframe>

The iframe contains among other things a close button, which when clicked calls a non-existent 'closePopUp()` function:

How can I insert my own function into my website which will handle this call if I cannot directly modify the code rendered by the iFrame?

Attempt 1

I tried embedding a function directly into my react code:

function closePopup() {
    console.log('called react script')
}

But that didn't get called.

Attempt 2

I also tried creating a vanilla JS file with the following:

function closePopup() {
    console.log('called custom script')
}

document.addEventListener("DOMContentLoaded", function(){
    console.log('document loaded')
});

'document loaded' did appear on page load confirming that my custom vanilla JS works, but closePopUp() didn't get called.

Is there a way I can handle the function call without directly modifying the source code inside the rendered iFrame?