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


7723

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


147
ฉันเห็นทั้ง window.location = url; และ window.location.href = url; แตกต่างกันอย่างไร ที่พวกเขา? BTW ฉันไม่รู้เกี่ยวกับ window.location.replace (url) ดี
David M. Miller

100
window.locationเป็นเช่นเดียวกับwindow.location.hrefในแง่ของพฤติกรรม window.locationส่งคืนวัตถุ หาก.hrefไม่ได้ตั้งค่าเริ่มต้นของการเปลี่ยนแปลงพารามิเตอร์window.location .hrefสรุป: ใช้อย่างใดอย่างหนึ่งเป็นเรื่องปกติ
Raptor

10
var url = "ชื่อเว็บไซต์" $ (ตำแหน่ง) .attr ('href', url);
นักวิทยาศาสตร์บ้า

31
@ MadScientist นั่นเป็นวิธีย้อนหลังที่จะทำ วัตถุสถานที่ไม่ได้เป็นองค์ประกอบ HTML และการใช้วัตถุ jquery เพื่อตั้งมันก็ดูเหมือนว่าผิด ทำไมคุณจะใช้สิ่งนั้นเมื่อรหัส JS ตรงง่ายมาก?
Juan Mendes

1
ทำไมคุณต้องการเปลี่ยนเส้นทาง? ไม่ควรส่งแบบฟอร์มเข้าสู่ระบบ? และแม้ว่าจะไม่มีเหตุผลในหน้าเป้าหมายคุณยังคงสามารถส่งแบบฟอร์มไปยังหน้าอื่นได้
Dimt

คำตอบ:


14807

หนึ่งไม่เพียงเปลี่ยนเส้นทางโดยใช้ 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("http://stackoverflow.com");

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

// Another method for doing redirecting with JavaScript is this:
window.location = "https://stackoverflow.com";

78
ในกรณีที่ปุ่มส่งเพิ่ม return return; ภายในฟังก์ชั่นของคุณ
Abhi

134
คำถามคือเกี่ยวกับจาวาสคริปต์เฉพาะ แต่มันอาจจะเป็นที่น่าสังเกตว่าการฟื้นฟู meta สามารถใช้เป็นล้มเหลวกลับมาในกรณีที่ผู้ใช้ปิดใช้งาน JavaScript
Hoppe

22
@ NicolòMartini If (IE) document.write ("");
Jeff Noel

48
หากคุณใช้ jQuery $(location).attr('href',url);ใช้เพียง window.location.hrefดูเหมือนว่าจะมีพฤติกรรมที่ไม่แน่นอนในเบราว์เซอร์บางตัวอันที่จริงแล้วการแบนไม่ทำงานใน Firefox เวอร์ชันของฉัน ฉันเคยได้ยินเรื่องการตั้งค่าwindow.locationโดยตรงว่าไม่ทำงานในเวอร์ชันของ IE
Noz

8
ควรลบ "is better" ตามที่ระบุไว้ในคำตอบทางออกที่ดีที่สุดคือสถานการณ์ OP ไม่ถาม "ฉันจะเลียนแบบการเปลี่ยนเส้นทาง HTTP ด้วย Javascript ได้อย่างไร"
MadMaardigan

1684

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

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

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

27
ที่สำคัญกว่านั้นมีวิธีการทำเช่นนี้กับ jQuery ที่ขาดหายไปหรือไม่? นี่เป็นเพียงกระดาษห่อสำหรับ window.location.href = url; แต่ถ้า jQuery มีฟังก์ชั่นบางอย่างที่ถ้า window.location.href = url; จะไม่ทำงานในสภาพแวดล้อมปัจจุบัน (เบราว์เซอร์ระบบปฏิบัติการ ฯลฯ ) jQuery core สามารถชดเชยได้หรือไม่
Chris

271
การบังคับให้ jQuery เข้าสู่สมการในลักษณะนี้เป็นเพียงเรื่องไร้สาระและไม่มีจุดหมายโดยเฉพาะอย่างยิ่งเนื่องจากwindow.locationไม่ใช่องค์ประกอบดังนั้นจึงไม่มีคุณลักษณะ
Tim Down

10
ฉันสงสัยว่ายังคงใช้งานได้กับ jQuery รุ่นล่าสุดที่.attr()กำหนดคุณลักษณะ (เช่น.setAttribute()) จริง ๆ
ThiefMaster

156
@deltaray นี่ไม่ใช่อีกวิธีหนึ่งในการเปลี่ยนเส้นทางเช่นที่กล่าวไว้ข้างต้นมันเป็น wrapper ที่ไม่มีความหมายรอบ ๆ วัตถุตำแหน่งซึ่งไม่ได้เป็นองค์ประกอบ! สิ่งนี้ทำให้ฉันนึกถึงi.stack.imgur.com/ssRUr.gif
JCM

676

วิธีมาตรฐาน "วานิลลา" JavaScript เพื่อเปลี่ยนเส้นทางหน้า

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

หรือมากกว่านั้น: (เนื่องจากwindowเป็นสากล)

location.href = 'newPage.html';

หากคุณอยู่ที่นี่เพราะคุณกำลังสูญเสีย HTTP_REFERER เมื่อเปลี่ยนเส้นทางโปรดอ่าน:

(ไม่เช่นนั้นก็ไม่ต้องสนใจส่วนสุดท้ายนี้)


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

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

การทดสอบกับHTTP_REFERER(การวาง URL เซสชัน ฯลฯ ) สามารถช่วยบอกได้ว่าคำขอนั้นถูกต้องหรือไม่ ( หมายเหตุ:นอกจากนี้ยังมีวิธีการแก้ปัญหา / หลอกผู้อ้างอิงเหล่านี้ตามที่ระบุไว้โดยลิงก์ของ 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; 
    }
}

60
ข้อควรทราบ: การตรวจสอบผู้อ้างอิงว่าเป็นมาตรการรักษาความปลอดภัยเป็นวิธีการแก้ปัญหาหมัด duckduckgo.com/?q=referrer+spoofing
droope

หากคุณมี ID เซสชัน HTTP GET ใน URL ผู้อ้างอิงคุณสามารถใช้เพื่อตรวจสอบความถูกต้องของเซสชัน
Andrew Fox

@mcpDESIGNS คุณแน่ใจว่าคุณได้พยายามที่จะใช้งานlocation.assign? ฉันใช้ในแอปของฉันกับ IE8 และฉันจะไม่สูญเสียHTTP_REFERERส่วนหัว
Buzinas

อย่างน้อยก็ย้อนกลับไปในปี 2012 มันไม่ทำงานบางทีอาจจะเป็นปะแก้ของ IE8 ในภายหลัง - มันดีที่ได้ยิน!
Mark Pieszak - Trilon.io

1
กล่าวถึงคุณของ HTTP_REFERER ช่วยให้ฉันเข้าใจปัญหาที่ฉันมีกับ window.open และผมพบว่าวิธีการแก้ปัญหาที่นี่: stackoverflow.com/questions/7580613/... โดยวิธีการที่ฉันมีปัญหาใน IE11!
Dov Miller

427

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

// 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')

8
window.navigateเป็นแบบเก่าเท่านั้น (Firefox / Chrome ไม่รองรับสิ่งนี้) document.locationหากคุณต้องการที่จะระบุตัวเลือกทั้งหมดอย่าลืมเกี่ยวกับ
Rob W

document.location = document.referrer; โปรดเพิ่มในรายการด้วย สิ่งนี้ใช้งานไม่ได้เหมือน History.back แทนที่จะทำให้หน้ารีเฟรชอีกครั้ง
Ali Humayun

.attr () จะไม่ทำงานบน jQuery 3.0.0 ใช้. val () แทน
Rivalus

4
@ LéoLamนั่นคือสาเหตุที่มีเครื่องมือค้นหาชื่อ Google :-) คุณสามารถค้นหาแต่ละรายการใน Google และค้นหาความแตกต่าง คุณไม่ต้องการเลือกแบบสุ่ม
ฉันเป็นคนที่โง่ที่สุด

คุณสามารถดูเอกสารได้เช่นกันdeveloper.mozilla.org/en-US/docs/Web/API/Location
John Balvin Arias

330

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

window.location.href = 'your_url';

8
คุณสามารถทำได้document.location.replace(redirectURL)หากคุณไม่ต้องการให้หน้าแรกอยู่ในประวัติเบราว์เซอร์
jazzcat

298

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

<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
    });
});

252

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

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

โค้ดตัวอย่างโดยไม่ชักช้ามีลักษณะดังนี้:

<!-- 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.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    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 -->

228

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

window.location = window.location.host

มันจะมีประโยชน์ถ้าคุณมีสามสภาพแวดล้อมที่แตกต่างกันเช่นการพัฒนาการจัดเตรียมและการผลิต

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


window.location.replace (window.location.protocol + "//" + window.location.host)
Moala

13
ง่ายยิ่งขึ้น: window.location = '/'
Iftah

213

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

var currentLocation = window.location;

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

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

