JavaScript에서 부모 Iframe에 액세스하는 방법

글쎄, 같은 도메인 페이지를 호출하는 IFrame이 있습니다. 내 문제는 JavaScript라고하는이 페이지 에서이 부모 Iframe의 일부 정보에 액세스하려고한다는 것입니다. 이 Iframe에 어떻게 액세스 할 수 있습니까?

세부 정보 : Windows 환경을 프로그래밍하고 있기 때문에이 페이지와 같은 여러 Iframe이 있으며 동일한 페이지를로드 할 수 있습니다. 이 Iframe을 닫으려고하는데, 그로 인해 내가 어떤 프레임을 닫아야하는지 알아야합니다. 이 Iframe에 대한 참조를 유지하는 배열이 있습니다.

편집 : iframe이 동적으로 생성됩니다

또한 이름과 ID를 같은 값으로 설정할 수 있습니다

<iframe id="frame1" name="frame1" src="any.html"></iframe>

자식 페이지 내에서 다음 코드를 사용할 수 있습니다.

parent.document.getElementById(window.name);

window.frameElement액자 페이지에서 간단히 전화 하십시오. 페이지가 프레임에없는 경우 frameElement가 될 것이다 null.

다른 방법 (프레임 안에 창 요소를 넣는 것은 쉽지 않음)이지만 완전성을 위해 :

/**
 * @param f, iframe or frame element
 * @return Window object inside the given frame
 * @effect will append f to document.body if f not yet part of the DOM
 * @see Window.frameElement
 * @usage myFrame.document = getFramedWindow(myFrame).document;
 */
function getFramedWindow(f)
{
    if(f.parentNode == null)
        f = document.body.appendChild(f);
    var w = (f.contentWindow || f.contentDocument);
    if(w && w.nodeType && w.nodeType==9)
        w = (w.defaultView || w.parentWindow);
    return w;
}

postMessage API를 사용하는 것이 좋습니다 .

iframe에서 전화 :

window.parent.postMessage({message: 'Hello world'}, 'http://localhost/');

페이지에서 iframe을 포함 시키면 다음과 같은 이벤트를들을 수 있습니다.

window.addEventListener('message', function(event) {
      if(event.origin === 'http://localhost/')
      {
        alert('Received message: ' + event.data.message);
      }
      else
      {
        alert('Origin not allowed!');
      }

    }, false);

그건 그렇고, iframe뿐만 아니라 다른 창으로 전화를 걸 수도 있습니다.

John Resigs 블로그의 postMessage API에 대한 자세한 내용은 여기를 참조하십시오.

오래된 질문이지만 방금 동일한 문제가 발생하여 iframe을 얻는 방법을 찾았습니다. 단순히 부모 창의 frames [] 배열을 반복하고 코드가 실행되는 창에 대해 각 프레임의 contentWindow를 테스트하는 것입니다. 예:

var arrFrames = parent.document.getElementsByTagName("IFRAME");
for (var i = 0; i < arrFrames.length; i++) {
  if (arrFrames[i].contentWindow === window) alert("yay!");
}

또는 jQuery를 사용하여 :

parent.$("iframe").each(function(iel, el) {
  if(el.contentWindow === window) alert("got it");
});

이 방법을 사용하면 각 iframe에 ID를 할당 할 수 있으므로 동적으로 생성되므로 좋습니다. window.parent를 사용하여 iframe 요소를 얻을 수 없으므로 더 직접적인 방법을 찾을 수 없습니다 .iframe 요소를 건너 뛰고 부모 창 요소로 바로 이동합니다. 따라서 ID를 사용하지 않으려는 경우 루프를 통해 유일한 방법으로 보입니다.

parent부모 페이지에 액세스하는 데 사용할 수 있습니다 . 따라서 함수에 액세스하려면 다음과 같습니다.

var obj = parent.getElementById('foo');

iframe의 id가 설정되면 아래와 같이 내부 문서에서 iframe에 액세스 할 수 있습니다.

var iframe = parent.document.getElementById(frameElement.id);

IE, Chrome 및 FF에서 잘 작동합니다.

어쩌면 그냥 사용

window.parent

전화 프레임 / 창을 얻으려면 iframe에 넣으십시오. 전화 프레임이 여러 개인 경우 사용할 수 있습니다

window.top

이것을 시도하십시오. 부모 프레임에서 다음과 같이 IFRAME을 설정하십시오.

<iframe id="frame1" src="inner.html#frame1"></iframe>
<iframe id="frame2" src="inner.html#frame2"></iframe>
<iframe id="frame3" src="inner.html#frame3"></iframe>

각 프레임의 id는 src에서 앵커로 전달됩니다.

그런 다음 내부 HTML에서 location.hash를 통해로드 된 프레임의 ID에 액세스 할 수 있습니다.

<button onclick="alert('I am frame: ' + location.hash.substr(1))">Who Am I?</button>

그런 다음 parent.document.getElementById ()에 액세스하여 iframe 내부에서 iframe 태그에 액세스 할 수 있습니다

// just in case some one is searching for a solution
function get_parent_frame_dom_element(win)
{
    win = (win || window);
    var parentJQuery = window.parent.jQuery;
    var ifrms = parentJQuery("iframe.upload_iframe");
    for (var i = 0; i < ifrms.length; i++)
    {
        if (ifrms[i].contentDocument === win.document)
            return ifrms[i];
    }
    return null;
}