how to get the querystring from a parent page?

Question

i am using an iframe ipage in my parentpage. I would like to get the querystring in javascript of the parentpage?

stackoverflow.com/questions/647259/javascript-query-string ...for the page you're in. hmm! — david van brink
– david van brink, Commented Nov 1, 2011 at 5:11
can you include the parent url in the iframe src? - stackoverflow.com/questions/2743751/iframe-parent-url — Neil Thompson
– Neil Thompson, Commented Nov 1, 2011 at 7:29
possible duplicate of Get query string values in JavaScript. Any of the solutions there can have window.location.search replaced with window.parent.location.search to work on the parent frame instead. — Andy E
– Andy E, Commented Nov 1, 2011 at 9:13
Future readers: don't forget to look at the answers' dates! Only one answer uses remotely recent (ES6) functionality — Ollie
– Ollie, Commented Aug 17, 2021 at 2:49

BiscuitBaker · Accepted Answer · 2015-01-27 11:46:54Z

17

I suggest to you to use my favourite function:

 function getQueryString() {
                var queryStringKeyValue = window.parent.location.search.replace('?', '').split('&');
                var qsJsonObject = {};
                if (queryStringKeyValue != '') {
                    for (i = 0; i < queryStringKeyValue.length; i++) {
                        qsJsonObject[queryStringKeyValue[i].split('=')[0]] = queryStringKeyValue[i].split('=')[1];
                    }
                }
                return qsJsonObject;
            }

Just call it from the child window like this and act with the query string as an object.

For example if you have the query string ?name=stack and you want to get it, try:

getQueryString().name

This will return stack.

edited Jan 27, 2015 at 11:46

BiscuitBaker

1,4173 gold badges23 silver badges37 bronze badges

answered Nov 1, 2011 at 7:57

Marwan

2,4021 gold badge21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rossipedia Over a year ago

May I ask why that last line is return ((qsJsonObject != null) ? (qsJsonObject) : (null)); instead of just return qsJsonObject;? With the code as is, qsJsonObject will never be null, since when it's declared it's assigned to an empty object.

Marwan Over a year ago

oh yes sorry :D it may be a leak from an old code ;) thanks i edited it

codifier · Accepted Answer · 2015-07-10 11:35:16Z

nice answer from @Marawan. - if it helps anyone... I extended this to choose the target as a parameter (self / parent)

function getQueryString(target) {
    if ( target == 'parent' ) {
        var queryStringKeyValue = window.parent.location.search.replace('?', '').split('&');
    }
    else {
        var queryStringKeyValue = window.location.search.replace('?', '').split('&');
    }

    var qsJsonObject = {};
    if (queryStringKeyValue != '') {
        for (i = 0; i < queryStringKeyValue.length; i++) {
            qsJsonObject[queryStringKeyValue[i].split('=')[0]] = queryStringKeyValue[i].split('=')[1];
        }
    }
    return qsJsonObject;
}

eg.

getQueryString('parent').id;    // get iframe parent url ?id=foo
getQueryString().id;    // get this url ?id=foo

Matimu-Mbino · Accepted Answer · 2021-06-21 10:53:51Z

1

ES6 implementation:

export const getQueryParameters = () => {
    const queryStringKeyValue = window.parent.location.search.replace('?', '').split('&');
    return queryStringKeyValue.reduce((acc, curr) => {
        const [key,value] = curr.split('=')
        return {
            ...acc,
            [key]: value
        }
    }, {})
}

Usage:

getQueryParameters().name

answered Jun 21, 2021 at 10:53

Matimu-Mbino

111 bronze badge

Collectives™ on Stack Overflow

how to get the querystring from a parent page?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related