2014-11-12 3 views
0

iframe을로드하는 창이 있습니다.iframe의 함수에 액세스

는 윈도우의 위치는

"http://localhost/current/test.html" 

입니다 와 iframe이의 위치는

"http://localhost/current/testFrame.html" 

입니다 그리고 내 인 test.html의 스크립트는에 존재하는 기능에 액세스하려고 iframe 창의 범위. 하지만 권한이 거부되었습니다.

내 기본 창에서 예를 들어 나는 스크립트

$("iframe")[0].contentWindow.getState(); //Permission Denied 

이 라인을 실행하고 그리고 iframe이 완전히로드 될 때 그 기능에 액세스를 시도하고있다.

부모 창이 양쪽 iframe의 기능에 동일한 방법으로 액세스 할 수있는 방법은 동일한 출발점에 있습니다.

+0

어떤 브라우저입니까? 또는 모든 브라우저? – DontVoteMeDown

+0

동일 도메인 페이지에서 CORS 문제가 발생하는 것은 이상합니다. [this] (http://stackoverflow.com/a/364997/1267304)를 확인하십시오. – DontVoteMeDown

+0

요청하기 전에 조사를해야합니다. [오래된 질문] [1] [1] : http://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe –

답변

1

당신은 자바 스크립트 PostMessage를를 사용하고, 예를 들어 크로스 윈도우 API 시스템

을 만들어야합니다

parent.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>parent</title> 
    <script> 
     function iframeAction(actionId){ 
      var iframe = document.getElementById('myIframe'); 
      iframe.contentWindow.postMessage(actionId,'*'); 
     } 
    </script> 
</head> 

<body> 
    <button type="button" onclick="iframeAction(1)">do iframe action 1</button> 
    <button type="button" onclick="iframeAction(2)">do iframe action 2</button> 
    <br> 
    <iframe src="./iframe.html" id="myIframe" /> 
</body> 

</html> 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>parent</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 

     //page generic functions 
     function doActoin_1(){$("#labal").html("Action 1");} 
     function doActoin_2(){$("#labal").html("Action 2");} 

     // Listen to message from parent 
     var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
     var eventer = window[eventMethod]; 
     var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 

     eventer(messageEvent,function(e) { 
      switch(e.data){ 
       case 1: doActoin_1(); break; 
       case 2: doActoin_2(); break; 
      }   
     },false); 

    </script> 

</head> 

<body> 
    <h1 id="labal">iFrame</h1> 
</body> 

</html> 
iframe.html

iframe.html에는 일반적인 자바 스크립트 기능이 포함되어 있지만, 윈도우 수신기를 추가하면 ader 창에서 사용할 동적 API를 만들 수 있습니다.

희망이 도움이 될 것입니다.

-2

window.frames 속성을 사용하여 iframe에 액세스 할 수 있습니다.

window.frames[0]은 첫 번째 iframe을 제공해야합니다.

예 -

<iframe name="frame1" src="testframe.html"></iframe> 

iframe 대한 window 객체를 제공한다

window.frames["frame1"] 

으로 액세스 할 수있다.

+1

UM, 어떻게'$ ("iframe") [0]'과 다른가요? – epascarello

+1

질문에 대한 대답이 확실하지 않습니다. – DontVoteMeDown

+0

jQuery 파트에 대해 확실하지 않은 경우 윈도우 객체를 반환합니까? – jaibatrik

0

원하는 것을 얻는 또 다른 방법은 window.postMessage을 사용하여 내부 함수를 실행하고 다른 메시지를 사용하여 결과를 부모에게 반환하는 것입니다. iframe에

:

window.addEventListener("message", function(e) { 
    var state = getState(); 
    e.source.postMessage(state, "*"); 
}, false); 

부모에서 :

window.addEventListener("message", function(e) { 
    var state = e.data; //do something with your data 
}, false); 

$("iframe")[0].contentWindow.postMessage("getState", "*"); 

그냥 도메인으로 * 대체합니다. 자세한 내용은 here을 참조하십시오.

관련 문제