Was ist die beste Praxis für die Analyse von remote-Inhalt mit jQuery?

StackOverflow https://stackoverflow.com/questions/1034881

  •  07-07-2019
  •  | 
  •  

Frage

Nach einem jQuery ajax-Aufruf zum abrufen der gesamte XHTML-Dokument, was ist der beste Weg, um wählen Sie bestimmte Elemente aus dem resultierenden string?Vielleicht gibt es eine Bibliothek oder ein plugin, das löst dieses Problem?

jQuery können lediglich auswählen der XHTML-Elemente, die es in ein string, wenn Sie sind normalerweise erlaubt, in einem div in der W3C-Spezifikation;also, ich bin neugierig, über Dinge wie die Auswahl <title>, <script>, und <style>.

Nach der jQuery-Dokumentation:

http://docs.jquery.com/Core/jQuery#htmlownerDocument

HTML-string nicht enthalten ungültige Elemente innerhalb eines div, wie html -, head -, body-oder "title" - Elemente.

Deshalb, da wir festgestellt haben, dass jQuery nicht bieten eine Möglichkeit, um dies zu tun, wie würde ich wählen Sie diese Elemente?Als Beispiel,, wenn Sie mir zeigen, wie Sie die remote-Seite den Titel,, dass wäre perfekt!

Vielen Dank, Pete

War es hilfreich?

Lösung

Statt jQuery Hacking, dies zu tun Ich würde vorschlagen, dass Sie für eine Minute aus jQuery Drop und rohen XML-DOM-Methoden verwenden. Verwenden von XML-DOM-Methoden würden Sie kann dies tun: 

  window.onload = function(){ 
    $.ajax({
          type: 'GET', 
          url: 'text.html',
          dataType: 'html',
          success: function(data) {

            //cross platform xml object creation from w3schools
            try //Internet Explorer
              {
              xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
              xmlDoc.async="false";
              xmlDoc.loadXML(data);
              }
            catch(e)
              {
              try // Firefox, Mozilla, Opera, etc.
                {
                parser=new DOMParser();
                xmlDoc=parser.parseFromString(data,"text/xml");
                }
              catch(e)
                {
                alert(e.message);
                return;
                }
              }

            alert(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
          }
    });
  }

Keine Flickschusterei mit iframes etc.

Andere Tipps

Nur eine Idee - getestet in FF / Safari - scheint zu funktionieren, wenn Sie einen iframe erstellen, das Dokument vorübergehend zu speichern. Natürlich, wenn Sie dies tun könnte es klüger sein, nur die src-Eigenschaft des iframe zu verwenden, das Dokument zu laden und tun, was Sie in der „onload“ davon wollen. 

  $(function() {
    $.ajax({
      type: 'GET', 
      url: 'result.html',
      dataType: 'html',
      success: function(data) {
        var $frame = $("<iframe src='about:blank'/>").hide();
        $frame.appendTo('body');
        var doc = $frame.get(0).contentWindow.document;
        doc.write(data);
        var $title = $("title", doc);
        alert('Title: '+$title.text() );
        $frame.remove();
      }
    });
  });

ich den Iframe an den Körper anzuhängen musste es bekommen .contentWindow zu haben.

Inspiriert von diese beantworten , aber mit latenten: 

function fetchDoc(url) {
  var dfd;
  dfd = $.Deferred();

  $.get(url).done(function (data, textStatus, jqXHR) {

    var $iframe = $('<iframe style="display:none;"/>').appendTo('body');
    var $doc = $iframe.contents();
    var doc = $doc[0];

    $iframe.load(function() {
      dfd.resolveWith(doc, [data, textStatus, jqXHR]);
      return $iframe.remove();
    });
    doc.open();
    doc.write(data);

    return doc.close();
  }).fail(dfd.reject);

  return dfd.promise();
};

Und rauchen Sie es mit: 

fetchDoc('/foo.html').done(function (data, textStatus, jqXHR) {
  alert($('title', this).text());
});

LIVE-DEMO (klicken Sie auf 'Run')

Wie wäre es mit schnellen Tag Umbenennung? 

$.ajax({
    type : "GET",
    url : 'results.html',
    dataType : "html",
    success: function(data) {

        data = data.replace(/html/g, "xhtmlx");
        data = data.replace(/head/g, "xheadx");
        data = data.replace(/title/g, "xtitlex");
        data = data.replace(/body/g, "xbodyx");

        alert($(data).find("xtitlex").text());
    }

});

Das funktioniert.Ich habe gerade aufgeteilt, die Bausteine für eine bessere Lesbarkeit.

Überprüfen Sie die Erklärung, und die inline-Kommentare zu begreifen, die Zusammenhänge dieser und warum es gemacht werden muss, wie diese.

Dies kann natürlich nicht verwendet werden, um cross-domain-Inhalte, für die Sie entweder als proxy für die Anrufe, die über ein Skript von dir denken oder über die integration so etwas wie flXHR (Cross-Domain-Ajax-Flash)

call.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>asd</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="xmlDoc.js" type="text/javascript"></script>
    <script src="output.js" type="text/javascript"></script>
    <script src="ready.js" type="text/javascript"></script>
  </head>
  <body>
    <div>
      <input type="button" id="getit" value="GetIt" />
    </div>
  </body>
</html>

jquery.js ist (jQuery 1.3.2 unkomprimiert) test.html ein gültiges XHTML-Dokument

xmlDoc.js

// helper function to create XMLDocument out of a string
jQuery.createXMLDocument = function( s ) {
  var xmlDoc;
  // is it a IE?
  if ( window.ActiveXObject ) {
    xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
    xmlDoc.async = "false";
    // prevent erros as IE tries to resolve the URL in the DOCTYPE
    xmlDoc.resolveExternals = false;
    xmlDoc.validateOnParse = false;
    xmlDoc.loadXML(s);
  } else {
    // non IE. give me DOMParser
    // theoretically this else branch should never be called
    // but just in case.
    xmlDoc = ( new DOMParser() ).parseFromString( s, "text/xml" );
  }
  return xmlDoc;
};

output.js

// Output the title of the loaded page
// And get the script-tags and output either the
// src attribute or code
function headerData(data) {
  // give me the head element
  var x = jQuery("head", data).eq(0);
  // output title
  alert(jQuery("title", x).eq(0).text());
  // for all scripttags which include a file out put src
  jQuery("script[src]", x).each(function(index) {
    alert((index+1)+" "+jQuery.attr(this, 'src'));
  });
  // for all scripttags which are inline javascript output code
  jQuery("script:not([src])", x).each(function(index) {
    alert(this.text);
  });
}

ready.js

$(document).ready(function() {
  $('#getit').click(function() {
    $.ajax({
      type : "GET",
      url : 'test.html',
      dataType : "xml",
      // overwrite content-type returned by server to ensure
      // the response getst treated as xml
      beforeSend: function(xhr) {
        // IE doesn't support this so check before using
        if (xhr.overrideMimeType) {
          xhr.overrideMimeType('text/xml');
        }
      },
      success: function(data) {
        headerData(data);
      },
      error : function(xhr, textStatus, errorThrown) {
        // if loading the response as xml failed try it manually
        // in theory this should only happen for IE
        // maybe some
        if (textStatus == 'parsererror') {
          var xmlDoc = jQuery.createXMLDocument(xhr.responseText);
          headerData(xmlDoc);
        } else {
          alert("Failed: " + textStatus + " " + errorThrown);
        }
      }
    });
  });
});

In Opera funktioniert das ganze ohne die createXMLDocument und die beforeSend Funktion.

Die zusätzliche Tricks nötig für Firefox (3.0.11) und IE6 (kann nicht testen, IE7, IE8, andere Browser), wie Sie haben ein problem, wenn das Content-Type: vom server zurückgegebene nicht darauf hin, dass es xml.Mein webserver zurückgegeben Content-Type: text/html; charset=UTF-8 für test.html. In diesen beiden Browsern jQuery genannt error Rückruf mit textStatus sagen parsererror.Denn in line 3706 in jQuery.js

data = xml ? xhr.responseXML : xhr.responseText;

data wird auf null gesetzt.Wie in FF und IE die xhr.responseXML null ist.Dies geschieht, weil Sie nicht bekommen, dass die zurückgegebenen xml-Daten (wie Opera hat).Und nur xhr.responseText eingestellt ist das ganze mit dem xhtml-code.Wenn Daten null-Linie 3708

if ( xml && data.documentElement.tagName == "parsererror" )

löst eine exception aus, die abgefangen in line 3584 und status parsererror.

In FF kann ich das problem lösen, indem Sie mithilfe der overrideMimeType() Funktion, bevor Sie senden die Anfrage.

Aber IE nicht unterstützen diese Funktion auf dem XMLHttpRequest-Objekt, so habe ich zum generieren der XMLDocument-selbst wenn die Fehler-callback ausgeführt und der Fehler ist parsererror.

Beispiel für test.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Plugins | jQuery Plugins</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">var imagePath = '/content/img/so/';</script>
  </head>
  <body>
  </body>
</html>

Schamlos kopiert und von einem anderen meiner Antworten angepasst ( Einfaches jQuery ajax-Beispiel nicht Elemente in HTML zurück ) zu finden, das ist der HTML-Code der Remote-Seite abruft, dann ist die parseHTML Funktion für sie ein temporäres div-Element schafft und setzt die Menge nach innen, durchläuft es und gibt das angeforderte Element. jQuery alarmiert dann den Text () im Inneren. 

$(document).ready(function(){
  $('input').click(function(){
    $.ajax({
      type : "POST",
      url : 'ajaxtestload.html',
      dataType : "html",
      success: function(data) {
        alert( data ); // shows whole dom
        var gotcha = parseHTML(data, 'TITLE'); // nodeName property returns uppercase
        if (gotcha) {
          alert($(gotcha).html()); // returns null
        }else{
          alert('Tag not found.');
        }
      },
      error : function() {
        alert("Sorry, The requested property could not be found.");
      }
    });
  });
});

function parseHTML(html, tagName) {
  var root = document.createElement("div");
  root.innerHTML = html;
  // Get all child nodes of root div
  var allChilds = root.childNodes;
  for (var i = 0; i < allChilds.length; i++) {
    if (allChilds[i].nodeName == tagName) {
      return allChilds[i];
    }
  }
  return false;
}

Um mehrere Elemente aus oder eine Liste von Script-Tags zu erhalten, sagen wir, ich glaube, Sie würden die parseHTML Funktion verbessern müssen, aber hey - proof of concept: -)

Wenn Sie den Wert von speziell benannten Feldern (das heißt die Eingaben in einer Form) so etwas wie diese finden würde, sie für Sie finden wollen: 

var fields = ["firstname","surname", ...."foo"];

function findFields(form, fields) {
  var form = $(form);
  fields.forEach(function(field) {
    var val = form.find("[name="+field+"]").val();
    ....

Wie wäre es damit: laden XML aus string 

$.get('yourpage.html',function(data){
    var content = $('<div/>').append(data).find('#yourelement').html();
});

Sie können auch einfach vorübergehend in einem div wickeln. Sie brauchen nicht einmal auf das DOM hinzuzufügen.

Nach dem XML-String in eine XML DOM Parsen, würde ich entweder jQuery direkt darauf verwenden (Sie können dies tun, indem Sie einen Kontext zu dem jQUery Wähler bereitstellt, wie $(':title', xdoc.rootElement) oder mit XPath (Arbeiten in Firefox, es gibt angeblich Bibliotheken für IE, aber ich habe nicht viel Erfolg mit ihnen hatte).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top