Ajax HTML 응답에서 본문 태그 찾기
컨텐츠를 가져와서 다음과 같이 추가하기 위해 Ajax 전화를 걸고 있습니다.
$(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');
});
문제는 내가 바뀔 때a에body아무것도 얻지 못했습니다(오류 없음, html 없음)'a'가 태그인 것처럼 몸도 태그라고 생각합니까?내가 뭘 잘못하고 있는 거지?
그래서 이것은 저에게 효과가 있습니다.
mas = $(data).find('a');
하지만 이것은 그렇지 않습니다.
mas = $(data).find('body');
결국 이 간단한 해결책이 나왔습니다.
var body = data.substring(data.indexOf("<body>")+6,data.indexOf("</body>"));
$('body').html(body);
헤드 또는 다른 태그와도 작동합니다.
(xml 구문 분석을 사용하는 솔루션이 더 좋겠지만 잘못된 XML 응답을 사용하는 경우 "문자열 구문 분석"을 수행해야 합니다.
jQuery 개체(즉, jQuery 개체)를 통해 반환된 HTML 구문 분석$(data))를 얻기 위해body유감스럽게도 태그는 실패할 운명입니다.
그 이유는 돌아온 사람들이data이다.string(노력)console.log(typeof(data))jQuery 문서에 따르면 복잡한 HTML 마크업을 포함하는 문자열에서 jQuery 개체를 만들 때 다음과 같은 태그가 있습니다.body옷이 벗겨질 가능성이 높습니다.이는 객체를 만들기 위해 HTML 마크업이 실제로 DOM에 삽입되어 추가 태그를 허용할 수 없기 때문에 발생합니다.
설명서의 관련 인용문:
문자열이 $()에 매개 변수로 전달되면 jQuery는 문자열이 HTML과 유사한지 검사합니다.
[...] 위의 예와 같이 HTML이 속성이 없는 단일 태그보다 복잡할 경우, 요소의 실제 작성은 브라우저의 내부에서 처리됩니다.HTML 메커니즘.대부분의 경우 jQuery는 새 요소를 만들고 내부 요소를 설정합니다.전달된 HTML 스니펫에 대한 요소의 HTML 속성입니다.매개 변수에 단일 태그(옵션 닫기 태그 또는 빠른 닫기 태그 포함)가 있는 경우 - $("< img/>") 또는 $("< img>"), $("/a>") 또는 $("< a>") - jQuery는 기본 JavaScript createElement() 함수를 사용하여 요소를 만듭니다.
복잡한 HTML을 전달할 때 일부 브라우저는 제공된 HTML 원본을 정확하게 복제하는 DOM을 생성하지 못할 수 있습니다.앞서 언급했듯이, jQuery는 브라우저의 .inner를 사용합니다.전달된 HTML을 구문 분석하여 현재 문서에 삽입하는 HTML 속성입니다.이 과정에서 일부 브라우저는 < html >, < title > 또는 < head > 요소와 같은 특정 요소를 걸러냅니다.따라서 삽입된 요소가 전달된 원래 문자열을 나타내지 않을 수 있습니다.
저는 약간의 실험을 했고, 어느 정도 원인을 알아냈기 때문에, 제가 관심을 가질 진정한 대답을 기다리는 동안, 여기 문제를 이해하는 데 도움이 되는 해킹이 있습니다.
$.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에 콘텐츠를 로드하면 돔 객체 계층을 통해 프레임 콘텐츠에 액세스할 수 있습니다.
// 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의 인 것 .window.document는 표준을 에, 의 iFrame에 입니다.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]
멋진 걸 알아냈어요 (내 생각엔!)
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 요소와 똑같이 작동합니다!!!!
메모
경 우 문 열 은 자resultsJQuery에 공급되므로 유효한 XML이어야 합니다.parseXML방법. 응답의 응인특징은다같다습니음과일반적입니다.<!DOCTYPE>태그. 이 경우 문서가 무효화됩니다.<!DOCTYPE>이 접근 방식을 사용하기 전에 태그를 제거해야 할 수 있습니다! 다과같은기주능의오시십하도음▁such와 같은 도 주의해야 합니다.<!--[if IE 8]>...<![endif]-->닫는 태그가 없는 태그(예:
<ul>
<li>content...
<li>content...
<li>content...
</ul>
브라우저에 의해 쉽게 해석되지만 XML 파서를 손상시키는 HTML의 다른 기능.
나에게 도움이 된 Regex 솔루션:
var head = res.match(/<head.*?>.*?<\/head.*?>/s);
var body = res.match(/<body.*?>.*?<\/body.*?>/s);
상세설명 : https://regex101.com/r/kFkNeI/1
언급URL : https://stackoverflow.com/questions/14423257/find-body-tag-in-an-ajax-html-response
'sourcecode' 카테고리의 다른 글
| Oracle에서 10분 이내에 천만 개의 쿼리를 삽입하시겠습니까? (0) | 2023.07.28 |
|---|---|
| RecyclerView 스크롤을 비활성화하는 방법은 무엇입니까? (0) | 2023.07.28 |
| mariadb의 select+update 트랜잭션을 원자적으로 실행할 수 없습니다. (0) | 2023.07.28 |
| 사용자 MVCEF Core를 기반으로 다른 데이터베이스에 연결 (0) | 2023.07.28 |
| ADODB.Command: 준비된 문이 예상 레코드 수를 반환하지 않습니다. (0) | 2023.07.28 |