여러 HTML DOM - 데이터 파싱 및 전송

Question

jQuery를 사용하여 Ajax를 통해 전체 HTML5 문서를 요청하고 있습니다. 나는 그것들을 파싱하고 요소들을 메인 페이지 DOM에, 이상적으로는 모바일을 포함한 모든 주요 브라우저로 전송할 수 있기를 원합니다. 내가 원하는대로 iframe을 만들고 싶지는 않습니다. 단지 DOCTYPE없이, 다소 놀랍게도,

var contents = $(document.createElement('html')); 
contents[0].innerHTML = data; // data : HTML document string 

이 적절한 문서를 생성합니다 : 크롬 & 파이어 폭스와 나는 다음을 수행 할 수 있습니다. 그러나 IE9에서는 innerHTML을 사용하여 html 요소의 내용을 설정할 수 없습니다. 나는 운이없이, 다음을 수행하려고 :

1. 는 그것을 열고 DOM을 만들기 쓸 닫습니다. 문제 : doc.open에서 IE9는 Unspecified error.이라는 예외를 throw합니다.

   var doc = document.implementation.createHTMLDocument(''); 
   doc.open(); 
   doc.write(data); 
   doc.close(); 
   

2. ActiveX DOM을 만듭니다. 이번에는 결과가 더 좋지만 문서간에 요소를 복사/복사 할 때 IE9가 충돌합니다. 아니 IE8 지원 (adoptNode/importNode 지원) 때문에 나쁜.

   var doc = new ActiveXObject('htmlfile'); 
   doc.open(); 
   doc.write(data); 
   doc.close(); 
   contents = $(doc.documentElement); 
   document.adoptNode(contents); 
   

나는에 대한 재귀 대신 내 문서간에 전송의, 요소를 다시 생각했다,하지만 그건 내가 전송하는 많은 노드를 가질 수 있음을 주어, 비용이 많이 드는 작업처럼 보인다. 내 마지막 ActiveX 예제가 IE8 이전 버전에서 작동 할 가능성이 높습니다 (구문 분석 용으로는 적어도).

이것에 대한 아이디어가 있습니까? 다시 말하지만, head과 body을 구문 분석 할 수 있어야 할뿐만 아니라이 새로운 요소를 내 메인 DOM에 추가 할 수 있어야합니다.

감사합니다.

Answer 1

내 질문에 답하기 ... 브라우저에서 오류가 발생하는 경우 try/catch 블록을 사용하여 내 게시물에 언급 된 모든 솔루션을 사용했습니다 (오, IE를 어떻게 사랑하니?). 다음은 IE8, IE9, Chrome 23, Firefox 17, iOS 4 및 5, Android 3에서 작동합니다. & 4. Android 2.1-2.3 및 IE7을 테스트하지 않았습니다. 우리가 jQuery를 사용하여 요소를 찾을 수있는이 시점에서

var contents = $(''); 
try { 
    contents = $(document.createElement('html')); 
    contents[0].innerHTML = data; 
} 
catch(e) { 
    try { 
    var doc = document.implementation.createHTMLDocument(''); 
    doc.open(); 
    doc.write(data); 
    doc.close(); 
    contents = $(doc.documentElement); 
    } 
    catch(e) { 
    var doc = new ActiveXObject('htmlfile'); 
    doc.open(); 
    doc.write(data); 
    doc.close(); 
    contents = $(doc.documentElement); 
    } 
} 

. 그것들을 다른 DOM에 전송하면 약간의 문제가 발생합니다. 이 작업을 수행하는 몇 가지 방법이 있지만 아직 널리 지원되지는 않습니다 (importNode & adoptNode) 또는 버그가 있습니다. 우리의 선택자 문자열이 'selector'라고한다면, 아래에서 발견 된 요소를 다시 만들고 '.someDiv'에 추가하십시오.

var fnd = contents.find(selector); 
if(fnd.length) { 
    var newSelection = $(''); 
    fnd.each(function() { 
    var n  = document.createElement(this.tagName); 
    var attr = $(this).prop('attributes'); 
    n.innerHTML = this.innerHTML; 
    $.each(attr,function() { $(n).attr(this.name, this.value); }); 
    newSelection.push(n); 
    }); 
    $('.someDiv').append(newSelection); 
};