iframe 작업에서 부모 창 리디렉션


312

iframe에서 부모 창을 리디렉션하려면 어떤 JavaScript가 필요합니까?

JavaScript 또는 다른 방법을 사용하여 부모 창을 새 URL로 리디렉션하는 하이퍼 링크를 클릭하고 싶습니다.


5
부모 창 자체에서,이 될 수 IFrame도. 허용되는 답변이 맨 위 창에 표시되므로 질문을 약간 변경하는 것이 좋습니다.
Ron Klein

답변:


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

앞에서 언급했듯이 부모 iframe을 리디렉션합니다.


나는 동일한 원산지 정책이 여기에 적용되지 않는다고 생각합니다. 다른 사람의 iframe에서 사이트를 분리 할 수 ​​있어야합니다.
Brian McAuliffe

1
크롬, @Parris jsfiddle에서이 오류가 발생합니다 : 안전하지 않은 자바 스크립트 시도 URL '프레임에 대한 탐색 시작하는 jsfiddle.net/ppkzS를 URL'프레임에서 ' parrisstudios.com/tests/iframe_redirect.html '. 최상위 창의 탐색을 시도하는 프레임은 샌드 박스이지만 'allow-top-navigation'플래그는 설정되어 있지 않습니다.
Bjarte Aune Olsen

1
흥미로운 @BjarteAuneOlsen, 크롬 또는 웹킷의 최근 변경 일 수 있습니다. 확실히 이전에 작동했습니다. 몇 년이되었습니다 :). 또한 동일한 원산지 정책이 적용되어 이전에 답변이 잘못되었지만 이제는 정확하고 내 의견이 잘못되었습니다 -_-.
Parris

4
@BjarteAuneOlsen-JSFiddle의 Iframe이 의도적으로 샌드 박스 처리 되어 특정 기능 (예 : 리디렉션 등)이 명시 적으로 거부 되었기 때문에 JS를 사용하여 JS Fiddle에서 벗어나 작업을 잃을 위험이 있습니다. ..
Zhaph-Ben Duguid

10
여기서 발생하는 오류는 " sandbox" -iframe 의 새로운 HTML5 속성 때문입니다. - developer.mozilla.org/ en-US/docs/Web/HTML/Element/iframe 이 sandbox속성은 자바 스크립트가 iframe 기반의 특정 작업을 수행하지 못하게합니다. 허용 된 작업의 허용 된 화이트리스트 이 allow-top-navigation속성은 화이트리스트에서 활성화 할 수있는 작업 중 하나이므로이 코드가 작동합니다. 경우 sandbox속성이 abscent 모든 행동이 허용됩니다. 존재하고 빈 문자열이면 모든 작업이 거부됩니다.
마커스 해리슨

115

나는 그것이 <a href="..." target="_top">link</a>작동 한다는 것을 알았다


7
선택한 답변은 정확하지만 질문의 의도에 대한 더 나은 답변이라고 생각합니다. 또한 JS를 사용하지 않는 사람들에게도 효과적입니다.
Michael-Clay는 어디에 있습니까 Shirky

나는 이것이 최선의 해결책이라고 동의하지만 OP는 특별히 자바 스크립트를 요구했다. 반면 OP는 앵커를 통해 트리거해야한다고 지정했습니다. 앵커 태그에서 자바 스크립트를 사용하여 원하는 결과를 얻는 시나리오를 볼 수 없으므로 질문이 잘못되었습니다.
nocarrier

2
매우 간단하고 우아합니다. 매력처럼 작동 :)
Yash

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

window.top 프레임 계층의 맨 위에있는 페이지의 창 개체를 나타냅니다.


9
window.top.location.href 속성은 Iframe에서 업데이트 할 수 없으며 액세스 거부 실행이 발생합니다. localhost에서 테스트 할 때만 실행할 수 있습니다
Muhammad Ummar

4
@Ummar : iframe의 상위 도메인에 동일한 도메인, 동일한 포트 (동일한 원본 정책)가있는 경우, 보안 위반을 방지하기 위해 액세스 거부 예외가 발생하면 예외가 발생합니다.
Quan Mai

5
사실이 아닌 @Ummar , 증거를 위해 jsfiddle.net/ppkzS . window.top.location.href를 변경할 수 있습니다. 당신은 그것을 읽을 수 없습니다. 크롬에서 작동합니다.
Parris

위대한 jsfiddle @Parris, 그것은 나를 위해 정착 :)
Max Williams

2
나는 의심하는 사람들 중 일부가 iframe에서 이와 같은 것을 시도했을 것입니다 : window.top.location.href = window.top.location.href ;
mjj1409


15

target="_parent"나를 위해 일했다. 쉽고 번거 로움이 없습니다!


이것들은 잘 작동하는 것 같습니다. Javascript 대신이 방법을 사용하는 데 단점이 있습니까?
flyingL123

내가 아는 한에서는 아니다. 무언가를 발견하면 공유하십시오.
rDroid

7

@MIP는 맞지만 최신 버전의 Safari에서는 iBox에 리디렉션 액세스 할 수 있도록 샌드 박스 속성 (HTML5)을 추가해야합니다. 공백 사이에 추가 할 수있는 몇 가지 특정 값이 있습니다.

참조 (스크롤해야 함) : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

전의:

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

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에서 리디렉션 할 수 있지만 부모로부터 정보를 얻을 수는 없습니다.




-2

iframe 액션에서 부모 윈도우를 리디렉션하려면 window.top.location.href를 사용해야합니다.

데모 URL :


1
우리는 누구입니까? :) 당신은 URL의 필수 부분을 답변에 쓸 수 있습니까? URL / 링크가 변경되거나 삭제 될 수 있습니다.
YesThatIsMyName은

-8

동일한 부모의 iframe으로 부모 창의 iframe을 리디렉션하십시오.

window.parent.document.getElementById("content").src = "content.aspx?id=12";
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.