programming javascript

Javascript thay đổi url onclick

Bài trước chúng ta đã được tìm hiểu về cửa sổ đối tượng trong javascript rồi, và trong cửa sổ đối tượng này cũng bao gồm rất nhiều đối tượng đi kèm theo nó như tài liệu, vị trí,. Và bài hôm nay chúng ta sẽ tìm hiểu về vị trí đối tượng trong javascript

1, Vị trí đối tượng trong javascript

- Vị trí đối tượng là con của cửa sổ đối tượng và vị trí đối tượng này chuyên dùng để xử lý, điều hướng url của trang web

cú pháp

window.location;

-Trong vị trí đối tượng cũng bao gồm rất nhiều thuộc tính, phương thức con khác. Các bạn có thể 





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
0 để xem chi tiết

2, Các thuộc tính trong vị trí

Dưới đây mình sẽ liệt kê các thuộc tính và chức năng của nó trong vị trí của đối tượng

  • băm. gán hoặc lấy phần sau dấu 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    0 của URL
  • chủ nhà. gán hoặc lấy 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    1 và cổng 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    2 của URL
  • tên máy chủ. gán hoặc lấy 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    3
  • href. gán hoặc lấy URL
  • nguồn gốc. Trả về đầy đủ đường dẫn của trang hiện tại
  • tên đường dẫn. gán hoặc lấy 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
  
    

    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    4 của URL
  • Hải cảng. gán hoặc lấy 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    5 của URL
  • Tìm kiếm. lấy phần truy vấn 
    



	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
    Click vào button để xem kết quả
    
	Click để hiển thị thông tin trang
	
    
	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
    ';
			info += 'host: ' + window.location.host + '
    ';
			info += 'hostname: ' + window.location.hostname + '
    ';
			info += 'href: ' + window.location.href + '
    ';
			info += 'origin: ' + window.location.origin + '
    ';
			info += 'pathname: ' + window.location.pathname + '
    ';
			info += 'port: ' + window.location.port + '
    ';
			info += 'search: ' + window.location.search + '
    ';
			document.getElementById['results'].innerHTML = info;
		}
    6 của URL

VD. show all the information of the browser





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}

Xem Kết Quả

VD. Chuyển hướng trang web bằng javascript




    
    
    Toidicode.com  demo location


    
click vào button để xem kết quả

    Di chuyển trang
    
        function redirect[]{
            window.location.href = "//toidicode.com";
        }

Xem Kết Quả

3, Các phương thức trong vị trí

Phương thức reload[]

-Phương thức 





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
7 có tác dụng tải lại trang web, giống như khi bạn nhấn 




	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
8 trên bàn phím

cú pháp





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
2

VD. Tải lại trang web bằng cách nhấn vào nút





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
3

Xem Kết Quả

Phương thức thay thế[]

-Phương thức này cũng có tác dụng chuyển hướng url như thuộc tính href, nhưng khi sử dụng 





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
9 thì trình duyệt sẽ không lưu vào lịch sử, còn 



    
    
    Toidicode.com  demo location


    
click vào button để xem kết quả

    Di chuyển trang
    
        function redirect[]{
            window.location.href = "//toidicode.com";
        }
0 thì có lưu

cú pháp





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
6

in which. url is address that you want to redirect

VD





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
7

Xem Kết Quả

Phương thức gán[]

-Phương thức này thì lại không thuộc tính gì khác

cú pháp





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
8

in which. url is address that you want to redirect

VD





	
	Toidicode.com demo location


	p{
		border:1px solid #dddddd;
		background: #e1e1e1;
		padding: 10px;
	}


	
Click vào button để xem kết quả

	Click để hiển thị thông tin trang
	

	
		function getInfo[] {
			var info = 'hash: ' + window.location.hash + '
';
			info += 'host: ' + window.location.host + '
';
			info += 'hostname: ' + window.location.hostname + '
';
			info += 'href: ' + window.location.href + '
';
			info += 'origin: ' + window.location.origin + '
';
			info += 'pathname: ' + window.location.pathname + '
';
			info += 'port: ' + window.location.port + '
';
			info += 'search: ' + window.location.search + '
';
			document.getElementById['results'].innerHTML = info;
		}
9

Xem Kết Quả

3, Lời kết

-Bài này mình chỉ trình bài cơ bản về phần thuộc tính của đối tượng vị trí thôi còn các bạn muốn tìm hiểu sau hơn về từng thuộc tính thì có thể nghiên cứu thêm nhé

Bài Viết Liên Quan

Does 2023 Lincoln Aviator have Sync 4?
11 số la bao nhiêu tiền
Tôi đặt mã php trong html ở đâu?
Định dạng số trong javascript là gì?
Làm thế nào tôi có thể biết nếu php hôm nay là thứ hai?
Làm cách nào để kiểm tra xem một chuỗi có kết thúc bằng một số trong python không?
Mẫu tóc ép cụp đẹp 2023
Đồng bộ hóa bảng tính Google với cơ sở dữ liệu
Làm cách nào tôi có thể chuyển biến từ trang này sang trang khác trong php?
Dòng điền bị vô hiệu hóa trong Excel
Java hay JavaScript khó học hơn?
MariaDB có thay thế MySQL không?
What month does Eid Al-Fitr fall in 2023?
Những gì được sử dụng để kết thúc một câu lệnh trong php?
Khóa cuộn Excel
Python gửi yêu cầu tới localhost
Bạn có thể nén hai mảng trong Python không?
Excel tìm số trong cột
Lồng nhau nếu trong JavaScript w3schools
Mongodb có thể được sử dụng để phân tích dữ liệu không?

Toplist mới

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
6 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
6 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
6 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
6 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
6 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
6 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
6 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
6 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
6 tháng trước

Bài mới nhất

Cải làm dưa chua là cải gì năm 2024
Các sản phẩm làm đẹp tiếng anh là gì năm 2024
Bán hàng phát sinh giảm giá hoạch toán tn năm 2024
Lá thư trong tiếng anh là gì năm 2024
Mẫu hợp đồng thanh toán qua bên thứ 3 năm 2024
Giải sách bài tập tiếng anh lớp 7 trang 8 năm 2024
1994 sinh con năm 2023 tháng nào tốt năm 2024
Dịch vụ chuyển văn phòng tại thanh hóa năm 2024
Font việt hóa không hiển thị giống như demo năm 2024
Các trường của 1 đối tượng là gì năm 2024

Chủ Đề

programming Hỏi Đáp Là gì Mẹo Hay Toplist Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Tiếng anh Top List bao nhieu bao nhiêu hướng dẫn Món Ngon So Sánh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Máy tính Đại học