JS Append a to URL before unload
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi there,
When leaving a page I want to append some information before leaving.

for example
Leaving page a index.html
Going to index2.html but before we leave add index.html?hello=world

The append must be made after the user clicks on a link and before the page leaves of course.

9 months ago
Tags
javascript

Crowdsource coding tasks.

5 Solutions


Here is My bounty:

// similar behavior as an HTTP redirect
window.location.replace("http://sidanmor.com?hello=world");

// similar behavior as clicking on a link
window.location.href = "http://sidanmor.com?hello=world";

//to get a vairable url:
window.location.href = window.location.href +"?hello=world";
//here same getter is setter
are you trying to save user traces, so when clicking saving actions to database? is that what you want?
Chlegou 10 months ago

Here is my solution

<html>
<head>
<script type="text/javascript">
function leaving() {
    window.location.href = window.location.href + "?hello=world";
} 
</script>
</head>

<body onunload="leaving();">
<h1 style="text-align:center">main page</h1>
<a href="index2.html">leave page</a>
</body>
</html>

but you won't see anything as change is too quick. What is the exact purpose of your bounty ?


what about this option? :

//the leave page will do what ever you want to do with your action and redirect to index2.html
<a href="leave.html?hello=world&actualpage=index.html&nextpage=index2.html">leave page</a>

I have the solution in pure Java script though it can be even shorter if you wanted it in jQuery.
I have created two pages index.html and page1.html.

The javascript actually first logs a message on the console before appending the required data to the url
here is index.html.

page2.html should also contain the same JS, i have tested this, try it on your end.

<a href="#" name="link1" class="link">page1<a/>|<a href="#" name="link2" class="link">page2<a/>
</br>
Use the above links
<script>
var elems = document.querySelectorAll(".link");

for (var i=elems.length; i--;) {
elems[i].addEventListener("click", fn, false);
}

function fn() {
if ( this.name == "link1" ) {

    console.log("This is link1");
    window.location.href = "http://localhost:81/testl/?hello=world";

} else if ( this.name == "link2" ) {

    console.log("This is link2");
    window.location.href = "http://localhost:81/testl/page1.html?hello=world";

}
}

`

Did you test my solution?
mashtullah 9 months ago

/**
 * @see http://stackoverflow.com/a/11654596/1071200
 */
function updateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

$(document.body).on('click', 'a', function addQuery(event) {
    var link, url;

    link = $(event.target);
    url = link.attr('href');

    window.location.href = updateQueryString('hello', 'world', url);
});
View Timeline