Liên kết javascript

Question

Bài viết này sẽ hướng dẫn bạn cách chuyển hướng cho các mục tiêu khác nhau bằng cách sử dụng Javascript, cách này có thể áp dụng trên các tệp html hoặc php đều được

Nội dung chính Show

Phát hiện URL từ chuỗi
Thay thế một siêu liên kết thay vì các URL văn bản
1. Vị trí trong javascript là gì?
2. The method of location in javascript
cửa sổ. vị trí. reload(url) - tải lại trang web
cửa sổ. vị trí. replace(url) - ghi đè trang web
cửa sổ. vị trí. gán(url) - tải một trang mới
3. Các thuộc tính của vị trí trong Javascript
4. Lời kết

Với việc chuyển hướng url bằng tiện ích javascript này, nhanh nhưng vẫn còn rất hạn chế hơn việc chuyển hướng bằng. htaccess

Các bài viết liên quan đến chuyển hướng

Chuyển hướng 404 về trang chủ trong WordPress

Để chuyển hướng 1 trang, mời bạn xem đoạn mã sau

<html>
   <head>
      
      <script type="text/javascript">
         <!--
            function Redirect() {
               window.location="https://cunghocweb.com";
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <p>Bấm vào nút, bạn sẽ đi tới trang chủ.</p>
      
      <form>
         <input type="button" value="Chuyển hướng" onclick="Redirect();" />
      </form>
      
   </body>
</html>

XEM THỬ NGHIỆM

Trên là ví dụ về 1 chuyển hướng bằng cách nhấn vào nút, cũng có gì khác liên kết href đâu nhỉ?

Nếu như vậy thì hơi bất tiện là nó không tự động chuyển đi, phải nhấn vào nữa thì hơi khó chịu không đúng. Nếu thế ta cho nó chuyển một url chỉ định theo một cách tự động khi truy cập vào

<html>
   <head>
   
      <script type="text/javascript">
         
            function Redirect() {
               window.location="https://cunghocweb.com";
            }
            
            document.write("Bạn sẽ được chuyển đến trang khác sau 3 giây.");
            setTimeout('Redirect()', 3000);
         
      </script>
      
   </head>
   
   <body>
   </body>
</html>

XEM THỬ NGHIỆM

Sử dụng các đoạn js dễ dàng và nhanh chóng, có thể sử dụng ở bất kỳ mã nguồn nào. Hãy theo dõi các bài viết khác tại key JS Tips nhé

Hôm nay mình sẽ hướng dẫn bạn cách tìm URL trong chuỗi và tạo liên kết bằng JavaScript. Gần đây, mình đang phát triển một ứng dụng cho phép người dùng nhập vào nội dung và mình cần phát hiện URL từ chuỗi nội dung nhập vào này và tạo Liên kết HTML có thể nhấp. Dưới đây là cách mình đã làm với JavaScript

Phát hiện URL từ chuỗi

Ở đây, chúng ta sẽ sử dụng phương thức so sánh của chuỗi cùng với biểu thức chính quy để phát hiện các URL trong văn bản. Phương pháp này sẽ cung cấp cho chúng tôi danh sách các URL trong mảng

function detectURLs(message) {
  var urlRegex = /(((https?:\/\/)|(www\.))[^\s]+)/g;
  return message.match(urlRegex)
}

detectURLs("Vui lòng ghé www.vzn.vn và đọc các bài viết hướng dẫn trên https://www.vzn.vn.")
// Kết quả: ["www.vzn.vn", "https://www.vzn.vn"]

Thay thế một siêu liên kết thay vì các URL văn bản

Trong bước tiếp theo, chúng ta sẽ tạo một liên kết có thể nhấp vào thay vì các URL. Ở đây, chúng ta sẽ sử dụng phương thức thay thế của chuỗi và phương thức đó sẽ được sử dụng để tạo thẻ HTML a trong văn bản

Trong bài viết này chúng ta sẽ tìm hiểu vị trí của các đối tượng trong Javascript, đây là các đối tượng được sử 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

Bài viết này đã được đăng tại freetuts. net , không được sao chép dưới mọi hình thức.

Thao tác sử dụng nhiều nhất trên vị trí đó là chuyển hướng chuyển hướng, thông qua thuộc tính window.location.href, ta có thể tự chuyển hướng đến một URL mà không cần người dùng phải thao tác. Ngoài ra, với vị trí, chúng ta có thể lấy được tất cả những thông tin trên URL như tên miền, chuỗi truy vấn, hàm băm

1. Vị trí trong javascript là gì?

Vị trí BOM là một đối tượng được sử 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 web lập trình

Vị trí là một thuộc tính của đối tượng nằm trong cửa sổ đối tượng, nên khi sử dụng nó, bạn phải thông qua đối tượng window, và đ ối tượng window luôn là một biến toàn bộ .

Bài viết này đã được đăng tại [free tuts. net]

window.location

Bây giờ chúng ta cùng tìm hiểu các phương thức và thuộc tính của vị trí nhé

2. The method of location in javascript

Có ba phương thức chính nằm trong vị trí của đối tượng đó là

window.location.reload()

1,

window.location.reload()

2 và

window.location.reload()

3

cửa sổ. vị trí. reload(url) - tải lại trang web

Thông thường, để quay lại trang web, bạn phải nhấn phím F5 hoặc là nhấp chuột phải và chọn Làm mới trang. Tuy nhiên, bạn vẫn có thể tải lại 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>

cửa sổ. vị trí. replace(url) - ghi đè trang web

Phươ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

Đối với
```
window.location.reload()
```
2 thì trình duyệt sẽ KHÔNG đưa vào lịch sử.
Đối với
```
window.location.reload()
```
7 thì trình duyệt sẽ CÓ đưa vào lịch sử

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>

cửa sổ. vị trí. gán(url) - tải một trang mới

Cú 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 vị trí. href

Bản trình diễn CHẠY

<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 vị trí trong Javascript

Ngoà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 các đố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 this.

băm. set up or get the following section

<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 of URL

chủ nhà. setting or get

<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>

3 and port

<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>

4 of URL

tên máy chủ. setting or get

<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>

3

href. setting or get URL

gốc. Trả về

<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>

6,

<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>

3 và cổ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>

4 của URL

tên đường dẫn. setting or get

<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>

9 of URL

Hải cảng. setting or get

window.location.replace('https://freetuts.net');

0 of URL

Tìm kiếm. lấy phần truy vấn

window.location.replace('https://freetuts.net');

1 của URL

Lưu ý. các thuộc tính của bạn có thể được sử dụng để lấy (get) hoặc thiết lập (get)

Bản trình diễn CHẠY

<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ết

Các thuộc tính của chúng ta chỉ hay sử dụng các 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 thành phần nằm sau dấu hiệ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 hành động hiện tại

programming javascript