在窗口加载时通过 URL 将值传递给 JS 函数答案

【问题标题】：Passing value to JS function through URL on window load在窗口加载时通过 URL 将值传递给 JS 函数
【发布时间】：2011-10-14 16:49:48
【问题描述】：

我的页面http://www.dinomuhic.com/2010/index.php 在页面开头使用 onLoad 调用加载 Showreel，如下所示：

<body onLoad="sndReq('96')">

96 是 SQL 库中 showreel 的 ID。 JS 函数“sndReq”是一个使用 JQuery 的 AJAX 调用，它打开请求的项目并将其显示在主窗口中。

现在我的问题是：如果我想将链接发送给直接打开特定项目的客户，这样他就不必浏览网站了？

http://www.dinomuhic.com/2010/index.php?sndReq=234 之类的东西（当然现在不起作用，只是打开 showreel，可能是因为 body 标签中的 onLoad 覆盖了它）

我该如何实现呢？我希望能够通过 URL 打开特定项目，但如果没有通过 URL 传递任何内容，它应该始终打开项目 96。

提前谢谢你。我敢肯定它很简单，我只是看不到它。

克莱图斯

【问题讨论】：

标签： javascript url variables get onload

【解决方案1】：

您需要解析查询字符串。我发现处理查询字符串的最简单方法是执行以下操作。首先，您需要从 URL 中提取查询字符串：

var queryStr = window.location.search; // will give you ?sndReq=234

然后，您可以去掉? 并将每个查询字符串参数拆分为一个数组：

var paramPairs = queryStr.substr(1).split('&');

现在您可以构建组成查询字符串的名称/值对的哈希表对象：

var params = {};
for (var i = 0; i < paramPairs.length; i++) {
    var parts = paramPairs[i].split('=');
    params[parts[0]] = parts[1];
}

在您的onload 中，您现在可以这样使用该参数：

sndReq(params.sndReq);

确保代码在文档的 head 中的脚本中运行，以便在执行 onload 之前计算它。

【讨论】：

如果字符串包含哈希#怎么办？
这将在window.location.hash 中，不包括在window.location.search 中。
谢谢，我将您和 keeganwatkins 的解决方案合二为一，非常适合我！再次非常感谢你们！
如果有人想知道：var queryStr = window.location.search; var paramPairs = queryStr.substr(1).split('='); var query = paramPairs[1]; if ( !query ) { query = '96'; } sndReq(query);

【解决方案2】：

如果您使用 jQuery，为什么不使用 DOM-ready 处理程序而不是 onload ？在那一点上，如果它只是一个 ajax 请求，你甚至不需要等待 DOM-ready。如果您解析查询，您应该能够将其传递给您现有的函数。

// Wait for DOM-ready, may not be needed if you are just
// making a request, up to you to decide :)
$(function() {
    // window.location.search represents the query string for
    // current URL, including the leading '?', so strip it off.
    var query = window.location.search.replace(/^\?/, "");

    // If there is no query, default to '96'
    if ( !query ) {
        query = '96';
    }

    // Call existing function, passing the query value
    sndReq( query );
});

希望有帮助！干杯。

【讨论】：

嘿，谢谢，我知道如何用 Query 调用替换 body 标记中的 onLoad。但其余的不起作用。给我留下一个没有显示任何项目的页面。我必须把整个功能放在哪里？或者将我们函数中的所有内容放入我的 window.ready 函数就足够了吗？
您应该能够将该函数放在head 标记中，或者将该函数中的代码添加到另一个支持DOM 的处理程序中（如果您已经有一个）。如果您在调用sndReq 之前执行console.log(query)，它是否具有您期望的值？
我像var queryStr = window.location.search; var paramPairs = queryStr.substr(1).split('='); var query = paramPairs[1]; if ( !query ) { query = '96'; } sndReq(query); 一样将它放入window.ready 函数中并且它起作用了。非常感谢

【解决方案3】：

您可以使用 RegExp 来完成此操作，读取 url 参数并将它们传递给 ajax。

这个简单的脚本会读取当前的 url 并通过正则表达式来过滤你指定的参数。

EG: ThisReq = gip('sndReq');从 url 中提取 sndReq 和 value。

<script language="javascript">
    function gip(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            sndReq('96');
         else
            return results[1];
    }
    // parameter pulled from url.
    ThisReq = gip('sndReq');
    // executes function sndReq();
    sndReq(''+ThisReq+'');
</script>

【讨论】：

window.location.search 已经有了这个值（比手动解析更可靠）。另外，如果不需要，为什么还要添加额外的全局变量（gip 和 ThisReq）？
我在我的案例中添加的那些全局变量，因为我有超过 9 个参数要过滤，所有参数都是动态的。我想我只是不知道更好的方法。 ` pfWidth = gup('宽度'); pfHeight = gup('身高'); pfThumbs = gup('拇指'); pfThumbSize = gup('ThumbSize'); pftheURL = gup('theURL'); pfAppID = gup('AppID'); pftheID = gup('theID'); pfDefault = gup('SetDefault'); pfAlbum = gup('DefaultAlbum');`