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.

1 month 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?
Houcem B. A. Chlegou 1 month 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 1 month 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