현재 html에서 다른 html의 dom 요소에 액세스하는 방법

Question

현재 페이지가 some1.html이고 두 번째 페이지 some2.html이 있다고 가정합니다. JavaScript를 사용하여 some1.html의 "some2.html"에있는 DOM 요소에 어떻게 액세스합니까?

Answer 1

수 없습니다.

코드는 새 페이지가 동일한 창에로드되고 있음을 보여줍니다.

page1의 JavaScript 환경은 page2 환경이 작성되기 전에 사라집니다. 동시에 존재하지 않기 때문에 다른 DOM에서 하나의 DOM에 액세스 할 수 없습니다.

당신이 할 수있는 일은 localstorage 나 쿠키에 일부 데이터를 저장하고 page2에 배치 한 코드에서 해당 데이터를 찾아서 그 내용을 기반으로 JS를 실행하는 것입니다.

Answer 2

Quentin이 말했듯이 window.location.href을 변경하면 chaned 파일이로드되기 때문에 Ajaxh를 조금 실험 해 볼 수 있습니다. 또는 다음과 같이 iframe을 사용 :이 작업을 수행 할 수

var frame= document.createElement('iframe'); 
frame.setAttribute('src', 'some2.html'); 
frame.setAttribute('name', 'some2'); 
frame.appendTo(body); 
var some2 = document.frames['name']; 
//now you can acces to some2 with getElementById,... 

Answer 3

방법은 AJAX를 사용하는 것입니다 :

$.get(url, function(data) { 
    var $doc = $(data); 
}); 

당신은 URL에서 내용을 얻기 위해 그것을 사용하고 그것으로 뭔가를 할 수 있습니다.

귀하의 편집에 대한 응답으로 : 일반적인 jQuery $('selector') 대신 $doc.find('selector')을 수행하면 DOM 요소에 액세스 할 수 있습니다.

또한 수행하여 조금 더 쉽게 만들 수 있습니다

$.get(url, function(data) { 
    var $doc = $(data); 
    var $d = $doc.find; 
}); 

이 경우 당신은 구문 $d('selector')를 사용할 수 있습니다.

var xhr = new XMLHttpRequest(); 
xhr.open('GET', url, true); 
xhr.responseType = 'document'; 
xhr.send(); 
xhr.onload = function(e) { 
    var doc = e.target.responseXML; 
} 

당신은 일반적으로 요소를 선택할 것처럼 당신은 doc.getElementById('id')를 통해 DOM 요소에 액세스 할 수 있지만 대신 doc를 사용 : 당신이 jQuery를하지 않고이 작업을 수행 할 것입니다 방법은 설치

---

는 것 document.

참고 :이 기능은 $doc, $d 및 doc 변수는 콜백 함수 내에서만 액세스 할 수 있습니다 (그래서 그들은 그들이 정의하고있는 함수 내에서만 액세스 할 수있어).