program story

iframe에서 자바 스크립트 함수 호출

inputbox 2020. 12. 15. 19:16
반응형

iframe에서 자바 스크립트 함수 호출


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

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 found"및 "resultFrame.Reset NOT found"가 표시됩니다. 프레임에 대한 참조가있는 것 같지만 프레임에서 함수를 호출 할 수 없습니다. 왜 그런가요?


사용하다:

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 내부의 자바 스크립트 범위가 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 메서드를 사용하여 부모를 호출 할 수 있으며 부모는 위에서 언급 한대로 자식에 대해 동일한 작업을 수행 할 수 있습니다.


When you access resultFrame through document.all it only pulls it as an HTML element, not a window frame. You get the same issue if you have a frame fire an event using a "this" self-reference.

Replace:

document.all.resultFrame.Reset();

With:

window.frames.resultFrame.Reset();

Or:

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

If you can not use it directly and if you encounter this error: Blocked a frame with origin "http://www..com" from accessing a cross-origin frame. You can use postMessage() instead of using the function directly.

ReferenceURL : https://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe

반응형