AJAX 로 불러온 내용의 script 인식하는 방법

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
AJAX 로 불러온 내용의 script 인식하는 방법

QA

AJAX 로 불러온 내용의 script 인식하는 방법

본문

죄송하게도 또 막혔습니다...ㅠ


ajax 로 불러온 파일 안에 html 과 함께 자바스크립트도 있는 경우, 가져 오기는 하는데 자바스크립은 전혀 작동시키지 못합니다.
아래는 간단한 예제 소스입니다.



<!DOCTYPE html>
<html>
<body>
<button id="test" onclick="test()">AJAX test</button>
<div id="output"></div>
<script>
function test() {
    var url = 'test.html';
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, 1);
    xhr.setRequestHeader('accept','text/javascript');
    xhr.send();
    xhr.onload = function() {
            document.getElementById('output').innerHTML = xhr.response;
    };
}
</script>
</body>
</html>

 

다음은 불러온 test.html 의 소스입니다.

 


<p>저를 부르셨나요?</p>
<button onclick="callMe()">Answer</button>
<script>
function callMe() {
    alert('응.. 밥 좀 줘요');
}
</script>

 

위에서 [AJAX test] 버튼을 누르면 아래 test.html 내용까지는 잘 불러옵니다.
그런데 불러온 내용의 [Answer] 버튼을 누르면 callMe() 함수가 작동해야 하는데 전혀 인식하지 못합니다.


질문입니다.


1. 불러들인 test.html 파일 내에 있는 <script>~</script> 내용을 인식되게 하려면 어떻게 하나요?


2. 이렇게 하려는 이유는 자바스크립 함수들을 한 군데 다 넣으니 어느게 어느건지 헷갈려서 기능별로 나누려고 합니다.
예를들어 위 test.html의 화면에서만 사용하는 함수들은 그곳에 자바스크립 까지 같이 저장하면 불러 왔을 때만 쓰면 되고, 유지보수도 편할것 같아서요.
질문은 이런 방법도 흔히 사용하나요?
안 한다면 이유는?


3. 이렇게 불러와서 사용된 스크립을 다시 제거 하려면?
불러온 test.html 내용 처리 끝나고, 더 이상 필요없다면 제거도 되나요?
document.getElementById('output').innerHTML = '';
이렇게 div 내용을 초기화 하면 여기서 사용한 자바스크립도 없어지는 건가요??


밤을 꼴딱 새서 답변을 못 기다리고 우선 자야겠네요...ㅎ
미리 감사드립니다...^^
 

이 질문에 댓글 쓰기 :

답변 3

https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js

참고하세요.

엑스엠엘님의 답변은 항상 한 줄...ㅋㅋㅋ  근데 정답이야....
감사합니다.

그런데 js 내용은 별도로 불러와야 하는군요.
html 과 섞여 있는 경우는 제대로 안되는군요.
그래도 방법을 알았으니 요령껏 사용하면 되겠네요.

애초에 innerHTML 로는 일반적인 자바스크립트를 담을 수 없습니다. 담으려고 하면 굉장한 용을 써야 해요.

방법은 있다고 들었는데 시도는 안해 봤어요.

왜냐하면 아래 두가지 방법으로 하니까요.

innerHTML 로는 그저 css 와 html 만 담을 수 있습니다.

아작스가 아니라 동일 페이지 내에서두요.

 

꼭 외부문서로 자바스크립트를 끼우려연.

 

1. 외부문서를 php curl 로 코드를 만든 후 js 파일처럼 부른다.

2. 아이프레임 문서에서 자바스크립트 함수를 정의하고 그 문서의 함수를 상단문서에서 부른다.

 

이게 제가 쓰는 방식입니다.

역시 학습이 필요합니다.

아작스 문서는 정보전달이 주 기능이지 함수나 변수전달을 하기 위해 사용하는 건 아니에요

 

제일 편한건 분류용이가 목적이라면 그냥 개개의 js 파일로 만들어 쓰는 것이 가장 좋습니다.

감사합니다.
지금 꼭 필요한 것은 아니었고 "이렇게도 되나?" 가 궁금해서 시도해 보던 내용이었습니다.

2번 질문의 답은 비타주리님이 주셨는데,
답변채택을 한 명 밖에 할 수 없어 먼저 답변하신 엑스엠엘님 답변을 채택했습니다...^^

 

그누4 써 보셨는지요.

그누4를 보면 사이즈 0짜리 아이프레임이 하나 있어요.

클라 한 분이 이 아이프레임이 왜 필요하냐고 물어보더라구요.

그게 그누4에서는 일종의 아작스 대용이었습니다.

물론 그누4  줄창 사용했던 사람도 이 사실을 아는 사람은 별로 없습니다.ㅋ

개발자급 정도만이 알고 있었죠.

답변을 작성하시기 전에 로그인 해주세요.
전체 21
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT