There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

url-change

Syntax

url-change: ("url") ["page title"] [every (time)] [after (time)][, (url)...];

["page title"] - Page title is optional. If this is not included, the current page title will be used.

This command does two things, it changes the url in the browser to the specified url, and also changes the browser page title to the specified page title. If you only want to change the document title, use the document-title command.

It does not run any ajax commands. You would normally use this command in combination with an ajax command. You can also run ajax commands without using the url-change command. With ajax calls, you don't always want your url to change. The url-change command does not load or reload the page.

In this example, url-change changes the url in the browser to "/about.html", sets the page title in the browser to "About page", and then the ajax command that comes after calls the actual page:

#aboutMenuItem:click {
    url-change: "/about.html" "About page";
    ajax: "/about.html" post json;
}

Note: The above example needs the "afterAjax" event also to handle showing the ajax result - it is not a full example of how to load a page with ajax. It only shows the syntax needed for url-change. See the ajax command for more on this.

url-change

Click a link to change the url and the browser page title.

Note that your browser history and page refresh button won't work after this as these pages don't exist, as the pages get added to your browser history for real.

myPage1.html
myPage2.html
myPage3.html
myPage4.html

.urlChangePage:click {
    url-change: "{@href}" "{@data-title}";
    prevent-default: true;
}
<p>Click a link to change the url and the browser page title.</p>
<p>Note that your browser history and page refresh button won't work after this as these pages don't exist, as the pages get added to your browser history for real.</p>

<p>
    <a href="myPage1.html" class="urlChangePage" data-title="My Page 1">myPage1.html</a><br>
    <a href="myPage2.html" class="urlChangePage" data-title="My Page 2">myPage2.html</a><br>
    <a href="myPage3.html" class="urlChangePage" data-title="My Page 3">myPage3.html</a><br>
    <a href="myPage4.html" class="urlChangePage" data-title="My Page 4">myPage4.html</a>
</p>