iframe에서 JavaScript 기능을 호출합니다

StackOverflow https://stackoverflow.com/questions/1600488

  •  05-07-2019
  •  | 
  •  

문제

an에서 JavaScript 함수를 호출하는 데 문제가 있습니다 iframe 부모 페이지에서. 다음은 내 두 페이지입니다.

mainpage.html

<html>
<head>
    <title>MainPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            if (document.all.resultFrame)
                alert("resultFrame found");
            else
                alert("resultFrame NOT found");

            if (typeof (document.all.resultFrame.Reset) == "function")
                document.all.resultFrame.Reset();
            else
                alert("resultFrame.Reset NOT found");
        }
    </script>
</head>
<body>
    MainPage<br>
    <input type="button" onclick="Reset()" value="Reset"><br><br>
    <iframe height="100" id="resultFrame" src="resultFrame.html"></iframe>
</body>
</html>

resultframe.html

<html>
<head>
    <title>ResultPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            alert("reset (in resultframe)");
        }
    </script>
</head>
<body>
    ResultPage
</body>
</html>

(나는 그것을 알고있다 document.all 권장되지는 않지만이 페이지는 IE를 내부적으로 만보아야하며 그것이 문제라고 생각하지 않습니다).

리셋 버튼을 누르면 "resultframe foun 프레임에 대한 참조가있는 것 같지만 프레임의 함수를 호출 할 수는 없습니다. 왜 그런가요?

도움이 되었습니까?

해결책

사용:

document.getElementById("resultFrame").contentWindow.Reset();

iframe에서 재설정 함수에 액세스하려면

document.getElementById("resultFrame")코드에서 iframe을 얻을 수 있습니다 contentWindow iframe에서 창 객체를 얻습니다. 자식 창이 있으면 해당 맥락에서 JavaScript를 참조 할 수 있습니다.

또한 참조하십시오 여기 특히 Bobince의 답변.

다른 팁

문서에서 프레임을 가져 오는 대신 창 객체에서 프레임을 가져 오십시오.

위의 예에서는 이것을 변경합니다.

if (typeof (document.all.resultFrame.Reset) == "function")
    document.all.resultFrame.Reset();
else
    alert("resultFrame.Reset NOT found");

에게

if (typeof (window.frames[0].Reset) == "function")
    window.frames[0].Reset();
else
    alert("resultFrame.Reset NOT found");

문제는 iframe 내부의 JavaScript의 범위가 Iframe의 DOM 요소를 통해 노출되지 않는다는 것입니다. 창 객체 만 프레임에 대한 JavaScript 스코핑 정보가 포함되어 있습니다.

더 많은 견고성을 위해 :

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

그리고 

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.reset();
  ...
}
...

부르다

window.frames['resultFrame'].Reset();

objectframe.contentWindow.Reset() 먼저 프레임의 최상위 요소에 대한 참조가 필요합니다.

충족해야 할 첫 번째로 가장 중요한 조건은 부모와 iframe이 동일한 기원에 속해야한다는 것입니다. 일단 완료되면 자녀는 Window.opener 방법을 사용하여 부모를 호출 할 수 있으며 부모는 위에서 언급 한 것과 같이 자녀에게 동일한 작업을 수행 할 수 있습니다.

Document를 통해 결과 프레임에 액세스 할 때는 전체만이 창 프레임이 아닌 HTML 요소로 만 가져옵니다. "이"자체 참조를 사용하여 프레임 화재가있는 경우 동일한 문제가 발생합니다.

바꾸다:

document.all.resultFrame.Reset();

와 함께:

window.frames.resultFrame.Reset();

또는:

document.all.resultFrame.contentWindow.Reset();

직접 사용할 수 없고이 오류가 발생하면 원산지가있는 프레임을 차단했습니다. "http : // www..com "크로스 오리핀 프레임에 액세스하는 것. postmessage () 기능을 직접 사용하는 대신.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top