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
애초에 innerHTML 로는 일반적인 자바스크립트를 담을 수 없습니다. 담으려고 하면 굉장한 용을 써야 해요.
방법은 있다고 들었는데 시도는 안해 봤어요.
왜냐하면 아래 두가지 방법으로 하니까요.
innerHTML 로는 그저 css 와 html 만 담을 수 있습니다.
아작스가 아니라 동일 페이지 내에서두요.
꼭 외부문서로 자바스크립트를 끼우려연.
1. 외부문서를 php curl 로 코드를 만든 후 js 파일처럼 부른다.
2. 아이프레임 문서에서 자바스크립트 함수를 정의하고 그 문서의 함수를 상단문서에서 부른다.
이게 제가 쓰는 방식입니다.
역시 학습이 필요합니다.
아작스 문서는 정보전달이 주 기능이지 함수나 변수전달을 하기 위해 사용하는 건 아니에요
제일 편한건 분류용이가 목적이라면 그냥 개개의 js 파일로 만들어 쓰는 것이 가장 좋습니다.
그누4 써 보셨는지요.
그누4를 보면 사이즈 0짜리 아이프레임이 하나 있어요.
클라 한 분이 이 아이프레임이 왜 필요하냐고 물어보더라구요.
그게 그누4에서는 일종의 아작스 대용이었습니다.
물론 그누4 줄창 사용했던 사람도 이 사실을 아는 사람은 별로 없습니다.ㅋ
개발자급 정도만이 알고 있었죠.