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?

http://stackoverflow.com/questions/647259/javascript-query-string ...for the page you're in. hmm! — david van brink, Nov 01 '11 at 05:11
can you include the parent url in the iframe src? - http://stackoverflow.com/questions/2743751/iframe-parent-url — Neil Thompson, Nov 01 '11 at 07:29
possible duplicate of [Get query string values in JavaScript](http://stackoverflow.com/questions/901115/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, Nov 01 '11 at 09:13
Future readers: don't forget to look at the answers' dates! Only one answer uses remotely recent (ES6) functionality — Ollie, Aug 17 '21 at 02:49

score 16 · Accepted Answer · edited Jan 27 '15 at 11:46

16

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 '15 at 11:46

BiscuitBaker

1,421
3
23
37

answered Nov 01 '11 at 07:57

Marwan

2,362
1
20
35

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. – rossipedia Nov 01 '11 at 08:50
oh yes sorry :D it may be a leak from an old code ;) thanks i edited it – Marwan Nov 01 '11 at 09:10

codifier · Answer 2 · 2015-07-10T11:35:16.987

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

score 1 · Answer 3 · answered Jun 21 '21 at 10:53

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

how to get the querystring from a parent page?

3 Answers3