เปลี่ยนเส้นทางหน้าต่างหลักจากการกระทำ iframe

312

ฉันต้องใช้ JavaScript ใดในการเปลี่ยนเส้นทางหน้าต่างหลักจาก iframe

ฉันต้องการให้พวกเขาคลิกไฮเปอร์ลิงก์ซึ่งใช้ JavaScript หรือวิธีอื่นใดจะเปลี่ยนเส้นทางหน้าต่างหลักไปยัง URL ใหม่

javascript iframe dhtml

5

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

— Ron Klein

521

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

ตามที่ระบุไว้ก่อนหน้านี้จะเปลี่ยนเส้นทาง iframe หลัก

— MIP
แหล่งที่มา

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

— Brian McAuliffe

1

ใน Chrome @Parris jsfiddle พ่นข้อผิดพลาดนี้: JavaScript ที่ไม่ปลอดภัยพยายามเริ่มการนำทางสำหรับเฟรมด้วย URL ' jsfiddle.net/ppkzS ' จากเฟรมด้วย URL ' parrisstudios.com/tests/iframe_redirect.html ' เฟรมที่พยายามนำทางของหน้าต่างระดับบนสุดนั้นถูกทำทราย แต่ไม่มีการตั้งค่าสถานะ 'allow-top-navigation'

— Bjarte Aune Olsen

1

@BjarteAuneOlsen น่าสนใจอาจเป็นการเปลี่ยนแปลงล่าสุดใน chrome หรือ webkit มันเคยทำงานมาก่อนแน่นอน สองสามปีที่ผ่านมา :) อีกทั้งคำตอบที่ใช้ในการระบุนโยบายต้นกำเนิดเดียวกันนั้นใช้ซึ่งทำให้คำตอบก่อนหน้านี้ไม่ถูกต้อง แต่ตอนนี้ทำให้ถูกต้องและความคิดเห็นของฉันผิด -_-

— Parris

4

@BjarteAuneOlsen - ผมเชื่อว่านี่เป็นเพราะ Iframes ใน JSFiddle จะจงใจsandboxedเพื่อให้พวกเขาได้ปฏิเสธคุณสมบัติบางอย่าง (เช่นการเปลี่ยนเส้นทาง ฯลฯ ) อย่างชัดเจน - มีอันตรายที่คุณต้องการใช้ JS เพื่อนำทางห่างจาก JS ซอและสูญเสียการทำงานของคุณ ..

— Zhaph - Ben Duguid

10

ข้อผิดพลาดของคนที่จะพบที่นี่เป็นเพราะแอตทริบิวต์ HTML5 ใหม่สำหรับ iframe ที่เรียกว่า " sandbox" - developer.mozilla.org/en-US/docs/Web/HTML/Element/iframesandboxป้องกันแอตทริบิวต์ JavaScript การกระทำบางอย่างอยู่ใน iframe ตาม ในรายการที่อนุญาตของการกระทำที่อนุญาต allow-top-navigationคุณสมบัติเป็นหนึ่งในการกระทำที่คุณสามารถเปิดใช้งานในรายการที่อนุญาตซึ่งจะช่วยให้รหัสนี้ในการทำงาน หากsandboxแอตทริบิวต์ไม่มีการดำเนินการทั้งหมดจะได้รับอนุญาต หากมีอยู่และสตริงว่างการกระทำทั้งหมดจะถูกปฏิเสธ

— Marcus Harrison

115

ฉันก็พบว่ามัน<a href="..." target="_top">link</a>ใช้ได้เช่นกัน

— คลิกโหวต
แหล่งที่มา

7

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

— ไมเคิล - Clay Shirky ของ

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

— nocarrier

2

เรียบง่ายและสง่างาม ใช้งานได้อย่างมีเสน่ห์ :)

— Yash

54

window.top.location.href = "http://example.com";

window.top อ้างถึงวัตถุหน้าต่างของหน้าที่ด้านบนของลำดับชั้นของเฟรม

— Luca Matteis
แหล่งที่มา

9

คุณสมบัติ window.top.location.href ไม่สามารถอัปเดตได้จาก Iframe แต่จะส่งผลให้การเข้าถึงถูกปฏิเสธ สามารถดำเนินการได้เฉพาะเมื่อคุณทำการทดสอบกับ localhost เท่านั้น

— Muhammad Ummar

4

@Ummar: ฉันจะเพิ่มว่างานนี้เมื่อผู้ปกครองใน iframe ได้โดเมนเดียวกันพอร์ตเดียวกัน (นโยบายกำเนิดเดียวกัน) มันจะพ่นเข้าถึงถูกปฏิเสธข้อยกเว้นเมื่อพวกเขากำลังที่แตกต่างกันเพื่อป้องกันการละเมิดความปลอดภัย

— Quan เชียงใหม่

5

@ Ummar ที่ไม่เป็นความจริงjsfiddle.net/ppkzSเพื่อพิสูจน์ คุณสามารถเปลี่ยน window.top.location.href คุณอ่านไม่ออก ทำงานได้ในโครเมี่ยม

— Parris

ที่ดี jsfiddle @Parris ที่ settles มันสำหรับฉัน :)

— แม็กซ์วิลเลียมส์

2

ฉันสงสัยว่าผู้สงสัยบางคนอาจลองทำสิ่งนี้ภายใน iframe: window.top.location.href = window.top.location.href ;

— mjj1409

15

หรือทางเลือกต่อไปนี้ (ใช้วัตถุเอกสาร)

parent.document.location.href = "http://example.com";

— แดงจริง
แหล่งที่มา

5

โซลูชันนั้นเป็น Firefox เฉพาะ parent.location.href = ...หนึ่งก็ควรใช้ developer.mozilla.org/en/document.location

— kay - SE is evil

15

target="_parent"ทำงานได้ดีสำหรับฉัน ง่ายและไม่ยุ่งยาก!

— rDroid
แหล่งที่มา

ดูเหมือนว่าจะใช้งานได้ดี มีข้อเสียในการใช้วิธีนี้มากกว่า Javascript หรือไม่?

— flyingL123

ไม่ใช่ที่ฉันรู้ แชร์หากคุณพบบางสิ่ง

— rDroid

7

@MIP ถูกต้อง แต่ด้วย Safari เวอร์ชันใหม่กว่าคุณจะต้องเพิ่มแอตทริบิวต์ sandbox (HTML5) เพื่อให้การเปลี่ยนเส้นทางเข้าถึง iFrame มีค่าเฉพาะสองสามค่าที่สามารถเพิ่มด้วยช่องว่างระหว่างค่าเหล่านั้น

ข้อมูลอ้างอิง (คุณจะต้องเลื่อน): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Ex:

<iframe sandbox="allow-top-navigation" src="http://google.com/"></iframe>

— Raymond B
แหล่งที่มา

โปรดทราบว่าsandboxแอตทริบิวต์ช่วยให้ชุดพิเศษของข้อ จำกัด <iframe>สำหรับเนื้อหาในส่วน มูลค่าของsandboxทรัพย์สินลบข้อ จำกัด เฉพาะ ดังนั้นระวังด้วยการใช้คุณสมบัตินี้ w3schools.com/tags/att_iframe_sandbox.asp

— gitaarik

3

สิ่งนี้จะแก้ปัญหาความทุกข์ยาก

<script>parent.location='http://google.com';</script>

— อาลีฮาริส
แหล่งที่มา

3

หากคุณต้องการเปลี่ยนเส้นทางไปยังโดเมนอื่นโดยที่ผู้ใช้ไม่ต้องทำอะไรเลยคุณสามารถใช้ลิงค์ที่มีคุณสมบัติได้:

target="_parent"

ตามที่กล่าวไว้ก่อนหน้านี้แล้วใช้:

document.getElementById('link').click();

เพื่อให้มันเปลี่ยนเส้นทางโดยอัตโนมัติ

ตัวอย่าง:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<a id="link" target="_parent" href="outsideDomain.html"></a>

<script type="text/javascript">
    document.getElementById('link').click();
</script>

</body>

</html>

หมายเหตุ: คำสั่ง javascript click () ต้องมาหลังจากที่คุณประกาศลิงก์

— ทอมเบอร์ริส
แหล่งที่มา

1

เป็นไปได้ที่จะเปลี่ยนเส้นทางจาก iframe แต่ไม่สามารถรับข้อมูลจากพาเรนต์

— Joris Kok
แหล่งที่มา

0

ลองใช้

window.parent.window.location.href = 'http://google.com'

— Chirag Gohel
แหล่งที่มา

เวอร์ชั่นง่าย: parent.window.location = '<URL>';

— shasi kanth

1

หรือทำให้ง่ายขึ้นอีก:parent.location = 'url'

— grilly

0

window.top.location.href = 'index.html';

นี่จะเปลี่ยนเส้นทางหน้าต่างหลักไปยังหน้าดัชนี ขอบคุณ

— dnts2012
แหล่งที่มา

คำตอบนี้ซ้ำกันเกือบ 5 ปีก่อน

— ไมเคิล - Clay Shirky อยู่ที่ไหน

-2

เราต้องใช้ window.top.location.href เพื่อเปลี่ยนเส้นทางหน้าต่างหลักจากการกระทำ iframe

URL สาธิต :

— Faizal
แหล่งที่มา

1

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

— YesThatIsMyName

-8

เปลี่ยนเส้นทาง iframe ในหน้าต่างหลักโดย iframe ในพาเรนต์เดียวกัน:

window.parent.document.getElementById("content").src = "content.aspx?id=12";

— mohamed moren3
แหล่งที่มา