如何从父页面获取查询字符串？答案

【问题标题】：how to get the querystring from a parent page?如何从父页面获取查询字符串？
【发布时间】：2011-12-19 05:51:42
【问题描述】：

我在我的父页面中使用 iframe ipage。我想在父页面的 javascript 中获取查询字符串？

【问题讨论】：

stackoverflow.com/questions/647259/javascript-query-string ...对于您所在的页面。嗯！
如何重定向到下一页？
你能在 iframe src 中包含父 url 吗？ - stackoverflow.com/questions/2743751/iframe-parent-url
Get query string values in JavaScript 的可能副本。那里的任何解决方案都可以将window.location.search 替换为window.parent.location.search 以在父框架上工作。
未来读者：别忘了查看答案的日期！只有一个答案使用远程最新 (ES6) 功能

【解决方案1】：

我建议你使用我最喜欢的功能：

 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;
            }

只需像这样从子窗口中调用它，并将查询字符串作为对象进行操作。

例如，如果您有查询字符串?name=stack 并且想要获取它，请尝试：

getQueryString().name

这将返回stack。

【讨论】：

请问为什么最后一行是return ((qsJsonObject != null) ? (qsJsonObject) : (null)); 而不是return qsJsonObject;？使用原样的代码，qsJsonObject 永远不会为空，因为当它被声明时，它被分配给一个空对象。
哦，是的，抱歉：D 这可能是旧代码的泄漏；）谢谢我编辑了它

【解决方案2】：

@Marawan 的回答很好。 - 如果它可以帮助任何人...... 我对此进行了扩展以选择目标作为参数（自身/父级）

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;
}

例如。

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

【讨论】：

【解决方案3】：

ES6 实现：

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
        }
    }, {})
}

用法：

getQueryParameters().name

【讨论】：