[javascript] 부모 페이지에서 iframe으로 JavaScript 코드 호출

여기서 알아야 할 몇 가지 단점이 있습니다.

1. HTMLIFrameElement.contentWindow아마도 더 쉬운 방법 일지 모르지만 표준 속성은 아니며 일부 브라우저는 대부분 오래된 브라우저를 지원하지 않습니다. DOM Level 1 HTML 표준은 window객체 에 대해 아무 말도하지 않기 때문 입니다.

2. HTMLIFrameElement.contentDocument.defaultView몇 가지 구형 브라우저는 허용하지만 IE는 허용하지 않는을 시도 할 수도 있습니다 . 그럼에도 불구하고 표준은 window(1)과 같은 이유로 객체를 다시 가져 왔다고 명시 적으로 말하지 않지만, 관심이 있다면 여기에서 몇 가지 추가 브라우저 버전을 선택할 수 있습니다.

3. window.frames['name']창을 반환하는 것이 가장 오래되고 가장 안정적인 인터페이스입니다. 그러나 name="..."이름으로 프레임을 얻을 수 있으려면 속성 을 사용해야합니다 . 이는 약간 추한 / 더 이상 사용되지 않거나 / 전환 된 것입니다. ( id="..."더 좋을 것이지만 IE는 그것을 좋아하지 않습니다.)

4. window.frames[number]또한 매우 신뢰할 만하지 만 올바른 색인을 아는 것이 속임수입니다. 예를 들어이 문제를 해결할 수 있습니다. 페이지에 iframe이 하나만 있다는 것을 알고 있다면

5. 자식 iframe이 아직로드되지 않았거나 액세스 할 수 없도록 잘못되었습니다. 통신 흐름을 반대로하는 것이 더 쉽다는 것을 알게 될 것입니다. 즉, 아이 iframe window.parent이로드가 완료되고 다시 호출 될 준비가되면 스크립트에 알리도록합니다 . 자체 객체 중 하나 (예 : 콜백 함수)를 상위 스크립트에 전달하면 해당 상위는 연관된 HTMLIFrameElement에 대해 걱정할 필요없이 iframe의 스크립트와 직접 통신 할 수 있습니다.

답변

window.myFunction = function(args) {
   doStuff();
}

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');

window.addEventListener('message', receiver, false);
function receiver(e) {
  if (e.origin == 'http://example.com') {
    if (e.data == 'Hello world') {
      e.source.postMessage('Hello', e.origin);
    } else {
      alert(e.data);
    }
  }
}

document
  .getElementById('targetFrame')
  .contentDocument
  .defaultView
  .targetFunction();

frames['iframeid'].method();