javascript - ฉันจะเปลี่ยนเส้นทางไปยังเว็บเพจอื่นได้อย่างไร?

ฉันสามารถเปลี่ยนเส้นทางผู้ใช้จากหน้าหนึ่งไปยังหน้าอื่นโดยใช้ jQuery หรือ JavaScript ล้วนได้อย่างไร?

คำตอบ #1

ไม่มีใครเพียงแค่เปลี่ยนทางโดยใช้ jQuery

jQuery ไม่จำเป็น และ window.location.replace(...) จะเลียนแบบการเปลี่ยนเส้นทาง HTTP ได้ดีที่สุด

window.location.replace(...) ดีกว่าการใช้ window.location.href เพราะ replace() จะไม่เก็บหน้าเริ่มต้นไว้ในประวัติของเซสชัน หมายความว่าผู้ใช้จะไม่ติดอยู่ในปัญหาการกดปุ่มย้อนกลับที่ไม่มีที่สิ้นสุด

ถ้าคุณต้องการจำลองการคลิกบนลิงก์ใด ๆ ให้ใช้ location.href

ถ้าคุณต้องการจำลองการเปลี่ยนทิศทาง HTTP ให้ใช้ location.replace

ตัวอย่างเช่น:

// similar behavior as an HTTP redirect
window.location.replace("https://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "https://stackoverflow.com";

คำตอบ #2

คำเตือน: คำตอบนี้ให้มาเพียงเพื่อเป็นทางออกที่เป็นไปได้เท่านั้น; มันชัดเจนว่า ไม่ใช่ ทางออกที่ดีที่สุด เนื่องจากต้องใช้ jQuery แทนที่จะใช้ ควรเลือกทางออกที่ใช้ JavaScript บริสุทธิ์

$(location).prop('href', 'http://stackoverflow.com')

คำตอบ #3

วิธีมาตรฐานแบบ "วานิลลา" ของ JavaScript ในการเปลี่ยนเส้นทางหน้าหนึ่ง

window.location.href = 'newPage.html';

หรือง่ายขึ้น: (เนื่องจาก `window` เป็น Global)

location.href = 'newPage.html';

ถ้าคุณอยู่ที่นี่เพราะคุณ สูญเสีย HTTP_REFERER เมื่อทำการรีไดเร็กต์ ให้ผู้อ่านต่อ:
(มิฉะนั้นให้ละเว้นส่วนสุดท้ายนั้น)

ส่วนต่อไปนี้สำหรับผู้ที่ใช้ HTTP_REFERER เป็นหนึ่งในหลายมาตรการด้านความปลอดภัย (แม้ว่ามันจะไม่ใช่วิธีป้องกันที่ดีนัก) หากคุณกำลังใช้ Internet Explorer 8 หรือต่ำกว่า ตัวแปรเหล่านี้จะหายไปเมื่อใช้การเปลี่ยนหน้าแบบ JavaScript ใดๆ (location.href เป็นต้น)

ด้านล่างนี้เราจะทำการใช้งานทางเลือกสำหรับ IE8 และต่ำกว่า เพื่อที่เราจะไม่สูญเสีย HTTP_REFERER มิฉะนั้น คุณแทบจะสามารถใช้ window.location.href ได้โดยตรง

การทดสอบกับ HTTP_REFERER (การวาง URL, เซสชัน, ฯลฯ) สามารถช่วยบอกได้ว่าคำขอนั้นถูกต้องหรือไม่ (หมายเหตุ: ยังมีวิธีอื่น ๆ ในการหลีกเลี่ยง/ปลอมแปลง referrer เหล่านี้ เช่นเดียวกับที่ลิงก์ของ droop ในความคิดเห็นกล่าวไว้)

โซลูชันทดสอบข้ามเบราว์เซอร์แบบง่าย (ย้อนกลับไปที่ window.location.href สำหรับ Internet Explorer 9+ และเบราว์เซอร์อื่นๆ ทั้งหมด)

การใช้งาน: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

คำตอบ #4

มีหลายวิธีในการทำสิ่งนี้

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

คำตอบ #5

นี่ใช้ได้กับทุกเบราว์เซอร์:

window.location.href = 'your_url';

คำตอบ #6

มันจะช่วยได้ถ้าคุณอธิบายรายละเอียดมากขึ้นเกี่ยวกับสิ่งที่คุณพยายามทำ หากคุณพยายามสร้างข้อมูลแบบแบ่งหน้า มีตัวเลือกบางอย่างเกี่ยวกับวิธีที่คุณจะทำสิ่งนี้ คุณสามารถสร้างลิงก์แยกสำหรับแต่ละหน้าที่คุณต้องการให้สามารถเข้าถึงได้โดยตรง

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

โปรดทราบว่าหน้าปัจจุบันในตัวอย่างถูกจัดการแตกต่างกันในโค้ดและด้วย CSS

หากคุณต้องการให้ข้อมูลที่แบ่งเป็นหน้าถูกเปลี่ยนผ่าน AJAX นี่คือจุดที่ jQuery จะเข้ามาเกี่ยวข้อง สิ่งที่คุณจะทำคือเพิ่มตัวจัดการการคลิกไปยังแท็กแองเคอร์แต่ละตัวที่สอดคล้องกับหน้าต่างๆ ตัวจัดการการคลิกนี้จะเรียกใช้โค้ด jQuery บางส่วนที่ไปดึงหน้าต่อไปผ่าน AJAX และอัปเดตตารางด้วยข้อมูลใหม่ ตัวอย่างด้านล่างสมมติว่าคุณมีเว็บเซอร์วิสที่ส่งคืนข้อมูลหน้าถัดไป

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});

