[javascript] 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>, 그 부모 윈도우 매립 요소 창이다.

답변

최근에 이것이 왜 작동하지 않는지 알아 내야했습니다.

자식 iframe에서 호출하려는 자바 스크립트는 부모의 머리에 있어야합니다. 본문에있는 경우 전역 범위에서 스크립트를 사용할 수 없습니다.

<head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="parent.abc();" href="#">Click Me</a>
    </iframe>
</body>

이것이이 문제를 다시 우연히 발견하는 사람에게 도움이되기를 바랍니다.

답변

Window.postMessage ()

이 방법은 안전하게 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";
}

답변

당신이 사용할 수있는

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>

답변

그것을 필요로하는 사람들을위한 또 다른 추가. Ash Clarke의 솔루션은 다른 프로토콜을 사용하는 경우 작동하지 않으므로 SSL을 사용하는 경우 iframe도 SSL을 사용하고 있는지 또는 기능이 중단되는지 확인하십시오. 그의 솔루션은 도메인 자체에서 효과가 있었으므로 감사합니다.

답변

하위 도메인을 위해 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 조작의 목적.