I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday based on search to learn the basics of window popup management related. I had some problems with the post, but when I tried it today, it was fine again, it was strange.

Today is mainly based on search to learn BOM location object and URL interface, is a good day for learning, come on, small and ！！！！

Today’s Lesson summary

  • Location object
  • The URL interface

Location object

what

The Location interface represents the Location (URL) of the object to which it links. The changes made are reflected in the objects associated with them. Both the Document and Window interfaces have such a linked Location, accessed through document. Location and window. Location, respectively.

attribute

The Location interface does not inherit any attributes, but implements those from URLUtils.

The property name Attributes that
Location.href A DOMString containing the entire URL
Location.protocol A DOMString containing the protocol for the URL, with a “:” at the end.
Location.host A DOMString containing a domain name, possibly with a “:” at the end of the string following the port number of the URL.
Location.hostname A DOMString containing the URL domain name.
Location.port A DOMString containing the port number.
Location.pathname Contains a DOMString for the path part of the URL, starting with a “/”.
Location.search A DOMString containing the URL argument, starting with a “?” .
Location.hash DOMString that contains the block identifier, starting with a “#”.
Location.username A DOMString containing the username that precedes the domain name in the URL.
Location.password A DOMString containing the password that precedes the URL domain name.
Location.origin read-only, containing the standard form DOMString of the domain name from which the page originated.

DOMString description: https://developer.mozilla.org/zh-CN/docs/Web/API/DOMString

methods

Location does not inherit any methods, but implements methods from URLUtils.

Location.assign()

Loads the content resource for the given URL onto the object associated with this Location object.

// Jump to the new url
document.location.assign('http://www.example.com')
Copy the code

Location.reload()

Reload the resource from the current URL.

It has a special optional argument of type Boolean,

  • When this parameter is true, the refresh caused by this method must load data from the server.

  • If false or this parameter is not specified, the browser may load the page from the cache.

// Jump to the new url
document.location.reload(true)
Copy the code

The page actually reloads ~~~~~~ after execution

Location.replace()

Replaces the current resource with the given URL.

Unlike the assign() method, new pages that are replaced with replace() are not saved in the History of the session, meaning users will not be able to use the back button to go to that page.

// Jump to the new url
document.location.replace('http://www.example.com')
Copy the code

Location.toString()

Return a DOMString containing the entire URL.

It has the same effect as reading urlutils.href. But you can’t change the value of Location with it.

// Jump to the new url
document.location.assign('http://www.example.com')
Copy the code

case

var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org console.log(url.port); // (blank - https assumes port 443) console.log(url.pathname); // /en-US/search console.log(url.search); / /? q=URL console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org Copy the code

tip

This feature is often used to automatically scroll pages to new anchors.

document.location.href = '#top';
/ / is equivalent to
document.location.hash = '#top';
Copy the code

Rewriting location directly is equivalent to writing the href property.

document.location = 'http://www.example.com';
/ / is equivalent to
document.location.href = 'http://www.example.com';
Copy the code

In addition, the location. href attribute is the only one that the browser allows to write across domains, meaning that a non-homologous window can override the location. href attribute of another window (such as a child window and a parent window), causing the url of the latter to jump.

None of the other attributes of Location are allowed to be written across domains.

The URL interface

what

The URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties that allow you to easily read and modify the URL component.

Typically, a new URL object is created by specifying the URL as a string or providing a relative URL and a base URL when the CONSTRUCTOR of the URL is called.

You can then easily read parsed parts of the URL or make changes to the URL.

If the browser does not yet support the URL() constructor, you can use the window.url property in Window. Make sure that any of the target browsers you check require this prefix.

The constructor

basis

The URL() constructor returns a newly created URL object representing the URL defined by a set of parameters.

url = new URL(url, [base])
Copy the code

Creates and returns a URL object that references a URL specified using an absolute URL string, a relative URL string, and a base URL string.

parameter

  • url

Is a DOMString representing an absolute or relative URL.

If the URL is a relative URL, base is used as the base URL. If the URL is an absolute URL, base is ignored, whether or not it is given.

  • The base of the optional

Is a DOMString representing the base URL.

If the URL string is a relative path, the second parameter representing the absolute path is needed as a base for calculation.

If not specified, the default is ”.

If the given base URL or generated URL is not a valid URL link, a DOMException of type SYNTAX_ERROR is thrown.

Matters needing attention

If the argument is another URL instance, the constructor automatically reads the href attribute of that instance as the actual argument.

var url1 = new URL('index.html'.'http://example.com');
url1.href
// "http://example.com/index.html"

var url2 = new URL('page2.html', url1);
url2.href // "http://example.com/page2.html"  var url3 = new URL('.. '.'http://example.com/a/b.html') url3.href // "http://example.com/" Copy the code

In the above code, the path of the returned URL instance is obtained by switching to the first parameter on the basis of the second parameter.

In the last example, the first argument is.. Is the upper-layer path.

attribute

The property name Attributes that
hash USVString containing ‘#’, followed by the fragment identifier of the URL.
host A USVString that contains the domain (that is, the host name) followed by (if a port is specified) “:” and the port of the URL.
hostname USVString that contains the URL domain name.
href The USVString that contains the full URL.
origin read-only Return a USVString containing the protocol name, domain name, and port number.
password The USVString containing the password specified in front of the domain name.
pathname DOMString that begins with a ‘/’ and follows the URL file path.
port USVString containing the URL port number.
protocol The USVString containing the URL protocol name, followed by a ‘:’.
search A USVString, indicating the URL’s argument string; If any arguments are provided, the string includes all of them, starting with a “?” The leading character.
SearchParams read-only URLSearchParams object that can be used to access the various query parameters found in search.
username The USVString that contains the username specified in front of the domain name.

USVString description: https://developer.mozilla.org/zh-CN/docs/Web/API/USVString

The Location property is basically the same as the URL property ~~~~, but it’s always DOMString, USVString

methods

toString()

Returns a USVString containing the entire URL. It is a synonym for url.href, although it cannot be used to modify values.

var url3 = new URL('.. '.'http://example.com/a/b.html')
url3.toString()
Copy the code

toJSON()

Returns a USVString containing the entire URL. It returns the same string as the href attribute.

var url3 = new URL('.. '.'http://example.com/a/b.html')
url3.toJSON()
Copy the code

A static method

createObjectURL()

The url.createObjecturl () static method creates a DOMString with a URL representing the object given in the argument.

The lifecycle of this URL and the Document binding in the window that created it.

objectURL = URL.createObjectURL(object);
Copy the code

This new URL object represents the specified File object or Blob object.

Have a look at the example, feel good trouble, or use later to understand in detail.

revokeObjectURL()

RevokeObjectURL () static method is used to release a previously existing URL object created by calling url.createObjecturl ().

When you’re done with a URL object, you should call this method to let the browser know that you don’t need to keep a reference to the file in memory.

window.URL.revokeObjectURL(objectURL);
Copy the code

You can call revokeObjectURL() any time after sourceOpen has been processed. This is because createObjectURL() simply means associating a media element’s SRC attribute with a MediaSource object.

Calling revokeObjectURL() puts the potential object back in place, allowing the platform to do garbage collection when appropriate.

Have a look at the example, feel good trouble, or use later to understand in detail.

Summary of today’s lesson


Today the mood

Today is mainly based on the search to learn BOM location object and URL interface, I hope to learn more tomorrow ~~~~


This article is formatted using MDNICE