คำตอบ #7

ผมก็คิดว่า location.replace(URL) เป็นวิธีที่ดีที่สุดเช่นกัน แต่ถ้าคุณต้องการแจ้งเครื่องมือค้นหาเกี่ยวกับการเปลี่ยนเส้นทางของคุณ (พวกเขาไม่วิเคราะห์โค้ด JavaScript เพื่อดูการเปลี่ยนเส้นทาง) คุณควรเพิ่มแท็กเมตา rel="canonical" ลงในเว็บไซต์ของคุณ

การเพิ่มส่วน noscript ที่มี meta tag การรีเฟรช HTML อยู่ในนั้น ก็เป็นวิธีแก้ปัญหาที่ดีเช่นกัน ผมแนะนำให้คุณใช้เครื่องมือเปลี่ยนเส้นทาง JavaScript นี้เพื่อสร้างการเปลี่ยนเส้นทาง ซึ่งยังรองรับ Internet Explorer เพื่อส่ง HTTP referrer ด้วย

ตัวอย่างโค้ดที่ไม่มีการหน่วงเวลาเป็นดังนี้:

    <!-- Place this snippet right after opening the head tag to make it work properly -->

    <!-- This code is licensed under GNU GPL v3 -->
    <!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
    <!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

    <!-- REDIRECTING STARTS -->
    <link rel="canonical" href="https://yourdomain.example/"/>
    <noscript>
        <meta http-equiv="refresh" content="0;URL=https://yourdomain.example/">
    </noscript>
    <!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
    <script type="text/javascript">
        var url = "https://yourdomain.example/";
        if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
        {
            document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
            var referLink = document.createElement("a");
            referLink.href = url;
            document.body.appendChild(referLink);
            referLink.click();
        }
        else { window.location.replace(url); } // All other browsers
    </script>
    <!-- Credit goes to http://insider.zone/ -->
    <!-- REDIRECTING ENDS -->

คำตอบ #8

แต่ถ้ามีใครต้องการเปลี่ยนเส้นทางกลับไปยังหน้าหลัก เขาอาจใช้ตัวอย่างโค้ดต่อไปนี้ได้

window.location = window.location.host

จะเป็นประโยชน์หากคุณมีสภาพแวดล้อมสามแบบ ได้แก่ การพัฒนา, การทดสอบ, และการใช้งานจริง

คุณสามารถสำรวจวัตถุ window หรือ window.location นี้ได้โดยเพียงแค่พิมพ์คำเหล่านี้ในคอนโซลของ Chrome หรือคอนโซลของ Firebug

คำตอบ #9

JavaScript มอบวิธีการมากมายให้คุณในการดึงและเปลี่ยน URL ปัจจุบันที่แสดงในแถบที่อยู่ของเบราว์เซอร์ วิธีการทั้งหมดนี้ใช้วัตถุ Location ซึ่งเป็นคุณสมบัติของวัตถุ Window คุณสามารถสร้างวัตถุ Location ใหม่ที่มี URL ปัจจุบันได้ดังนี้..

var currentLocation = window.location;

โครงสร้างพื้นฐานของ URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

