javascript - jquery to getset href protocol - Stack Overflow

admin管理员组

文章数量:1323029

I have some relative links on my site that need to enforce https even if the current page is http (so I can't just use //links).

I'm guessing there is a pretty easy way for jQuery to retrieve the href upon click, and then set the page location to match the link that was clicked prepended with the HTTPS protocol?

Thanks in advance!

I have some relative links on my site that need to enforce https even if the current page is http (so I can't just use //links).

I'm guessing there is a pretty easy way for jQuery to retrieve the href upon click, and then set the page location to match the link that was clicked prepended with the HTTPS protocol?

Thanks in advance!

• javascript
• jquery

Share Improve this question Follow asked Nov 4, 2011 at 18:53 Al.Al. 29933 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

To get the protocol:

document.location.protocol;

to set the protocol:

document.location.protocol = 'https:';

You need a url joining helper function (the one below is modified from another answer I gave). Complete code, assuming you add class="httpsLink" to the special <a> links:

var urlJoin = function(base, relative)
{
    // See if there is already a protocol on this
    if (relative.indexOf("://") != -1)
        return relative;

    // See if this is protocol-relative
    if (relative.indexOf("//") == 0)
    {
        var protocolIndex = base.indexOf("://");
        return base.substr(0, protocolIndex+1) + relative;
    }

    // We need to split the domain and the path for the remaining options
    var protocolIndexEnd = base.indexOf("://") + 3;
    if (base.indexOf("/", protocolIndexEnd) == -1) // append slash if passed only http://bla.
        base += "/";
    var endDomainIndex = base.indexOf("/", protocolIndexEnd);
    var domain = base.substr(0, endDomainIndex);
    var path = base.substr(endDomainIndex);
    if (path.lastIndexOf("/") != path.length-1) // trim off any ending file name
        path = path.substr(0, path.lastIndexOf("/")+1);

    // See if this is site-absolute
    if (relative.indexOf("/") == 0)
    {
        return domain + relative;
    }

    // See if this is document-relative with ../
    while (relative.indexOf("../") == 0)
    {
        relative = relative.substr(3);
        if (path.length > 1)
        {
            var secondToLastSlashIndex = path.substr(0, path.length-1).lastIndexOf("/");
            path = path.substr(0, secondToLastSlashIndex+1);
        }
    }   
    // Finally, slap on whatever ending is left
    return domain + path + relative;
};

$('a.httpsLink').click(function(e){
    e.preventDefault();
    location.href = urlJoin(location.href, $(this).attr('href')).split('http://').join('https://');
});

This will work with any type of links, be they absolute or relative.

If you're getting all of the links on a page (unlikely) you can use a global selector:

$('a').click(function(e) {
  location.href = this.attr('href').replace("http://", "https://");
});

If you need to be more selective, you can apply a custom class selector to get only certain ones (this class would then have to be applied to those links):

$('.outsideLinkClass').click(function(e) {
  location.href = this.attr('href').replace("http://", "https://");      
});

Edit: After re-reading my answer a little, it occurred to me that the simple replace option might not work if you're using internal links that are based off relative urls. In such a case you will need to make the assignment code a little more involved to ensure that you're modifying a full url and not just trusting to the replace.

Edit 2: An idea for a more robust protocol replacement:

$('.outsideLinkClass').click(function(e) {
  var baseUrl = window.location.pathname.substring(0, window.location.pathname.indexOf('/'));
  location.href = baseUrl.replace("http://", "https://") + this.attr('href');   
});

The code above is untested so you will possibly have to tweak the line that assigns the baseUrl variable to get it right, but this should make it possible.

本文标签： javascriptjquery to getset href protocolStack Overflow