답변:
<a onclick="parent.abc();" href="#" >Call Me </a>현재 윈도우 또는 서브 프레임의 부모에 대한 참조를 반환합니다.
창에 부모가없는 경우 부모 속성은 자체에 대한 참조입니다.
윈도우가 넣었을 경우 <iframe>, <object>또는 <frame>, 그 부모 윈도우 매립 요소 창이다.
alert것이 호출 될지 궁금합니다 . alertiframe에서 호출 alert되는 경우 부모의 기능 또는 iframe의 기능 parent.abc();?
최근에 이것이 왜 작동하지 않는지 알아 내야했습니다.
자식 iframe에서 호출하려는 자바 스크립트는 부모의 머리에 있어야합니다. 본문에있는 경우 전역 범위에서 스크립트를 사용할 수 없습니다.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>이것이이 문제를 다시 우연히 발견하는 사람에게 도움이되기를 바랍니다.
이 방법은 안전하게 cross-origin 통신을 합니다.
부모 페이지 코드에 액세스 할 수있는 경우 부모 메서드를 호출 할 수있을뿐 아니라에서 데이터를 직접 전달할 수도 있습니다 Iframe. 다음은 작은 예입니다.
부모 페이지 :
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}iframe 코드 :
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *업데이트 :
보안 정보 :
*다른 창의 문서 위치를 알고있는 경우 항상 특정 targetOrigin, NOT을 제공하십시오 . 특정 대상을 제공하지 않으면 관심있는 악성 사이트 ( ZalemCitizen의 의견)에 보내는 데이터가 공개됩니다 .
참고 문헌 :
기존 답변과 관련이 없으므로이 답변을 별도의 답변으로 게시했습니다.
이 문제는 최근 하위 도메인을 참조하는 iframe에서 부모에 액세스하기 위해 다시 발생했으며 기존 수정이 작동하지 않았습니다.
이번에는 부모 페이지와 iframe의 document.domain을 동일하게 수정했습니다. 이것은 동일한 원산지 정책 점검을 속일 것입니다 동일한 도메인 이 동일한 도메인에 공존한다고 생각하게됩니다 (서브 도메인은 다른 호스트로 간주되고 동일한 원본 정책 확인에 실패 함).
<head>부모 도메인과 일치하도록 iframe의 페이지에 다음을 삽입 합니다 (문서 유형에 맞게 조정).
<script>
document.domain = "mydomain.com";
</script>로컬 호스트 개발시 오류가 발생하므로 다음과 같은 확인을 사용하여 오류를 피하십시오.
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
} example.comiframe is abc.example.com이면 부모와 iframe 모두 전화해야합니다document.domain = "example.com"
당신이 사용할 수있는
window.top다음을 참조하십시오.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>abc() 경우에만 호출 이 작동합니다 . iframe에서 상위 문서로 나눕니다. function abc()window.top.abc()
하위 도메인을 위해 Ash Clarke가 제공 한 솔루션은 훌륭하지만, document.domain = "mydomain.com"을 포함해야합니다. 링크 동일한 출처 정책 확인에 명시된 바와 같이 iframe 페이지의 헤드와 상위 페이지의 헤드 모두
JavaScript DOM 액세스를 위해 구현 된 동일한 오리진 정책에 대한 중요한 확장은 (동일 출처 확인의 다른 특징 대부분은 아님) 공통 호스트 도메인을 공유하는 두 사이트가 "동일한 호스트"에 실패하더라도 통신을 선택할 수 있다는 것입니다 각각의 document.domain DOM 속성을 현재 호스트 이름의 동일한 정규화 된 오른쪽 조각으로 상호 설정하여 확인하십시오. 예를 들어 http://en.example.com/ 및 http://fr.example.com/이 모두 document.domain을 "example.com"으로 설정 한 경우 해당 시점부터 동일한 출처로 간주됩니다. DOM 조작의 목적.
document.domain무엇입니까?
localhost또는 기계 (보통의 IP 주소 127.0.0.1), URL 주소 표시 줄에 무엇에 따라 달라집니다.
parent.abc () 는 보안상의 이유로 동일한 도메인에서만 작동합니다. 나는이 해결 방법을 시도하고 내 것이 완벽하게 작동했습니다.
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById('myFrame').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>도움이 되었기를 바랍니다. :)
Firefox와 Chrome에서는 다음을 사용할 수 있습니다.
<a href="whatever" target="_parent" onclick="myfunction()">myfunction이 iframe과 부모 모두에있는 경우 부모 함수가 호출됩니다.
이러한 솔루션 중 일부는 작동하지만 모범 사례를 따르는 것은 없습니다. 많은 사람들이 전역 변수를 할당하고 여러 부모 변수 또는 함수를 호출하여 혼란스럽고 취약한 네임 스페이스로 연결될 수 있습니다.
이를 방지하려면 모듈 패턴을 사용하십시오. 부모 창에서 :
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);그런 다음 iframe에서
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};이것은 Crockford의 주요 텍스트 "자바 스크립트 : 좋은 부분"의 상속 장에 설명 된 패턴과 유사합니다. 또한 자바 스크립트 모범 사례에 대해서는 w3 페이지에서 자세히 알아볼 수 있습니다. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals