URL from iFrame to address bar without browser refresh

Question

I am looking for a javascript because I know that it does not work via PHP.

I have integrated a forum on my site via iFrame and I would like every newly loaded page in the iFrame to insert the parameters of the URL in my address line without the browser having to reload it...

I call up the page with the iFrame like this: https://example.org/forum.php -- here I then come directly to the start page of my forum with the iFrame URL: https://example.org/forum/

When I click through the forum, I naturally have parameters in the iFrame URL such as https://example.org/forum/memberlist.php?mode=viewprofile&u=60 .

I now want to add these parameters to my address bar every time you click through the iFrame.

So iFrame URL https://example.org/forum/memberlist.php?mode=viewprofile&u=60 should then become https://example.org/forum.php?url=memberlist.php?mode=viewprofile&u=6 in the address bar.

And that's without my browser having to reload....

This is what my PHP looks like

if( empty( $_GET['url'] ) )
{
    $url = 'https://example.org/forum/';
} else {
    
    $query = str_replace( 'url=' , '', parse_url( $_SERVER['REQUEST_URI'], PHP_URL_QUERY ) );
    $url = 'https://example.org/forum/' . $query;
}

<iframe src="<?php echo $url; ?>" frameborder="0" width="100%" scrolling="no" onload="resizeIframe(this)" />

It should just seem as if the forum is firmly integrated into my website, or at least I'm trying to. My main page has a user table and I could import the same users into the forum with the same password. If someone logs into my website, the user is automatically logged into the forum. It would therefore be interesting to be able to use the forum without having the feeling of being on another site.

I hope I have explained this in an understandable way. Do you know what I mean?

Answer 1

I found something:

<script>
      function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
      }
    
    setInterval(function() {
    
        var iframeUrl = document.getElementById("the-iframe").contentWindow.location.href;
    
        if (window.lastIframeUrl !== iframeUrl) {
            console.log("iframe url changed", iframeUrl);
            window.lastIframeUrl = iframeUrl
    
            
            replaceResult = iframeUrl.replace('https://example.org/forum/', '');
            history.pushState('', '', 'https://example.org/forum.php?url='+replaceResult);
        }
    
    }, 100)
    
</script>

<iframe id="the-iframe" src="_URL_"></iframe>