javascript - w3school - www 3schools com php

ajax HTML 응답에서 body 태그 찾기 (3)

나는 무언가를 놀랍다 (나는 생각한다!)

html로 문자열을 얻었습니까?

var results = //probably an ajax response

다음은 현재 DOM에 첨부 된 요소와 똑같이 작동하는 jquery 객체입니다.

var superConvenient = $($.parseXML(response)).children('html');

superConvenient 에서 아무것도 제거되지 않습니다! superConvenient.find('body') 또는 심지어

superConvenient.find('head > script');

superConvenient 는 jquery 요소와 똑같이 작동합니다.

노트

이 경우 문자열 results 는 JQuery의 parseXML 메소드에 parseXML 되므로 유효한 XML parseXML . HTML 응답의 일반적인 기능은 <!DOCTYPE> 태그 일 수 있습니다.이 태그는이 의미에서 문서를 무효화합니다. <!DOCTYPE> 이 접근법을 사용하기 전에 태그를 제거해야 할 수도 있습니다! 또한  태그를 닫지 않고 태그, 예 :

<ul>
    <li>content...
    <li>content...
    <li>content...
</ul>

... 그리고 HTML의 어떤 다른 특징들도 브라우저에 의해 철저히 해석 될 것이지만, XML 파서는 충돌 할 것이다.

나는 내용을 가져오고 다음과 같이이 내용을 추가하라는 아약스 호출을하고있다.

$(function(){
    var site = $('input').val();
    $.get('file.php', { site:site }, function(data){
        mas = $(data).find('a');
        mas.map(function(elem, index) {
            divs = $(this).html();
            $('#result').append('' + divs + '');
        })
    }, 'html');
});

문제는 내가 body 변경할 때 아무것도 얻지 못한다는 것입니다 (오류가없고, 단지 HTML이 아닙니다). Im은 몸이 'a'와 같은 태그라고 가정합니다. 내가 뭘 잘못하고 있죠?

그래서이 작품은 나를 위해 :

 mas = $(data).find('a');

하지만 그렇지 않습니다.

 mas = $(data).find('body');

나는 약간의 실험을했고, 그 원인을 파악했다. 그래서 나는 진짜 관심을 가질만한 답변을 기다리고있다. 문제를 이해하는데 도움이되는 해킹이있다.

$.get('/',function(d){
    // replace the `HTML` tags with `NOTHTML` tags
    // and the `BODY` tags with `NOTBODY` tags
    d = d.replace(/(<\/?)html( .+?)?>/gi,'$1NOTHTML$2>',d)
    d = d.replace(/(<\/?)body( .+?)?>/gi,'$1NOTBODY$2>',d)
    // select the `notbody` tag and log for testing
    console.log($(d).find('notbody').html())
})

편집 : 추가 실험

iframe에 내용을로드하면 dom 객체 계층 구조를 통해 프레임 내용에 액세스 할 수 있습니다.

// get a page using AJAX
$.get('/',function(d){

    // create a temporary `iframe`, make it hidden, and attach to the DOM
    var frame = $('<iframe id="frame" src="/" style="display: none;"></iframe>').appendTo('body')

    // check that the frame has loaded content
    $(frame).load(function(){

        // grab the HTML from the body, using the raw DOM node (frame[0])
        // and more specifically, it's `contentDocument` property
        var html = $('body',frame[0].contentDocument).html()

        // check the HTML
        console.log(html)

        // remove the temporary iframe
        $("#frame").remove()

    })
})

편집 : 더 많은 연구

contentDocument는 iFrame의 window.document 요소를 가져 오는 표준 준수 방법 인 것처럼 보이지만 물론 IE는 표준을 신경 쓰지 않습니다. 따라서 iFrame의 window.document.body 대한 참조를 얻는 방법 window.document.body 크로스 플랫폼 방식의 객체 ...

var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var iframeBody = iframeDoc.body;
// or for extra caution, to support even more obsolete browsers
// var iframeBody = iframeDoc.getElementsByTagName("body")[0]

참조 : iframe의 contentDocument

body 태그를 얻기 위해 반환 된 HTML을 jQuery 객체 (예 : $(data) )를 통해 파싱하면 실패 할 것입니다.

이유는 반환 된 data 가 string (try console.log(typeof(data)) )입니다. 이제 jQuery 문서 에 따르면 복잡한 HTML 마크 업을 포함하는 문자열에서 jQuery 객체를 만들 때 body 과 같은 태그가 제거 될 수 있습니다. 이것은 객체를 생성하기 위해 실제로 추가 태그를 허용 할 수없는 HTML 마크 업이 DOM에 삽입되기 때문에 발생합니다.

문서의 관련 인용문 :

문자열이 $ ()에 매개 변수로 전달되면 jQuery는 문자열을 검사하여 HTML과 같은지 확인합니다.
[...] HTML이 속성이없는 단일 태그보다 더 복잡한 경우 위의 예에서와 같이 요소의 실제 생성은 브라우저의 innerHTML 메커니즘에 의해 처리됩니다. 대부분의 경우 jQuery는 새로운 요소를 만들고 요소의 innerHTML 속성을 전달 된 HTML 스 니펫으로 설정합니다. 매개 변수에 하나의 태그 (선택 태그 또는 빠른 닫기 포함)가있는 경우 - $ ( "<img / > ") 또는 $ ("<img> "), $ ("<a> </ a> ") 또는 $ ("<a> ") - jQuery는 기본 JavaScript createElement () 함수를 사용하여 요소를 만듭니다.
복잡한 HTML을 전달할 때 일부 브라우저는 제공된 HTML 소스를 정확하게 복제하는 DOM을 생성하지 않을 수 있습니다. 앞서 언급했듯이 jQuery는 브라우저의 .innerHTML 속성을 사용하여 전달 된 HTML을 구문 분석하여 현재 문서에 삽입합니다.이 과정에서 일부 브라우저는 <html>, <title> 또는 <head> 요소와 같은 특정 요소를 필터링합니다 결과적으로 삽입 된 요소는 전달 된 원래 문자열을 나타내지 않을 수 있습니다.