โปรโตคอล -- ระบุชื่อโปรโตคอลที่จะใช้เพื่อเข้าถึงทรัพยากรบนอินเทอร์เน็ต (HTTP (ไม่มี SSL) หรือ HTTPS (มี SSL))
hostname -- ชื่อโฮสต์ระบุโฮสต์ที่เป็นเจ้าของทรัพยากร ตัวอย่างเช่น www.stackoverflow.com เซิร์ฟเวอร์ให้บริการโดยใช้ชื่อของโฮสต์
พอร์ต -- หมายเลขพอร์ตที่ใช้เพื่อระบุโปรเซสเฉพาะซึ่งข้อความจากอินเทอร์เน็ตหรือเครือข่ายอื่นๆ จะถูกส่งต่อเมื่อมาถึงเซิร์ฟเวอร์
pathname -- เส้นทางให้ข้อมูลเกี่ยวกับทรัพยากรเฉพาะภายในโฮสต์ที่ไคลเอนต์เว็บต้องการเข้าถึง ตัวอย่างเช่น stackoverflow.com/index.html
query -- สตริงของการสอบถามจะตามหลังส่วนของเส้นทาง และให้ข้อมูลสตริงที่ทรัพยากรสามารถใช้เพื่อวัตถุประสงค์บางประการ (เช่น เป็นพารามิเตอร์สำหรับการค้นหาหรือเป็นข้อมูลที่จะถูกประมวลผล)
แฮช -- ส่วนของ URL ที่เป็นจุดยึด ลักษณะรวมถึงเครื่องหมายแฮช (#)

ด้วยคุณสมบัติของวัตถุ Location เหล่านี้ คุณสามารถเข้าถึงส่วนประกอบของ URL ทั้งหมดเหล่านี้ได้

hash - กำหนดหรือส่งคืนส่วน anchor ของ URL
โฮสต์ - ตั้งค่าหรือคืนค่าชื่อโฮสต์และพอร์ตของ URL
hostname - ตั้งค่าหรือส่งคืนชื่อโฮสต์ของ URL
href - กำหนดหรือตั้งค่าทั้งหมดของ URL
pathname - กำหนดหรือส่งคืนชื่อเส้นทางของ URL.
port - กำหนดหรือคืนค่าหมายเลขพอร์ตที่เซิร์ฟเวอร์ใช้สำหรับ URL
โปรโตคอล - ตั้งค่าหรือคืนค่าโปรโตคอลของ URL
search - ตั้งค่าหรือส่งคืนส่วนคำค้นของ URL

ตอนนี้หากคุณต้องการเปลี่ยนหน้าเว็บหรือเปลี่ยนผู้ใช้ไปยังหน้าอื่น คุณสามารถใช้คุณสมบัติ href ของวัตถุ Location ได้ดังนี้

คุณสามารถใช้คุณสมบัติ href ของวัตถุ Location ได้

window.location.href = "http://www.stackoverflow.com";

วัตถุตำแหน่ง ยังมีวิธีการทั้งสามนี้ด้วย

assign() -- โหลดเอกสารใหม่
reload() -- โหลดเอกสารปัจจุบันใหม่
replace() -- แทนที่เอกสารปัจจุบันด้วยเอกสารใหม่

คุณสามารถใช้วิธี assign() และ replace เพื่อเปลี่ยนเส้นทางไปยังหน้าอื่น ๆ แบบนี้ได้ด้วย

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

assign() และ replace() แตกต่างกันอย่างไร -- ความแตกต่างระหว่างเมธอด replace() กับเมธอด assign() คือ replace() จะลบ URL ของเอกสารปัจจุบันออกจากประวัติเอกสาร ซึ่งหมายความว่าไม่สามารถใช้ปุ่ม "ย้อนกลับ" เพื่อกลับไปยังเอกสารเดิมได้ ดังนั้นใช้เมธอด assign() หากคุณต้องการโหลดเอกสารใหม่และต้องการให้มีตัวเลือกในการกลับไปยังเอกสารเดิม

คุณสามารถเปลี่ยนแอตทริบิวต์ href ของวัตถุ location โดยใช้ jQuery แบบนี้ได้เช่นกัน

$(location).attr('href',url);

และดังนั้นคุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยัง URL อื่นได้

คำตอบ #10

โดยพื้นฐานแล้ว jQuery เป็นเพียง JavaScript เฟรมเวิร์ก และสำหรับการทำบางสิ่งบางอย่างเช่น การเปลี่ยนเส้นทาง ในกรณีนี้ คุณสามารถใช้ JavaScript บริสุทธิ์ได้อย่างง่ายดาย ดังนั้นในกรณีนี้คุณมี 3 ตัวเลือกในการใช้ vanilla JavaScript:

การใช้ location replace จะเป็นการแทนที่ประวัติของหน้าปัจจุบัน หมายความว่าจะไม่สามารถใช้ปุ่ม back เพื่อย้อนกลับไปยังหน้าต้นฉบับได้
window.location.replace("http://stackoverflow.com");
การใช้ตำแหน่ง assign สิ่งนี้จะเก็บประวัติให้คุณ และเมื่อใช้ปุ่มย้อนกลับ คุณสามารถกลับไปยังหน้าต้นฉบับได้:
window.location.assign("http://stackoverflow.com");
ฉันแนะนำให้ใช้วิธีหนึ่งในวิธีที่กล่าวมาก่อนหน้านี้ แต่สิ่งนี้อาจเป็นตัวเลือกที่สามโดยใช้ JavaScript ล้วน:
window.location.href="http://stackoverflow.com";

คุณยังสามารถเขียนฟังก์ชันใน jQuery เพื่อจัดการมันได้ แต่ไม่แนะนำเพราะมันเป็นฟังก์ชัน JavaScript บรรทัดเดียว นอกจากนี้คุณยังสามารถใช้ฟังก์ชันทั้งหมดข้างต้นโดยไม่ต้องใช้ window หากคุณอยู่ใน scope ของ window อยู่แล้ว ตัวอย่างเช่น window.location.replace("http://stackoverflow.com"); สามารถเป็น location.replace("http://stackoverflow.com");

ฉันยังแสดงพวกเขาทั้งหมดในภาพด้านล่าง:

คำตอบ #11

ควรจะสามารถตั้งค่าโดยใช้ window.location ได้เลย

ตัวอย่าง:

window.location = "https://stackoverflow.com/";

นี่คือโพสต์เก่าที่เกี่ยวกับหัวข้อนี้: ฉันจะเปลี่ยนเส้นทางไปยังเว็บเพจอื่นได้อย่างไร?

คำตอบ #12

ก่อนที่ฉันจะเริ่ม jQuery เป็นไลบรารีของ JavaScript ที่ใช้สำหรับการจัดการ DOM ดังนั้นคุณไม่ควรใช้ jQuery สำหรับการเปลี่ยนหน้าเว็บ

คำคมจาก Jquery.com:

แม้ว่า jQuery อาจทำงานโดยไม่มีปัญหาใหญ่ในเวอร์ชันเบราว์เซอร์เก่า ๆ แต่เราไม่ได้ทดสอบ jQuery ในเวอร์ชันเหล่านั้นอย่างจริงจังและโดยทั่วไปจะไม่แก้ไขข้อบกพร่องที่อาจเกิดขึ้นในพวกมัน

มันถูกพบที่นี่: https://jquery.com/browser-support/

ดังนั้น jQuery ไม่ใช่ทางออกที่สมบูรณ์แบบสำหรับความเข้ากันได้ย้อนหลัง

โซลูชันต่อไปนี้ที่ใช้ JavaScript ดิบทำงานได้ในทุกเบราว์เซอร์และเป็นมาตรฐานมานานแล้ว ดังนั้นคุณจึงไม่ต้องใช้ไลบรารีสำหรับการรองรับหลายเบราว์เซอร์

หน้านี้จะเปลี่ยนเส้นทางไปที่ Google หลังจาก 3000 มิลลิวินาที

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

ตัวเลือกที่แตกต่างกันมีดังนี้:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

เมื่อใช้การแทนที่ปุ่มย้อนกลับจะไม่กลับไปที่หน้าเปลี่ยนเส้นทางราวกับว่าไม่เคยอยู่ในประวัติ หากคุณต้องการให้ผู้ใช้สามารถกลับไปยังหน้าเปลี่ยนเส้นทางได้ ให้ใช้ window.location.href หรือ window.location.assign หากคุณใช้ตัวเลือกที่อนุญาตให้ผู้ใช้กลับไปยังหน้าเปลี่ยนเส้นทาง โปรดจําไว้ว่าเมื่อคุณเข้าสู่หน้าเปลี่ยนเส้นทาง มันจะเปลี่ยนเส้นทางคุณกลับ ดังนั้นให้คํานึงถึงสิ่งนั้นเมื่อเลือกตัวเลือกสําหรับการเปลี่ยนเส้นทางของคุณ ภายใต้เงื่อนไขที่หน้าเปลี่ยนเส้นทางเฉพาะเมื่อผู้ใช้ดําเนินการแล้วการมีหน้าในประวัติปุ่มย้อนกลับจะไม่เป็นไร แต่ถ้าหน้าเปลี่ยนเส้นทางอัตโนมัติ คุณควรใช้แทนที่เพื่อให้ผู้ใช้สามารถใช้ปุ่มย้อนกลับได้โดยไม่ถูกบังคับให้กลับไปที่หน้าที่เปลี่ยนเส้นทางส่ง

คุณยังสามารถใช้เมตาดาต้าเพื่อเรียกใช้การเปลี่ยนหน้าตามที่ทำดังนี้ได้อีกด้วย

รีเฟรช META

<meta http-equiv="refresh" content="0;url=http://evil.example/" />

ที่ตั้ง META

<meta http-equiv="location" content="URL=http://evil.example" />

การจี้ BASE

<base href="http://evil.example/" />

วิธีการมากมายเพิ่มเติมในการเปลี่ยนเส้นทางลูกค้าที่ไม่สงสัยของคุณไปยังหน้าที่พวกเขาอาจไม่ต้องการไปสามารถพบได้ในหน้านี้ (ไม่มีวิธีใดในนั้นที่พึ่งพา jQuery) :

https://code.google.com/p/html5security/wiki/RedirectionMethods

ฉันอยากจะชี้ให้เห็นด้วยว่าผู้คนไม่ชอบถูกเปลี่ยนเส้นทางโดยไม่มีเหตุผล ควรเปลี่ยนเส้นทางผู้คนเฉพาะเมื่อจำเป็นจริงๆ ถ้าคุณเริ่มเปลี่ยนเส้นทางผู้คนแบบสุ่ม พวกเขาจะไม่กลับไปที่เว็บไซต์ของคุณอีก

ย่อหน้าต่อไปเป็นสมมติฐาน:

คุณอาจถูกรายงานว่าเป็นไซต์ที่เป็นอันตรายได้เช่นกัน ถ้าเกิดเหตุการณ์นั้น เมื่อผู้คนคลิกลิงก์ไปยังไซต์ของคุณ เบราว์เซอร์ของผู้ใช้อาจเตือนพวกเขาว่าไซต์ของคุณเป็นอันตราย สิ่งที่อาจเกิดขึ้นอีกอย่างคือเครื่องมือค้นหาอาจเริ่มลดคะแนนของคุณถ้าผู้คนรายงานว่ามีประสบการณ์ที่ไม่ดีบนไซต์ของคุณ

โปรดตรวจสอบแนวทางของ Google Webmaster เกี่ยวกับการเปลี่ยนเส้นทาง: https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971

นี่คือหน้าสนุกเล็ก ๆ ที่จะขับคุณออกจากหน้านั้น

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

ถ้าคุณรวมตัวอย่างสองหน้าด้วยกัน คุณจะได้วงจรการเปลี่ยนเส้นทางแบบไม่สิ้นสุดที่รับประกันได้ว่าผู้ใช้ของคุณจะไม่ต้องการใช้เว็บไซต์ของคุณอีกเลย

คำตอบ #13

var url = 'asdf.html';
window.location.href = url;

คำตอบ #14

คุณสามารถทำเช่นนั้นได้โดยไม่ใช้ jQuery ดังนี้:

window.location = "http://yourdomain.com";

และถ้าคุณต้องการเพียง jQuery คุณก็สามารถทำได้แบบนี้:

$jq(window).attr("location","http://yourdomain.com");

คำตอบ #15

นี่ใช้ได้กับ jQuery:

$(window).attr("location", "http://google.fr");

คำตอบ #16

# การเปลี่ยนเส้นทางหน้าด้วย HTML โดยใช้วิธี jQuery/JavaScript

ลองใช้โค้ดตัวอย่างนี้:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "Login.php";
    else
        window.location = "Logout.php";
}

