CODEWITHSUNDEEP
javascriptiframe
Cec
Cec

Reputation: 1826

javascript append query-param to iframe src whenever the iframe src attribute changes

in one of our webapps, we have an iframe to ebmed another site we manage.

The two apps/sites have different origins.

On the iframe src we append a query-param so that the site we want to embed does not display its header.

Users can interact with the embedded site and click links to other pages of the embedded site; the URLs in this links do not contain the query-param.

Is it possible for us to detect when a link is clicked or when the iframe starts loading the new URL and to append the query-param on-the-fly?

Thank you :)

Upvotes: 0

Views: 102

Answers (1)

ChrisBurns
ChrisBurns

Reputation: 319

I created this JSFiddle.. I don't believe this is best practice, but based of your use-case.. Capture when a user clicks an iFrame, and add query param or change iFrame source.. Volia: http://jsfiddle.net/dcuf3xvs/1/

focus();
var listener = addEventListener('blur', function() {
    if(document.activeElement === document.getElementById('iframe')) {
        message.innerHTML = 'Redirecting';
    var iframe = document.getElementById('iframe');
    iframe.src = "//example.com?queryParamCentralHere";
    }
    removeEventListener(listener);
});

Upvotes: 1

Related Questions