제이쿼리 또는 js로 다른 html파일에 있는 요소 컨트롤이 가능할까요?

Question

a.html 과 b.html이 있다고 가정하고a.html에서 b.html을 제이쿼리로 load하고 있습니다.이때 b.html의 태그를 클릭 했을때 a.html의 태그를컨트롤 할 수 있는 방법이 있는지 궁금합니다.js로 구성해도 상관 없는데 방법을 알고 싶습니다.

HJOW · Answer

댓글로 추가정보 주셔서 실험을 좀 해보고 진짜 답변 드립니다.첫 번째 실험세 파일을 만듭니다.root.html

ROOT DIV

Content

header.html

HEADER

footer.html

FOOTER

이 실험은 웹서버가 필요합니다.로컬 파일을 두고 그냥 브라우저로 실행하면, 파일 경로를 URL로 인식해 다른 도메인으로 알아듣고 CORS 오류를 내뱉습니다. 상대경로여도 똑같이 오류가 발생합니다.톰캣 같은 WAS도 괜찮습니다. 서버로 이 세 파일을 띄우면 됩니다.서버 띄우고브라우저로 root.html 을 띄워 봅니다.스크립트 적용이 안됐네요? $('#header_inside').text('I am header'); $('#footer_inside').text('I am footer');얘내들 적용이 안됐습니다.이걸 보고 질문자분은 "아 load 로 가져온 영역은 스크립트로 액세스가 안되는구나"라고 착각 하셨습니다.두 번째 실험위 파일 중 root.html 만 변경하고, header.html 와 footer.html 는 그대로 사용합니다.

ROOT DIV

Content

일단 결과부터 보죠.적용이 됐네요?$('#header_inside').text('I am header'); 이 내용이 말이죠.적용 원래 되는 게 맞습니다.문제는 jQuery 의 load 함수가 비동기 함수라서 그렇습니다.Promise 지원도 안되서, 콜백함수로 "이후 처리할 동작" 을 넣어주셔야 합니다. 거기서 액세스가 가능하죠.지금 님이 원하는 내용 자체가 글 내용이 아닌 것 같습니다.우선 html, 자바스크립트 환경에서, 로컬 파일을 직접 액세스해 수정하는 방법은 없습니다.근데 그걸 원하시는 게 아닌 거 같고a.html 과 b.html 둘다 화면이 떠있고b.html 쪽 화면에서 뭔가 버튼을 클릭했을 때a.html 쪽 화면에서 특정 태그에 값이 바뀐다거나 하는 건가능합니다. (단, 동일 브라우저 상에서 떠야 하며, 동일 세션이어야 함.)이것도 케이스가 여러가지가 있을 수가 있는데a와 b를 둘중 하나를 팝업으로 띄워놨을수도 있고부모창이 따로있고 그 안에 프레임이 두개로 쪼개져서 각각 a, b 가 떠있을 수도 있고a가 부모창이고 b가 iframe 으로 들어가 있는 등경우의 수가 많고, 각각이 방법이 다 다릅니다.

킁킁탐정 · Answer

질문에서 Load가 embed, popup 그리고 iframe 중에 어떤건지 구분이 되지 않지만 embed라면 DOM을 조작해서 충분하게 event를 제어 가능합니다. popup/iframe이라면 다음의 정보를 참고해보세요.https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

kyuho · Answer

a.html 에서 b.html 로드가 완료됐을 때, b.html 의 태그에 클릭 이벤트를 추가하면 되지 않을까요?$("#target-container").load("b.html", function() { // b.html 로드 완료 후 b.tag 요소에 클릭 이벤트 추가 $("b.tag").on("click", function(){ // a 태그 컨트롤 코드 }); });아니면 b.html 이 추가되는 dom 자체에 b.tag 이벤트를 미리 걸어놓는 방법도 있어요

Hmnya · Answer

b에서 if(opener){opener.location.reload();}이게 동작하는지 확인해보시지요.동작한다면 opener로 접근하시면 될겁니다.

The Lowly · Answer

Document ready ...랜더링하고나서.... 아닌가요

제이쿼리 또는 js로 다른 html파일에 있는 요소 컨트롤이 가능할까요?

5개의 답변

#jquery 목록