Question

我的照片网站上的抽象摄影页面使用如下链接：

myphotosite.com/abstract.html

该页面使用脚本调用Flickr API来获取我的照片和信息。它包括如下几行：

    {
        photo_set: "abstract",
        tags: "best"
    },

我的网站目前有大量页面和大量脚本（每个照片集各一个）。我想做的是在URL中有一页加变量，还有一个使用变量的脚本。按照上面的示例，链接将如下所示：

myphotosite.com/page.html?variable_1=abstract&variable_2=best

脚本将是这样的：

    {
        photo_set: "variable_1",
        tag: "variable_2"
    },

如何将url中的变量传递给该页面上使用的脚本？

Answer 1

您可以使用URL API来解析页面的URL并从中提取查询参数。请参见以下演示：

// Set this to window.location.href in actual code
let pageUrl = "https://myphotosite.com/abstract.html?variable_1=abstract&variable_2=best";
let url = new URL(pageUrl);

// Construct your object
let obj = {
  photo_set: url.searchParams.get('variable_1'),
  tag: url.searchParams.get('variable_2')
};

console.log(obj);

PS：Internet Explorer不支持URL API。

Answer 2

布拉德（Brad）发布了一个链接，在上面可以找到答案。谢谢你，先生！这是给有兴趣的人的：

这是他链接到的页面： https://stackoverflow.com/a/3855394/362536

从那里，我发现以下代码已添加到脚本顶部，如下所示：

// get the variables

 var url_variable = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

我的原始脚本中使用变量的部分如下：

{
    photo_set: url_variable["album"],
    tag: url_variable["tag"]
},

因此，如果我想要一张我最好的抽象照片的相册，我的网址将是： myphotosite.com/page.html?album=abstract&tag=best

它就像一种魅力！

将URL的一部分变量传递给脚本吗？

2 个答案: