iframe에서 부모 창 함수 호출
iframe에서 부모창 JavaScript 함수를 호출하고 싶습니다.
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>
<a onclick="parent.abc();" href="#" >Call Me </a>
window.parent 참조
현재 창 또는 서브프레임의 부모에 대한 참조를 반환합니다.
창에 부모가 없는 경우 부모 속성은 자신을 참조합니다.
이 <iframe>,<object> , 「」<frame>란, 된 요소를
Window.post Message()
하면, 「」를 하게 유효하게 할 수 있습니다.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을 지정합니다.*(다른 창의 문서를 배치해야 하는 위치를 알고 있는 경우)특정 대상을 지정하지 않으면 관심 있는 악성 사이트에 보낸 데이터가 노출됩니다(ZalemCitizen의 설명).
참고 자료:
나는 최근에 왜 이것도 작동하지 않는지 알아내야 했다.
자녀 iframe에서 호출하고 싶은 Javascript는 부모의 선두에 있어야 합니다.본문에 있는 경우 스크립트를 글로벌 범위에서 사용할 수 없습니다.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>
이것이 이 문제에 대해 다시 실수하는 모든 사람에게 도움이 되기를 바랍니다.
사용할 수 있습니다.
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>
기존 답변과 무관하여 별도의 답변으로 게시하였습니다.
이 문제는 서브도메인을 참조하는 iframe에서 부모에 액세스하기 위해 최근 다시 발생했으며 기존 수정이 작동하지 않았습니다.
이번에는 부모 페이지의 document.domain과 iframe을 동일하게 수정했습니다.이것에 의해, 같은 송신원정책 체크가 같은 도메인상에 공존한다고 생각되도록 속입니다(서브 도메인은 다른 호스트로 간주되어 같은 송신원정책 체크에 실패합니다).
하다에 을 넣으세요.<head>상위 도메인과 일치하도록(작업에 맞게 조정) 페이지를 선택합니다.
<script>
document.domain = "mydomain.com";
</script>
이로 인해 localhost 개발에 오류가 발생하므로 오류를 방지하려면 다음과 같은 체크 표시를 사용하십시오.
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
필요한 분들을 위한 추가 정보입니다.다른 프로토콜을 사용하는 경우 Ash Clarke의 솔루션은 작동하지 않으므로 SSL을 사용하는 경우 iframe도 SSL을 사용하는지 확인하십시오. 그렇지 않으면 기능이 중단됩니다.하지만 그의 솔루션은 도메인 자체에서 효과가 있었습니다. 감사합니다.
parent.parent()는 보안상의 이유로 같은 도메인에서만 동작합니다.이 회피책을 시도했는데 완벽하게 작동했어요.
<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>
이게 도움이 됐으면 좋겠다.:)
하위 도메인에 대해 Ash Clarke가 제공한 솔루션은 잘 작동하지만, 동일한 원본 정책 확인 링크에 나와 있는 대로 iframe 페이지 머리글과 상위 페이지 머리글 모두에 document.domain = "mydomain.com"을 포함해야 합니다.
JavaScript DOM 액세스용으로 실장된 같은 오리진 정책에 대한 중요한 확장기능(다른 대부분의 동일한 오리진 체크에서는 제외)은 공통의 최상위 도메인을 공유하는2개의 사이트가 각각의 document.domain DOM 속성을 동일한 수식, 동일한 수식, 동일한 수식, 즉 동일한 호스트 체크에 실패해도 통신을 선택할 수 있다는 것입니다.현재 호스트 이름의 오른쪽 단편입니다.예를 들어, http://en.example.com/과 http://fr.example.com/가 모두 document.domain을 "example.com"로 설정하고 있는 경우, 그 시점부터 DOM 조작의 목적으로는 같은 것으로 간주됩니다.
Firefox 및 Chrome에서는 다음을 사용할 수 있습니다.
<a href="whatever" target="_parent" onclick="myfunction()">
iframe과 parent 모두에 myfunction이 존재하는 경우, parent function이 호출됩니다.
이러한 솔루션 중 일부는 효과가 있을 수 있지만 베스트 프랙티스를 따르지 않습니다.많은 경우 글로벌 변수가 할당되어 있으며 여러 부모 변수 또는 함수에 콜을 걸기 때문에 네임스페이스가 어수선하고 취약해질 수 있습니다.
이를 방지하려면 모듈 패턴을 사용합니다.부모 창에서:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);
그런 다음 iframe에서 다음을 수행합니다.
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};
이것은 크로크포드의 주요 텍스트인 "Javascript:좋은 부분"이라고 말합니다.Javascript의 베스트 프랙티스에 대한 자세한 내용은 w3 페이지를 참조하십시오.https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals
플러그인 도우미 GIST. 부모창이 아이프 프레임창의 함수를 호출하거나 그 반대로 호출할 수 있지만 모든 호출은 비동기입니다.
https://gist.github.com/clinuxrulz/77f341832c6025bf10f0b183ee85e072
이것은 크로스 오리진에서도 동작합니다만, 부모로부터 iframe에 export 하는 함수만을 호출할 수 있습니다.부모 창에서는 iframe export의 함수만을 호출할 수 있습니다.
언급URL : https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe
'programing' 카테고리의 다른 글
| Python에서 값을 할당하지 않고 변수만 선언할 수 있습니까? (0) | 2022.10.21 |
|---|---|
| vuejs의 데이터로 앱을 초기화하는 방법 (0) | 2022.10.21 |
| Laravel Archent 쿼리에서 테이블에 별칭을 지정하는 방법(또는 Query Builder 사용) (0) | 2022.10.21 |
| 내가 왜 템플리팅 엔진을 쓰겠어?jsp include 및 jstl vs 타일, 프리마커, 속도, 시트메쉬 (0) | 2022.10.21 |
| 계속하기 전에 하나의 기능이 완료될 때까지 기다리는 올바른 방법입니까? (0) | 2022.10.21 |