2013-10-29 2 views
0

iframe과 버튼이있는 html 파일이 있습니다. 버튼을 클릭 한 후 iframe의 본문 안에 javascript 함수를 추가 할 수 있습니까? 여기 내 코드가있다. 감사합니다iframe의 본체 안에 javascript 함수를 추가하는 방법

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    <script> 
     function callMe() { 
      var frame = $('iframe'), 
      contents = frame.contents(), 
      body = contents.find('body'); 

    var script2 = document.createElement("script"); 
    script2.type = "text/javascript"; 
    script2.text = " function setEmployeeId(){var employeeId = 0;};"    
    $(body).append(script2); 
     };  
    </script> 



    <title>sample</title> 
</head> 
<body> 
     <iframe src="page2.html">   
     </iframe> 
    <button onClick="callMe();">click</button> 
</body> 
</html> 

내가 원하는 결과는 이와 같아야합니다.

<html> 
<head> 

    <title>sample</title> 
</head> 
<body> 
     <iframe> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <script> 
function setemployeeId() { 
var employeeId = 0; 
}; 
</script> 
</body> 
</html> 
</iframe>  
</body> 
</html> 
+0

도메인의 프레임 페이지가 있습니까? –

+0

@AndrewBarber 그래서'src'는 상대적인 "page2.html"이라고 생각합니다. – zamnuts

+1

여기에서 답을 찾을 수 있습니다 ... http://stackoverflow.com/questions/1591135/why-does-appending-a-script-to-a-dynamically-created-iframe-seem-to-run- – gts101

답변

1

희망에 따라 나에게 몇 가지 사실을 명확히 할 수는 있지만 좋지 않은 소식이 있습니다.

iframe에로드 된 모든 컨텐츠는로드중인 페이지를 소유하고있는 경우를 제외하고는 실제로 편집 할 수 없습니다.이 경우로드 된 페이지에 필요한 내용을 베이크 할 수 있습니다.

어쨌든!

contentWindow 속성을 사용하여 iframe의 요소에 계속 액세스 할 수 있습니다. 여기에 모든 레이아웃이 있습니다 : How to pick element inside iframe using document.getElementById

작업 할 요소가 있으면 부모 창에서 함수를 만들고 window.parent을 사용하여 부모 창 함수에 대한 호출을 추가 할 수 있습니다. 즉 여기에 설명 된 것 : Calling a parent window function from an iframe

을 그래서 당신이 iframe의 버튼이 당신의 부모 창에 함수를 만들 iframe 당신이 다음

var elem = document.getElementById('myframe1').contentWindow.document.getElementById('myButton') 

을 사용할 수의 내용을 변경할 수 있도록하기를 원한다면

function changeIt(){ 
    document.getElementById('thingToChangeInIframe_ItsIDintheIframe').property = 'value'; 
} 

코드를 사용하여 버튼에 추가하십시오.

elem.setAttribute('onclick', 'changeIt();'); 

의견이 필요한 부분에 대한 설명이있는 경우이를 해결해 드리겠습니다. 정말 많은 jQuery를 사용하지 않아서 유감이지만 그건 정말 자랑스럽지 않지만 순수 자바 스크립트는 상대적으로 자명하다.

편집 : iframe이 다른 도메인에 있으면 옵션이 거의 모두 제거된다는 점을 명확히해야합니다. 보안상의 이유로 iframe에로드 할 때 다른 사람들의 페이지 설정을 엉망으로 만들 수 없습니다.

+2

브라우저 간 지원을 위해서는 여전히'var y = (x.contentWindow || x.contentDocument);를 사용하는 것이 좋습니다. if (y.document) y = y.document;'[w3schools] (http://www.w3schools.com/jsref/prop_frame_contentwindow.asp)에서 볼 수 있습니다. –

+0

아주 좋은 지적입니다. –

관련 문제