Trong bài này chúng ta sẽ tìm hiểu đối tượng location trong Javascript, đây là đối tượng dùng để xử lý chuyển hướng trang, hoặc xử lý các thành phần của URL trên trang web. Show Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Thao tác sử dụng nhiều nhất trên location đó là chuyển hướng redirect, thông qua thuộc tính 1. Location trong javascript là gì?BOM location là một đối tượng được dùng để xử lý các vấn đề liên quan đến URL của trang web trên trình duyệt. Nó được sử dụng rất nhiều trong lập trình web. Location là một thuộc tính đối tượng nằm trong đối tượng window, nên khi sử dụng nó bạn phải thông qua đối tượng Bài viết này được đăng tại [free tuts .net] window.location Bây giờ chúng ta tìm hiểu các phương thức và thuộc tính của location nhé. 2. Các phương thức của location trong javascriptCó ba phương thức chính nằm trong đối tượng location đó là window.location.reload()1, window.location.reload()2 và window.location.reload()3. window.location.reload(url) - tải lại trang webThông thường, để tại lại trang web thì bạn sẽ nhấn phím F5 hoặc là clich chuột phải và chọn Refresh page. Tuy nhiên, bạn vẫn có thể reload trang bằng javascript rất dễ dàng thông qua phương thức window.location.reload()4. Cú pháp như sau: window.location.reload() Ví dụ RUN <html> <body> Chào mừng bạn đến với freetuts.net <button onclick="refreshPage()">Refresh</button> <script language="javascript"> function refreshPage() { window.location.reload(); } </script> </body> </html> window.location.replace(url) - ghi đè trang webPhương thức này ít khi sử dụng mà thay vào đó họ sử dụng cú pháp window.location.reload()5. Tuy nhiên hai cách này vẫn có sự khác biệt:
Cú pháp như sau: window.location.replace('https://freetuts.net'); Ví dụ RUN <html> <body> Click vào để chuyển hướng đến freetuts.net <button onclick="replacePage()">replace()</button> <button onclick="hrefPage()">location.href</button> <script language="javascript"> function replacePage() { window.location.replace('https://freetuts.net'); } function hrefPage() { window.location.href = 'https://freetuts.net'; } </script> </body> </html> window.location.assign(url) - load một trang mớiCú pháp như sau: window.location.assign('https://freetuts.net'); Về công dụng vẫn không có gì khác với hai cách trên. Tuy nhiên, cách này có đặc điểm giống với location.href. Demo RUN <html> <body> Click vào để chuyển hướng đến freetuts.net <button onclick="assignPage()">replace()</button> <script language="javascript"> function assignPage() { window.location.assign('https://freetuts.net'); } </script> </body> </html> 3. Các thuộc tính của location trong JavascriptNgoài các phương thức trên, bạn cũng có thể sử dụng window.location.reload()8 để xử lý các thành phần liên quan đến URL như: lấy phần window.location.reload()9, lấy phần <html> <body> Chào mừng bạn đến với freetuts.net <button onclick="refreshPage()">Refresh</button> <script language="javascript"> function refreshPage() { window.location.reload(); } </script> </body> </html>0. Và đây là danh sách các thuộc tính đầy đủ cho đối tượng <html> <body> Chào mừng bạn đến với freetuts.net <button onclick="refreshPage()">Refresh</button> <script language="javascript"> function refreshPage() { window.location.reload(); } </script> </body> </html>1 này:
Demo RUN <html> <body> <script language="javascript"> document.write("hash:" +window.location.hash + "<br/>"); document.write("host:" +window.location.host + "<br/>"); document.write("hostname:" +window.location.hostname + "<br/>"); document.write("href:" +window.location.href + "<br/>"); document.write("origin:" +window.location.origin + "<br/>"); document.write("pathname:" +window.location.pathname + "<br/>"); document.write("port:" +window.location.port + "<br/>"); document.write("search:" +window.location.search + "<br/>"); </script> </body> </html> 4. Lời kếtCác thuộc tính trên chúng ta chỉ hay sử dụng phần window.location.reload()9, <html> <body> Chào mừng bạn đến với freetuts.net <button onclick="refreshPage()">Refresh</button> <script language="javascript"> function refreshPage() { window.location.reload(); } </script> </body> </html>0 và window.location.replace('https://freetuts.net');4, các phần còn lại rất ít khi sử dụng. Riêng đối với window.location.reload()9 là thành phần nằm sau dấu <html> <body> Chào mừng bạn đến với freetuts.net <button onclick="refreshPage()">Refresh</button> <script language="javascript"> function refreshPage() { window.location.reload(); } </script> </body> </html>2 nên các Framework Javascript như AngularJS hoặc các ứng dụng Ajax sử dụng để nhận diện được action hiện tại. |