来源于:http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js/
URI.js is a mature javascript library for manipulation of URI. URI.js provides methods to get or set query string values using javascript functions on browsers.
Download URI.js or URI.min.js from or build it from . Add it into your html page for using it in your script.
- ="text/javascript" src="/js/URI.js"></script>
- function getQueryStringValue(queryParam){
- // Get current URL.
- var currentURL = new URI();
- // If queryParam is in the querystring of currentURL
- if(currentURL.hasQuery(queryParam)){
- // Get all querystring values as a json object
- var qsValues = currentURL.query(true);
- // return queryParam's value
- return qsValues[queryParam];
- }
- else
- {
- // queryParam is not in the querystring. So return as undefined.
- return undefined;
- }
- }
- // If currentURL="http://www.ecommerce.com/product.html?customerId=27" then,
- // getQueryStringValue("customerId") returns "27"
- // getQueryStringValue("notPresentQueryParam") returns undefined
URI.js offers methods for manipulating URLs. Please see below code to get an intro on few possible operations with URI.js.
JavaScript
- // Get current URL from the browser bar.
- var url = new URI();
- // return http://smoothprogramming.com/tutorials/get-set-query-string-values-from-url-using-uri-js
- // This is equivalent to window.location.href command in js.
- url = new URI("http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html");
- // Sets URL to http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html
- url;
- // return "http://www.smoothprogramming.com:80/tutorials/get-set-query-string-values-from-url-using-uri-js.html"
- url.protocol());
- // return "http"
- url.origin();
- // return "http://www.smoothprogramming.com:80"
- url.hostname());
- // return "www.smoothprogramming.com"
- url.host());
- // return "www.smoothprogramming.com:80"
- url.port());
- // return "80"
- url.path());
- // return "/tutorials/get-set-query-string-values-from-url-using-uri-js.html"
- url.directory());
- // return "/tutorials"
- url.filename());
- // return "get-set-query-string-values-from-url-using-uri-js.html"
- // Querystring values
- url = new URI("http://www.ecommerce.com/product.html?customerId=27&checkout=true");
- // Get querystring part from URL
- url.query();
- // returns "customerId=27&checkout=true"
- // Get Querystring value as JSON object
- url.query(true);
- // returns "{"customerId":"27","checkout":"true"}"
- //Is customerId in the querystring list ?
- url.hasQuery("customerId");
- // returns true
- //Is dummyQuerystr in the querystring list ?
- url.hasQuery("dummyQueryStr");
- // returns false
- // Is customerId value = 27?
- url.hasQuery("customerId", "27");
- // returns true
- //is customerId value = 50?
- url.hasQuery("customerId", "50");
- // returns false
- url = new URI("http://www.ecommerce.com/product.html");
- //set customerId as Querystring
- url.addQuery("customerId", "27");
- //returns "http://www.ecommerce.com/product.html?customerId=27"
- //Remove customerId as Querystring
- url.removeQuery("customerId");
- // returns "http://www.ecommerce.com/product.html"
- 在线实例:http://codepen.io/hiralbest/pen/kXwPKP
This post has only most useful and important list of methods to manipulate URL using URI.js. If you are interested in detail documentation of all URI.js then, please refer .
来源: http://www.bubuko.com/infodetail-1945568.html