1

jQuery を使用して Ajax 経由で完全な HTML5 ドキュメントを要求しています。それらを解析し、要素をメイン ページの DOM に転送できるようにしたいと考えています。理想的には、モバイルを含むすべての主要なブラウザーで使用できます。プロセスをできるだけ速くしたいので、iframeを作成したくありません。Chrome と Firefox を使用すると、次のことができます。

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

これにより、少し驚くべきことに、doctype がなくても適切なドキュメントが作成されます。ただし、IE9 では、innerHTML を使用してhtml要素のコンテンツを設定することはできません。私は運なしで次のことをやろうとしました:

  1. DOM を作成し、開き、書き込み、閉じます。問題: でdoc.open、IE9 が という例外をスローしますUnspecified error.。

    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繰り返しますが、 andを解析できる必要があるだけでなく、bodyこれらの新しい要素をメイン dom に追加できる必要もあります。

どうもありがとう！

4

1 に答える 1

0

Answering my own question... To solve my issue I used all solutions mentioned in my post, with try/catch blocks if a browser throws an error (oh, how we love thee IE!). The following works in IE8, IE9, Chrome 23, Firefox 17, iOS 4 and 5, Android 3 & 4. I have not tested Android 2.1-2.3 and IE7.

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);
  }
}

At this point we can find elements using jQuery. Transferring them to a different DOM creates a bit of a problem. There are a couple of methods that do this, but they are not widely supported yet (importNode & adoptNode) and/or are buggy. Given that our selector string is called 'selector', below I re-created the found elements and append them to '.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);
};
于 2012-12-07T02:12:00.410 に答える