ป้อนคำอธิบายรูปภาพที่นี่

  1. โพรโทคอล - ระบุชื่อโพรโทคอลที่ใช้ในการเข้าถึงทรัพยากรบนอินเทอร์เน็ต (HTTP (ไม่มี SSL) หรือ HTTPS (พร้อม SSL))

  2. ชื่อโฮสต์ - ชื่อโฮสต์ระบุโฮสต์ที่เป็นเจ้าของทรัพยากร ตัวอย่างเช่น www.stackoverflow.com เซิร์ฟเวอร์ให้บริการโดยใช้ชื่อของโฮสต์

  3. พอร์ต - หมายเลขพอร์ตที่ใช้เพื่อจดจำกระบวนการเฉพาะที่อินเทอร์เน็ตหรือข้อความเครือข่ายอื่น ๆ จะถูกส่งต่อเมื่อมาถึงเซิร์ฟเวอร์

  4. ชื่อพา ธ - เส้นทางให้ข้อมูลเกี่ยวกับทรัพยากรเฉพาะภายในโฮสต์ที่เว็บไคลเอ็นต์ต้องการเข้าถึง ตัวอย่างเช่น stackoverflow.com/index.html

  5. แบบสอบถาม - สตริงแบบสอบถามตามองค์ประกอบเส้นทางและให้สตริงของข้อมูลที่ทรัพยากรสามารถใช้เพื่อวัตถุประสงค์บางอย่าง (เช่นเป็นพารามิเตอร์สำหรับการค้นหาหรือเป็นข้อมูลที่จะประมวลผล)

  6. แฮช - ส่วนที่ยึดของ URL รวมถึงเครื่องหมายแฮช (#)

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

  1. hash -Sets หรือคืนค่าส่วนที่ยึดของ URL
  2. host -Sets หรือส่งคืนชื่อโฮสต์และพอร์ตของ URL
  3. hostname -Sets หรือส่งคืนชื่อโฮสต์ของ URL
  4. href -Sets หรือส่งคืน URL ทั้งหมด
  5. ชื่อพา ธ -Sets หรือส่งคืนชื่อพา ธ ของ URL
  6. พอร์ต -Sets หรือส่งคืนหมายเลขพอร์ตที่เซิร์ฟเวอร์ใช้สำหรับ URL
  7. โปรโตคอล -Sets หรือส่งคืนโปรโตคอลของ URL
  8. search -Sets หรือส่งคืนส่วนแบบสอบถามของ URL

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

คุณสามารถใช้คุณสมบัติ href ของวัตถุตำแหน่ง

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

วัตถุที่ตั้งยังมีทั้งสามวิธี

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

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

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

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

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

คุณสามารถเปลี่ยนคุณสมบัติตำแหน่งวัตถุ href ได้โดยใช้jQueryเช่นนี้

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

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


203

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

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

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

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

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

3) ฉันขอแนะนำให้ใช้หนึ่งในวิธีก่อนหน้านี้ แต่นี่อาจเป็นตัวเลือกที่สามโดยใช้ JavaScript บริสุทธิ์:

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

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

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

location.replace location.assign


1
ผมขอแนะนำให้ใช้assign()มากกว่าhref=เกินไปในขณะที่หลังไม่ทำงานอย่างถูกต้องสำหรับผมในบางกรณี
marsze


169

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

คำพูดจาก Jquery.com:

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

พบได้ที่นี่: https://jquery.com/browser-support/

ดังนั้น jQuery ไม่ใช่โซลูชันแบบ end-all และ be-all สำหรับความเข้ากันได้แบบย้อนหลัง

โซลูชันต่อไปนี้ที่ใช้ 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 Refresh

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

ที่ตั้ง META

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

BASE Hijacking

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

วิธีการอื่น ๆ อีกมากมายในการเปลี่ยนเส้นทางไคลเอ็นต์ที่ไม่สงสัยไปยังหน้าเว็บที่พวกเขาไม่ต้องการไปสามารถพบได้ในหน้านี้ (ไม่ใช่หนึ่งในนั้นพึ่งพา jQuery):

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

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

ย่อหน้าถัดไปเป็นสมมุติ:

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

โปรดอ่านหลักเกณฑ์สำหรับผู้ดูแลเว็บของ Google เกี่ยวกับการเปลี่ยนเส้นทาง: https://support.google.com/webmasters/answer/2721217?hl=th&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>

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


5
ฉันตอบคำขอ jQuery โดยบอกว่าไม่จำเป็น JQuery มีทางลัดที่มีประโยชน์มากมายสำหรับ JavaScript แต่ไม่จำเป็นต้องมีทางลัดใด ๆ สำหรับการเปลี่ยนเส้นทาง JQuery เป็นเพียง JavaScript ไม่มีอะไรเพิ่มเติม วิธีปกติในการเรียกการเปลี่ยนเส้นทางจะทำงานกับฟังก์ชั่นของเขาโดยใช้ jQuery
Patrick W. McMahon


145

คุณสามารถทำได้โดยไม่ต้อง jQuery เป็น:

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

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

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

JQuery เป็นความคิดที่ดีกว่าเพราะสามารถ
แยกแยะ

@Epirocks หากมี API ใน jQuery ที่ออกแบบมาสำหรับสิ่งนี้อาจเป็นเหตุผลที่ถูกต้อง (แม้ว่าจะเป็นที่สงสัยว่า API นี้จะเปลี่ยนแปลง) แต่ตัวอย่างที่นี่เป็นเพียงการใช้คุณสมบัติของ jQuery ที่คุณสามารถห่อวัตถุที่ไม่ใช่ DOM และ วิธีการบางอย่างจะยังคงทำงาน
1j01

ความจริงที่ว่า 'วิธีการบางอย่างจะยังคงทำงาน' เป็นสิ่งที่ฉันหมายถึงโดยการสรุปออกไป ใช่คุณสามารถทำได้โดยไม่ต้อง JQuery แต่คุณสามารถทำอะไรก็ได้โดยไม่ต้อง JQuery มันอยู่นอกเหนือประเด็น
Epirocks

144

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

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

เพียงเพราะมันใช้งานได้ไม่ได้หมายความว่าคุณควรทำ นี่คือการอ้อมโดยไม่มีจุดหมายรอบการตั้งค่าwindow.location
1j01

89

# HTML Page Redirect การใช้ jQuery / JavaScript

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

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

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


"การใช้ jQuery" ไม่ถูกต้อง และตัวอย่างของการใช้ URL ที่สมบูรณ์จะไม่ทำงานเนื่องจากนั่นไม่ใช่ URL ที่สมบูรณ์ ไม่มีโปรโตคอลดังนั้นมันจะถูกตีความเป็น URL ที่เกี่ยวข้อง
1j01

80

คุณต้องใส่บรรทัดนี้ในรหัสของคุณ:

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

หากคุณไม่มี jQuery ให้ไปกับ JavaScript:

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

80

คำถามเดิม: "จะเปลี่ยนเส้นทางโดยใช้ 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 คุณสามารถเชื่อมต่อกับรหัสนี้ด้วยเพียงหนึ่งหรือสองบรรทัด


ส่วนหัว Javascript: เป็นไปได้ไหมที่จะทำเวลาเป็นวินาทีแทน?
PythonMaster202

79

ดังนั้นคำถามคือจะสร้างหน้าเปลี่ยนเส้นทางได้อย่างไรและไม่เปลี่ยนเส้นทางไปยังเว็บไซต์อย่างไร

คุณจะต้องใช้ 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

เมื่ออยู่ที่ google: google => ปุ่มย้อนกลับใน browser => จัดเก็บที่บ้าน

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

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

กับ

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

74

ในฟังก์ชั่นคลิกเพียงเพิ่ม:

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


57

jQuery ไม่จำเป็น คุณสามารถทำได้:

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

มันง่ายมาก!

วิธีที่ดีที่สุดที่จะเริ่มต้นการร้องขอ HTTP document.loacation.href.replace('URL')อยู่กับ


52

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

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

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


52

คุณสามารถเปลี่ยนเส้นทางใน jQuery เช่นนี้:

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


45

ECMAScript 6 + jQuery, 85 ไบต์

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

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

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

เห็นได้ชัดว่า Ferrybig ต้องการเรื่องตลกที่อธิบาย (ยังล้อเล่นฉันแน่ใจว่ามีตัวเลือกที่ จำกัด ในแบบฟอร์มการตรวจสอบ) ดังนั้นโดยไม่ต้องกังวลใจต่อไป:

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

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

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

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

โดยทั่วไปประจบประแจง


45

javascript:

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

1
มีเหตุผลในการเก็บ URL ใน jQuery เป็นตัวแปร แต่ไม่ใช่กับ Vanilla หรือไม่?
ESR

43

ใช้ 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");

41

นี่คือการเปลี่ยนเส้นทางการหน่วงเวลา คุณสามารถตั้งค่าเวลาหน่วงเป็นสิ่งที่คุณต้องการ:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>

5
ทำสิ่งนี้ดีกว่า: setTimeout (function () {window.location.href = " google.com "} ล่าช้า);
dikkini

39

มีสามวิธีหลักในการทำเช่นนี้

window.location.href='blaah.com';
window.location.assign('blaah.com');

และ...

window.location.replace('blaah.com');

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

แก้ไข: windowคำนำหน้าเป็นตัวเลือก

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.