Home Web Front-end JS Tutorial Analysis of the difference between window.location and document.location_javascript skills

Analysis of the difference between window.location and document.location_javascript skills

May 16, 2016 pm 06:57 PM

document.location This object contains the information of the current URL
location.host Get the port number
location.hostname Set or get the host name
location.href Set or get the entire URL
location.port Set or Get the port number of the URL
location.search Set or get the part following the question mark in the href attribute
------------------------ -------------------------------------------------- -----
Application of window.location in js
URL is: Uniform Resource Locator (URL)
The complete URL consists of these parts:
scheme: //host:port/path?query#fragment
scheme: Communication protocol
Commonly used http, ftp, maito, etc.
host: host
Server (computer) Domain Name System (DNS) host name or IP address.
port: port number
Integer, optional. When omitted, the default port of the scheme is used. For example, the default port of http is 80.
path: path
A string separated by zero or more "/" symbols, generally used to represent a directory or file address on the host.
query: Query
is optional and is used to pass parameters to dynamic web pages (such as web pages made using CGI, ISAPI, PHP/JSP/ASP/ASP.NET and other technologies). There can be multiple parameters, use " Separated by &" symbols, the name and value of each parameter are separated by "=" symbols.
fragment: information fragment
String, used to specify the fragment in the network resource. For example, if there are multiple noun explanations in a web page, you can use fragment to directly locate a certain noun explanation. (Also called anchor point.)
For a URL like this
http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
We can use javascript to get each part of it
1, window.location.href
The entire URL string (the complete address bar in the browser)
The return value in this example: http: //www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
2,window.location.protocol
Protocol part of URL
The return value in this example: http:
3,window.location.host
The host part of the URL
The return value in this example: www.x2y2.com
4,window.location.port
The port part of the URL
If the default port 80 is used (update: even if :80 is added), then the return value is not the default 80 but an empty character
In this case the return value is: ""
5, window.location.pathname
The path part of the URL (that is, the file address)
The return value in this example:/fisker/post/0703/window.location.html
6,window.location.search
In the query (parameter) part
in addition to assigning values ​​to dynamic languages, we can also assign values ​​to static pages and use javascript to obtain the corresponding parameter values ​​
The return value in this example:?ver=1.0&id=6
7,window.location.hash
Anchor ======================================== ====
document.href="http://www.jb51.net"
document.location="http://www.jb51.net"
window.location="http: //www.jb51.net"
It’s just a question of inclusion
One is window and the other is document
location is an object. For example, the attributes of document.location and window.location on this page are
location .hostname = community.csdn.net
location.href = http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02
location.host = community. csdn.net
location.hash =
location.port =
location.pathname = /Expert/topic/4033/4033372.xml
location.search = ?temp=2.695864E-02
location.protocol = http:
It can be seen that href is the attribute type of location, which is string.
[document object]
This object is an attribute of the window and frames objects, and is a document displayed in the window or frame.
Attributes
alinkColor The color of the active link (ALINK)
anchor An HTML anchor, created using the tag (the attribute itself is also an object)
anchors array lists the document anchor objects Array (
) (this attribute itself is also an object)
bgColor The background color of the document (BGCOLOR)
Cookie is a piece of information stored in the cookie.txt file, which is an attribute of the document object
 fgColor The text color of the document (TEXT attribute in the tag)
Form A form (

) in the document (the attribute itself is also an object)
Forms anay appears in the document as it appears An array of form objects listed in order (this property itself is also an object)
LastModified The last modified date of the document
linkColor The color of the link to the document, that is, the LINK attribute in the tag (link to user No observed document)
link A
tag in the document (the attribute itself is also an object)
links array An array of link objects in the document, arranged in the order they appear in the document (the The attribute itself is also an object)
Location The URL of the currently displayed document. The user cannot change document.location (because this is the location where the document is currently displayed).However,
can change window.location (replace the current document with another document) window.location itself is also an object, and
document.location is not an object
referrer contains the URL of the linked document, which the user clicks The link can reach the current document
Title The title of the document ((TITLE>)
vlinkColor The text color of the link pointing to the document that the user has observed, that is, the VLINK attribute of the tag
Method
clear Clear Specify the content of the document
close close the document stream
open open the document stream
write write the text into the document
writeln write the text into the document and end with a newline character
[window object]
It is a top-level object, not a property of another object, that is, the browser window
Property
defaultStatus The default status bar message
document The currently displayed document (this property itself is also an object. )
frame A frame in the window ((FRAME>) (this attribute itself is also an object)
frames array lists an array of frame objects of the window, listed in the order in which these objects appear in the document (this attribute Itself is also a
object)
History The history list of the window (this attribute itself is also an object)
Length The number of frames in the window
Location The complete (absolute) URL of the document displayed in the window (this attribute It is also an object in itself) Do not confuse it with document.location
, which is the URL of the currently displayed document. The user can change window.location (replacing the current document with another document), but cannot change
. document.location (because this is the location where the document is currently displayed)
name When the window is opened, the name given to the window
opener represents the window where the script that uses window.open to open the current window is located (this is Netscape Navigator 3.0beta A new attribute introduced by
in 3)
 Parent contains the synonym of the window of the current frame. An attribute of the frame and window objects
 self The synonym of the current window or frame
Status The message in the status bar
Top synonym for the topmost browser window containing the current frame
window synonym for the current window or frame, the same as self
Method
alert() Open an Alert message box
clearTimeout() Used to terminate the work of the setTimeout method
Close() Close the window
Confirm() Open a Confirm message box, the user can choose OK or Cancel, if the user clicks OK, this method returns true, click
Cancel returns false
 blur() Moves the focus from the specified window (this is a new method introduced in Netscape Navigator 3.0 beta 3)
 focus() Brings the specified window to the foreground (another new method)
open() opens a new window
prompt() opens a Prompt dialog box, the user can type text into the box, and returns the typed text to the script
setTimeout() waits for a specified number of milliseconds, Then run the command event handler event handler
Onload() is triggered when the page is loaded
Onunload() is triggered when the page is closed
Difference: The user cannot change document.location (because this is the location where the document is currently displayed ). However, window.location can be changed (replacing the current document with another document). window.location itself is also an object, while document.location is not an object.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How do I create and publish my own JavaScript libraries? How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

How do I debug JavaScript code effectively using browser developer tools? How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

How do I use source maps to debug minified JavaScript code? How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Mar 15, 2025 am 09:19 AM

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

TypeScript for Beginners, Part 2: Basic Data Types TypeScript for Beginners, Part 2: Basic Data Types Mar 19, 2025 am 09:10 AM

Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript

See all articles