ถ้าคุณต้องการให้ URL สมบูรณ์เป็น window.location="www.google.co.in";.

คำตอบ #17

คำถามต้นฉบับ: "จะเปลี่ยนเส้นทางโดยใช้ jQuery ได้อย่างไร?" ดังนั้นคำตอบจึงใช้ jQuery >> กรณีการใช้งานเสริม

เพื่อเพียงแค่เปลี่ยนทางไปยังหน้าเว็บด้วย JavaScript:

window.location.href = "/contact/";

หรือถ้าคุณต้องการการเลื่อนเวลา:

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

jQuery ช่วยให้คุณสามารถเลือกองค์ประกอบจากหน้าเว็บได้อย่างง่ายดาย คุณสามารถค้นหาอะไรก็ตามที่คุณต้องการบนหน้าเว็บ และจากนั้นใช้ jQuery เพื่อเพิ่มเอฟเฟกต์พิเศษ ตอบสนองต่อการกระทำของผู้ใช้ หรือแสดงและซ่อนเนื้อหาภายในหรือภายนอกองค์ประกอบที่คุณเลือก งานทั้งหมดนี้เริ่มต้นด้วยการรู้วิธีเลือกองค์ประกอบหรือเหตุการณ์

$('a,img').on('click',function(e){
  e.preventDefault();
  $(this).animate({
    opacity: 0 //Put some CSS animation here
  }, 500);
  setTimeout(function(){
    // OK, finished jQuery staff, let's go redirect
    window.location.href = "/contact/";
  },500);
});

ลองจินตนาการว่าใครบางคนเขียนสคริปต์/ปลั๊กอินที่มีโค้ด 10,000 บรรทัด ด้วย jQuery คุณสามารถเชื่อมต่อกับโค้ดนี้ได้เพียงหนึ่งหรือสองบรรทัด

คำตอบ #18

ดังนั้น คำถามคือวิธีการสร้างหน้าการเปลี่ยนเส้นทาง ไม่ใช่วิธีการเปลี่ยนเส้นทางไปยังเว็บไซต์ใช่ไหม?

คุณจำเป็นต้องใช้ JavaScript สำหรับสิ่งนี้เท่านั้น นี่คือโค้ดเล็ก ๆ บางส่วนที่จะสร้างหน้าการเปลี่ยนเส้นทางแบบไดนามิก

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

ดังนั้นสมมติว่าคุณเพิ่งวางโค้ดตัวอย่างนี้ลงในไฟล์ redirect/index.html บนเว็บไซต์ของคุณ คุณสามารถใช้มันได้ดังนี้

http://www.mywebsite.com/redirect?url=http://stackoverflow.com

และถ้าคุณไปที่ลิงก์นั้น มันจะเปลี่ยนเส้นทางคุณไปยัง stackoverflow.com โดยอัตโนมัติ

ลิงก์ไปยังเอกสารประกอบ

และนี่คือวิธีที่คุณสร้างหน้าเปลี่ยนเส้นทาง ง่ายๆ ด้วย JavaScript

แก้ไข :

ยังมีอีกสิ่งหนึ่งที่ควรสังเกต ฉันได้เพิ่ม window.location.replace ในโค้ดของฉันเพราะฉันคิดว่ามันเหมาะกับหน้าการเปลี่ยนเส้นทาง แต่คุณต้องรู้ว่าเมื่อใช้ window.location.replace และคุณถูกเปลี่ยนเส้นทาง เมื่อคุณกดปุ่มย้อนกลับในเบราว์เซอร์ มันจะ ไม่ กลับไปที่หน้าที่เปลี่ยนเส้นทาง และมันจะย้อนกลับไปที่หน้าก่อนหน้านั้น ลองดูตัวอย่างสาธิตเล็กๆ นี้

ตัวอย่าง :

กระบวนการ: เก็บบ้าน => เปลี่ยนเส้นทางหน้าไปยัง Google => Google
เมื่ออยู่ที่กูเกิล: กูเกิล => ปุ่มย้อนกลับในเบราว์เซอร์ => หน้าหลักของร้าน

ดังนั้น หากสิ่งนี้ตรงกับความต้องการของคุณ ทุกอย่างก็จะเรียบร้อยดี หากคุณต้องการรวมหน้าการเปลี่ยนทางในประวัติการเข้าชมเบราว์เซอร์ ให้แทนที่สิ่งนี้

if( url ) window.location.replace(url);

กับ

if( url ) window.location.href = url;

คำตอบ #19

คุณจำเป็นต้องใส่บรรทัดนี้ในโค้ดของคุณ:

$(location).attr("href","http://stackoverflow.com");

ถ้าคุณไม่มี jQuery ใช้ JavaScript แทน:

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");

คำตอบ #20

ในฟังก์ชันการคลิกของคุณ เพียงเพิ่ม:

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});

คำตอบ #21

ลองอันนี้:

location.assign("http://www.google.com");

ตัวอย่างโค้ด

คำตอบ #22

JavaScript มีความกว้างขวางมาก หากคุณต้องการไปยังหน้าอื่น คุณมีตัวเลือกสามอย่างนี้

// Navigates to 'otherpage.com' and keeps the current page in the browser history.
window.location.href = 'otherpage.com';

// Navigates to 'otherpage.com' but behaves like href (keeps history); allows more control (e.g., appending query params dynamically).
window.location.assign('otherpage.com');

// Navigates to 'otherpage.com' and replaces the current page in the browser history (no back button functionality).
window.location.replace('otherpage.com');

เนื่องจากคุณต้องการเลื่อนไปยังหน้าถัดไป คุณสามารถใช้ตัวเลือกใดก็ได้จากตัวเลือกเหล่านี้หากนี่คือความต้องการของคุณ
อย่างไรก็ตาม ตัวเลือกทั้งสามจำกัดการใช้งานในกรณีต่าง ๆ เลือกตามความต้องการของคุณ

หากคุณสนใจข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้ คุณสามารถศึกษาเพิ่มเติมได้

window.location.href;     // Returns the href (URL) of the current page
window.location.hostname; // Returns the domain name of the web host
window.location.pathname; // Returns the path and filename of the current page
window.location.protocol; // Returns the web protocol used (http: or https:)
window.location.assign;   // Loads a new document
window.location.replace;  // Replace the current location with new one.

คำตอบ #23

ไม่จำเป็นต้องใช้ jQuery คุณสามารถทำแบบนี้ได้:

window.open("URL","_self","","")

มันง่ายขนาดนั้น!

วิธีที่ดีที่สุดในการเริ่มคำร้อง HTTP คือการใช้ document.loacation.href.replace('URL').

คำตอบ #24

การใช้ JavaScript:

วิธีที่ 1:

window.location.href="http://google.com";

วิธีที่ 2:

window.location.replace("http://google.com");

การใช้ jQuery:

วิธีที่ 1: $ (ที่ตั้ง)

$(location).attr('href', 'http://google.com');

วิธีที่ 2: ฟังก์ชันที่สามารถใช้ซ้ำได้

jQuery.fn.redirectTo = function(url){
    window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

คำตอบ #25

เขียนให้ถูกต้องก่อน คุณต้องการนำทางภายในแอปพลิเคชันเพื่อไปยังลิงก์อื่นจากแอปพลิเคชันของคุณสำหรับลิงก์อื่น นี่คือตัวอย่างโค้ด:

window.location.href = "http://www.google.com";

และถ้าคุณต้องการนำทางระหว่างหน้าภายในแอปพลิเคชันของคุณ ฉันก็มีโค้ดให้ด้วย หากคุณต้องการ

คำตอบ #26

คุณสามารถเปลี่ยนทิศทางใน jQuery ได้แบบนี้:

$(location).attr('href', 'http://yourPage.com/');

คำตอบ #27

วิธีแรก

นี่คือโค้ด jQuery สำหรับการเปลี่ยนเส้นทางหน้าเว็บ เนื่องจากฉันได้ใส่โค้ดนี้ในฟังก์ชัน $ (document).ready() มันจะทำงานทันทีที่หน้าเว็บถูกโหลด

var url = "http://stackoverflow.com";
$(location).attr('href',url);

คุณสามารถส่ง URL โดยตรงไปยังเมธอด attr() แทนการใช้ตัวแปรก็ได้

วิธีที่สอง

 window.location.href="http://stackoverflow.com";

คุณสามารถเขียนโค้ดแบบนี้ได้เช่นกัน (ทั้งสองแบบเหมือนกันภายใน)

window.location="http://stackoverflow.com";

ถ้าคุณสงสัยเกี่ยวกับความแตกต่างระหว่าง window.location และ window.location.href คุณจะเห็นว่าตัวหลังนั้นเป็นการตั้งค่าคุณสมบัติ href อย่างชัดเจน ในขณะที่ตัวแรกทำโดยนัยตั้งแต่ต้น เนื่องจาก window.location คืนค่าเป็นออบเจ็กต์ ซึ่งโดยค่าเริ่มต้นจะตั้งค่าคุณสมบัติ .href ของมัน

ทางที่สาม

มีวิธีอีกวิธีหนึ่งในการเปลี่ยนเส้นทางหน้าเพจด้วย JavaScript คือวิธี replace() ของอ็อบเจ็กต์ window.location คุณสามารถส่ง URL ใหม่ไปยังวิธี replace() และมันจะจำลองการเปลี่ยนเส้นทาง HTTP ทั้งนี้ อย่าลืมว่า วิธี window.location.replace() จะไม่ใส่หน้าต้นทางลงในประวัติการใช้งานของเซสชัน ซึ่งอาจส่งผลต่อการทำงานของปุ่มย้อนกลับ บางครั้งก็อาจเป็นสิ่งที่คุณต้องการ ดังนั้นใช้มันอย่างระมัดระวัง

// Doesn't put originating page in history
window.location.replace("http://stackoverflow.com");

วิถีที่สี่

วิธี location.assign() ใช้โหลดเอกสารใหม่ในหน้าต่างเบราว์เซอร์

window.location.assign("http://stackoverflow.com");

ความแตกต่างระหว่างเมธอด assign() และ replace() คือ เมธอด location.replace() จะลบ URL ปัจจุบันออกจากประวัติเอกสาร ดังนั้นจึงไม่สามารถย้อนกลับไปยังเอกสารต้นฉบับได้ ในกรณีนี้คุณไม่สามารถใช้ปุ่ม Back ของเบราว์เซอร์ได้ หากคุณต้องการหลีกเลี่ยงสถานการณ์นี้ คุณควรใช้เมธอด location.assign() เพราะมันจะโหลดเอกสารใหม่ในเบราว์เซอร์

วิธีที่ห้า

เหมือนกับเมธอด attr() (หลังจาก jQuery 1.6 ถูกแนะนำ)

var url = "http://stackoverflow.com";
$(location).prop('href', url);

คำตอบ #28

ใน JavaScript และ jQuery เราสามารถใช้โค้ดต่อไปนี้ในการเปลี่ยนเส้นทางจากหน้าหนึ่งไปยังหน้าอื่น:

window.location.href="http://google.com";
window.location.replace("page1.html");

คำตอบ #29

ECMAScript 6 + jQuery, 85 ไบต์

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

ได้โปรดอย่าฆ่าฉัน นี่เป็นเรื่องตลก มันเป็นเรื่องตลก นี่เป็นเรื่องตลก

นี่ให้ "คำตอบต่อคำถาม" ในความหมายว่ามันขอวิธีแก้ "โดยใช้ jQuery" ซึ่งในกรณีนี้หมายถึงการบังคับให้มันเข้ากับสมการด้วยวิธีใดวิธีหนึ่ง

ดูเหมือนว่า Ferrybig จะต้องให้คำอธิบายเกี่ยวกับเรื่องตลก (ยังคงล้อเล่นนะ ฉันมั่นใจว่ามีตัวเลือกจำกัดในแบบฟอร์มรีวิว) ดังนั้นโดยไม่พูดพร่ำเพรื่อ:

คำตอบอื่น ๆ กำลังใช้ attr() ของ jQuery กับวัตถุ location หรือ window อย่างไม่จำเป็น

คำตอบนี้ก็ใช้มันในทางที่ผิดเช่นกัน แต่ในลักษณะที่น่าหัวเราะมากกว่า แทนที่จะใช้มันเพื่อกำหนดตำแหน่ง มันใช้ attr() เพื่อดึงฟังก์ชันที่กำหนดตำแหน่ง

ฟังก์ชันนี้ถูกตั้งชื่อว่า jQueryCode แม้ว่าจะไม่มีอะไรเกี่ยวกับ jQuery เลย และการเรียกฟังก์ชันว่า somethingCode นั้นแย่มาก โดยเฉพาะเมื่อสิ่งที่เรียกไม่ใช่ภาษาจริงๆ

"85 ไบต์" เป็นการอ้างอิงถึง Code Golf การเล่นกอล์ฟชัดเจนว่าไม่ใช่สิ่งที่คุณควรทำภายนอก Code Golf และนอกจากนี้คำตอบนี้ก็ชัดเจนว่าไม่ได้ถูกย่อให้สั้นที่สุดจริง ๆ

โดยพื้นฐานแล้ว น่าขยะแขยง

คำตอบ #30

จาวาสคริปต์:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

Jquery :

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window