Question

我正在使用传入的HashTag启动FancyBox2。一切正常......直到您向URL添加源代码。我怎样才能让它发挥作用？下面是代码。我假设我需要说hash =一直到一个？如果一个？存在。

Jquery的：

var thisHash = window.location.hash;
if(window.location.hash) {
$(thisHash).fancybox().trigger('click');
}

需要工作的链接：

www.mysite.com/test/#test - 这是有效的

www.mysite.com/test/#test?source=blahblahblah - 这不是

www.mysite.com/test/?source=blahblahblah#test - 这个有效lol

Answer 1

快速回答：哈希标记/命名锚点/片段标识符（如何调用它们）必须在之后正确解析查询字符串（至少为你希望他们是）。 因此您需要相应地构建网址。

superuser.com上的以下问题为您的问题提供了完整的答案（尽管您的问题有点不同，答案是相同的）：

Does an anchor tag come before the query string or after?

虽然http://www.example.com/test/#test?source=blahblahblah是有效的URL，但将被视为散列标记字符串的是整个test?source=blahblahblah部分（未检测到查询字符串）。此外，如果您需要在路径中包含#字符，请记录或查询URL的字符串部分，则必须将其标记为%23。

所以不，你的第二个链接永远不会像你想要的那样工作，即使你需要它像那样工作。

编辑 - 奖金

如果您正在寻找一种简单的方法来将查询字符串添加到PHP中的现有网址，请尝试使用以下代码中的url_add_query_params()：

function build_query($query_data, $numeric_prefix = '', $arg_separator = '&', $inner_call = 0) { // Source: http://php.net/manual/en/function.http-build-query.php#112024 if (!is_array($query_data)) return false; $result = array(); foreach ((array)$query_data as $key => $value) { if ($inner_call) { if (is_numeric($key)) $key = $numeric_prefix . "[]"; else $key = $numeric_prefix . "[$key]"; } else { if (is_int($key)) $key = $numeric_prefix . $key; } if (is_array($value) || is_object($value)) { $result[] = build_query($value, $key, $arg_separator, 1); continue; } $result[] = urlencode($key) . "=" . urlencode($value); } return implode($arg_separator, $result); } function unparse_url($parsed_url) { // Source: http://php.net/manual/en/function.parse-url.php#106731 $scheme = isset($parsed_url['scheme']) ? $parsed_url['scheme'] . '://' : ''; $host = isset($parsed_url['host']) ? $parsed_url['host'] : ''; $port = isset($parsed_url['port']) ? ':' . $parsed_url['port'] : ''; $user = isset($parsed_url['user']) ? $parsed_url['user'] : ''; $pass = isset($parsed_url['pass']) ? ':' . $parsed_url['pass'] : ''; $pass = ($user || $pass) ? "$pass@" : ''; $path = isset($parsed_url['path']) ? $parsed_url['path'] : ''; $query = isset($parsed_url['query']) ? '?' . $parsed_url['query'] : ''; $fragment = isset($parsed_url['fragment']) ? '#' . $parsed_url['fragment'] : ''; return "$scheme$user$pass$host$port$path$query$fragment"; } function url_add_query_params($url, $new_params) { // parse url $url_components = parse_url($url); // return immediately if parsing failed if ($url_components === FALSE) { return $url; } // if $new_params is a query string, parse it if (!is_array($new_params)) { $new_params_str = $new_params; $new_params = array(); parse_str($new_params_str, $new_params); } // parse query string from original url $params_str = isset($url_components['query']) ? $url_components['query'] : ''; $params = array(); parse_str($params_str, $params); // merge the two arrays, keeping later values for identical keys $params = array_merge($params, $new_params); // rebuild query string $url_components['query'] = build_query($params); // rebuild url return unparse_url($url_components); }

示例：

$url = 'http://www.example.com/test/#test'; $new_url = url_add_query_params($url, 'source=blahblahblah'); echo $new_url; // output: http://www.example.com/test/?source=blahblahblah#test echo "\n"; $url = 'http://www.example.com/test/?source=index&param=value#test'; $new_url = url_add_query_params($url, 'source=blahblahblah'); echo $new_url; // output: http://www.example.com/test/?source=blahblahblah&param=value#test

我只是对它进行了轻微测试，但它应该按预期工作。

Answer 2

此www.mysite.com/test/#test?source=blahblahblah链接无效的原因是因为变量：

var thisHash = window.location.hash

...将返回#test?source=blahblahblah。

然后您尝试将thisHash（#test?source=blahblahblah）绑定到fancybox

$(thisHash).fancybox().trigger('click');

...这是无效选择器。

您可能需要编写一个验证window.location.hash的函数，并提取适当的选择器以绑定到fancybox，如：

var _param;
function getSelector(thisHash) {
    if (thisHash.indexOf("?")) {
        _param = thisHash.split("?");
        return _param[0];
    } else {
        return thisHash;
    };
};

检查这些jsfiddle链接：

然后你可以将fancybox绑定到正确的选择器并在运行中添加尾随参数"?source="，如：

var thisHash = window.location.hash;
jQuery(document).ready(function ($) {
    if (window.location.hash) {
        var selector = getSelector(thisHash);
        $(selector).fancybox({
            beforeLoad: function () {
                this.href = this.href + (typeof _param == "undefined" ? "" : "?" + _param[1])
            }
        }).trigger('click');
    }
}); // ready

当URL有源时，HashTag无法显示Div？source = Added

2 个答案: