Question

我是Javascript的新手，我在理解如何让以下工作方面遇到一些麻烦。我的目标是在页面加载时执行某个Javascript操作，并且添加到URL末尾的变量将触发要执行的Javascript操作。我要查看的页面的网址是http://www.morgantoolandsupply.com/catalog.php。每个“+扩展”按钮（由Javascript驱动）下拉到页面的某个区域。最后，我希望能够创建一个URL，在页面加载时自动下拉某个类别。有人可以向我解释这个过程吗？在此先感谢您的帮助！

Answer 1

你必须“手动”解析URL，因为url中的参数不会自动传递给javascript，就像它们在服务器端脚本中一样（例如，通过PHP中的$_GET）

一种方法是使用URL片段标识符，即最后可以进入的“#something”位。这可能是最好的方法，因为片段没有发送到服务器，因此不会与任何其他参数混淆

// window.location.hash is the fragment i.e. "#foo" in "example.com/page?blah=blah#foo"
if( window.location.hash ) {
    // do something with the value of window.location.hash. First, to get rid of the "#"
    // at the beginning, do this;
    var value = window.location.hash.replace(/^#/,'');
    // then, if for example value is "1", you can call
    toggle2('toggle' + value , 'displayText' + value);
}

网址“http://www.morgantoolandsupply.com/catalog.php#1”因此会自动展开“toggle1”元素。

或者，您可以使用普通的GET参数（即“？foo = bar”）

var parameter = window.location.search.match(/\bexpand=([^&]+)/i);
if( parameter && parameter[1]) {
    // do something with parameter[1], which is the value of the "expand" parameter
    // I.e. if parameter[1] is "1", you could call
    toggle2('toggle' + parameter[1] , 'displayText' + parameter[1]);
}

window.location.search包含参数，即从问号到结尾或URL片段的所有内容。如果给出URL“example.com/page.php?expand=foo”，则parameter[1]将等于“foo”。所以URL“http://www.morgantoolandsupply.com/catalog.php?expand=1”会扩展“toggle1”元素。

我可能会选择更具描述性而不仅仅是URL中的数字，例如使用下拉列表的标题（所以“#abrasives”或“expand = abrasives”而不是“＃1”或“ expand = 1“），但这需要对现有页面进行一些调整，因此请稍后再将其保留

Answer 2

不是一个完整的答案（“给人一条鱼”等等），但你可以从这些方面开始：

// entire URL
var fullURL = window.location.href;

// search string (from "?" onwards in, e.g., "www.test.com?something=123")
var queryString = window.location.search;

if (queryString.indexOf("someParameter") != -1) {
  // do something
}

有关window.location的更多信息，请访问Mozilla开发人员网络。

话虽如此，鉴于您正在讨论PHP页面，为什么不使用某些服务器端PHP来实现相同的结果呢？

Answer 3

你已经有了调用函数toggle2()，它除了最后一个数字外，所有类别都有两个相同的参数。因此，请创建一个包含该号码的网址：http://www.morgantoolandsupply.com/catalog.php#cat=4

然后使用正则表达式在location.hash中找到该数字。如果您决定在将来使用它们，那么这个足够强大，可以处理多个url参数：/[\#&]cat=(\d+)/。但是，如果您希望永远不会在网址中添加任何其他内容，则可以使用非常简单的方法，例如/(\d+)/。

获得该号码后，只需使用该号码创建两个参数并调用toggle2()即可。

这应该有效：

window.onload = function() {
    if (/[\#&]cat=(\d+)/.test(location.hash)) {
        var cat = parseInt(RegExp.$1);
        if (cat > 0 && cat < 13) {
            toggle2("toggle"+cat, "displayText"+cat);
        }
    }
}

如何使用URL中的变量执行Javascript代码

3 个答案: