web-dev-qa-db-ja.com

jQuery .find（）はIEではデータを返しませんが、FirefoxおよびChromeでは返します

私は友人のためにちょっとしたWeb作業をすることで友人を助けました。彼が必要としたことの一部は、自分のサイトのいくつかのテキストを変更する簡単な方法でした。彼にHTMLを編集させるのではなく、メッセージを含むXMLファイルを提供することにし、jQueryを使用してそれらをファイルから取り出し、ページに挿入しました。

それは素晴らしい働きをします... FirefoxとChromeではIE7ではそれほど素晴らしいことではありません。あなたの一人が理由を教えてくれることを望んでいました。私は公平に行ったがグーグルでしたが、探しているものが見つかりませんでした。

ここにXMLがあります：

<?xml version="1.0" encoding="utf-8" ?>
<messages>
  <message type="HeaderMessage">
    This message is put up in the header area.
  </message>
  <message type="FooterMessage">
    This message is put in the lower left cell.
  </message>
</messages>

そして、これが私のjQuery呼び出しです。

<script type="text/javascript">
  $(document).ready(function() {
    $.get('messages.xml', function(d) {
      //I have confirmed that it gets to here in IE
      //and it has the xml loaded.
      //alert(d); gives me a message box with the xml text in it
      //alert($(d).find('message')); gives me "[object Object]"
      //alert($(d).find('message')[0]); gives me "undefined"
      //alert($(d).find('message').Length); gives me "undefined"
      $(d).find('message').each(function() {
        //But it never gets to here in IE
        var $msg = $(this);
        var type = $msg.attr("type");
        var message = $msg.text();
        switch (type) {
        case "HeaderMessage":
          $("#HeaderMessageDiv").html(message);
          break;
        case "FooterMessage":
          $("#footermessagecell").html(message);
          break;
          default:
        }
      });
    });
  });
</script>

IEで別の方法を実行する必要がありますか？ [object Object]のメッセージボックスに基づいて、.findがIEで動作していたと想定していますが、[0]で配列にインデックスを付けることも、長さを確認することもできないため、 m .findが結果を返さないことを意味すると思います。FirefoxとChromeで完全に機能するが、IEで失敗する理由は何ですか？

私はjQueryの初心者なので、愚かなことをしていないことを願っています。上記のコードはフォーラムからスクレイピングされ、私のニーズに合わせて変更されました。 jQueryはクロスプラットフォームなので、この混乱に対処する必要はないと考えました。

編集：Visual Studio 2008でページを読み込んで実行すると、IEで動作することがわかりました。したがって、開発用Webサーバーを介して実行すると、常に機能することがわかります。 IEは、ローカルドライブからロードされたXMLで.findを実行するのが好きではないので、これが実際のWebサーバー上にある場合は問題なく動作するでしょう。

Webサーバーから閲覧した場合、正常に動作することを確認しました。 IEの特殊性である必要があります。 Webサーバーがxmlデータファイル転送のMIMEタイプを設定し、それがないとIEはxmlを正しく解析しないためだと思います。

javascriptjqueryxml
23
Steve Hiner

応答のコンテンツタイプを確認してください。 messages.xmlを間違ったMIMEタイプとして取得した場合、Internet ExplorerはそれをXMLとして解析しません。

コンテンツタイプを確認するには、XMLHttpRequestオブジェクトにアクセスする必要があります。通常の成功コールバックはそれをパラメーターとして渡さないので、一般的なajaxCompleteまたはajaxSuccessイベントハンドラーを追加する必要があります。これらのイベントの2番目のパラメーターは、XMLHttpRequestオブジェクトです。その上でgetResponseHeaderメソッドを呼び出して、コンテンツタイプを取得できます。

$(document).ajaxComplete(function(e, x) {
    alert(x.getResponseHeader("Content-Type"));
});

残念ながら、Internet Explorerでサーバーが送信する内容を上書きする方法を知っているわけではないため、間違っている場合は、サーバーを変更してコンテンツタイプの「text/xml」を送信する必要があります。

一部のブラウザーには、overrideMimeTypeの前に呼び出すことができるsendメソッドがあり、「text/xml」を使用するように強制できますが、Internet Explorerは、私の知る限りこれをサポートしていません。

12
Matthew Crumley

IEの問題は、正しい「text/xml」ヘッダーを使用して渡されないxmlファイルでのxmlパーサーのチョークであるため、ビットコードを Ajax完了 イベント：

 complete：function（xhr、status）
 {
 alert（ "COMPLETE。You got：\ n\n" + xhr.responseText）; 
 if（ status == 'parsererror'）
 {
 alert（ "PARSERERRORがありました。幸い、それを修正する方法を知っています。\ n\n" + 
 "サーバー全体応答テキストは "+ xhr.responseText）; 
 
 xmlDoc = null; 
 
 // responseText文字列からxmlドキュメントを作成します。
 //これは w3schools メソッドを使用します。
 //  次も参照  
 if（window.DOMParser）
 {
 parser = new DOMParser（）; 
 xmlDoc = parser.parseFromString（xhr.responseText、 "text/xml"）; 
} 
 else // Internet Explorer 
 {
 xmlDoc = new ActiveXObject（ "Microsoft.XMLDOM"）; 
 xmlDoc.async = "false"; 
 xmlDoc.loadXML（xhr.responseText）; 
} 
 
 $（ '#response'）.append（ '<p> complete event/xmlDoc：' + xmlDoc + '</ p>'）; 
 $（ '＃ response '）.append（' <p> complete event/status： '+ status +' </ p> '）; 
 
 processXMLDoc（xmlDoc）; 
} 
}、

これはより完全な例です

 <！DOCTYPE html> 
 <html> 
 <head> 
 <title> jQueryでXMLを読み取る</ title> 
 <style> 
＃response 
 {
ボーダー：1px黒塗り; 
パディング：5px; 
} 
 </ style> 
 <script src = "jquery-1.3.2.min.js"> </ script> 
 <script> 
 function processXMLDoc（xmlDoc）
 {
 var heading = $（xmlDoc）.find（ 'heading'）。text（）; 
 $（ '#response'）.append（ '<h1>' + heading + '</ h1>' ）; 
 
 var bodyText = $（xmlDoc）.find（ 'body'）。text（）; 
 $（ '#response'）.append（ '<p> '+ bodyText +' </ p> '）; 
} 
 $（document）.ready（function（）
 {
 jQuery.ajax（{
 
 type： "GET"、
 
 url： "a.xml"、//！同じものに注意
 //  元のタイプの問題  
 
 dataType： "xml"、// 'xml'はブラウザのxmlパーサーにそれを渡します
 
成功：function（xmlDoc 、status）
 {
 //成功イベントは、 e xml document 
 //サーバーからダウンし、正常に解析されました
 //ブラウザ独自のxml解析キャップを使用します。
 
 processXMLDoc（xmlDoc）; 
 
 // IEは非常に動揺します
 //ドキュメントのMIMEタイプ
 //受け渡されますis/n't text/xml。
 
 // text/xmlヘッダーがない場合
 //どうやらxml解析は失敗します。
 //そしてIEこの関数を実行することはできませんAT ALL。
 
}、
 complete： function（xhr、status）
 {
 alert（ "完了しました。取得しました：\ n\n "+ xhr.responseText）; 
 if（status == 'parsererror'）
 {
 alert（" PARSERERRORがありました。幸いにも、それを修正する方法を知っています。\ n\n "+ 
"完全なサーバー応答テキストは "+ xhr.responseText）; 
 
 xmlDoc = null; 
 
 // responseText文字列からxmlドキュメントを作成します。
 //これは w3schools メソッドを使用します。
 //  も参照  
 if（window.DOMParser）
 {
 parser = new DOMParser（）; 
 xmlDoc = parser.parseFromString（xhr.responseText、 "text/xml "）; 
} 
 else // Internet Explorer 
 {
 xmlDoc = new ActiveXObject（" Microsoft.XMLDOM "）; 
 xmlDoc.async = "false"; 
 xmlDoc.loadXML（xhr.responseText）; 
} 
 
 $（ '#response'）.append（ '<p> complete event/xmlDoc： '+ xmlDoc +' </p> '）; 
 $（' #response '）.append（' <p> complete event/status： '+ status +' </ p> '）; 
 
 processXMLDoc（xmlDoc）; 
} 
}、
 error：function（xhr、status、error）
 {
 alert（ 'ERROR ： '+ status）; 
 alert（xhr.responseText）; 
} 
}）; 
}）; 
 </ script> 
 </ head> 
 <body> 
 <div> 
 <h1> <a href = "http://think2loud.com/reading-xml-with -jquery/"> jQueryを使用したXMLの読み取り</a> </ h1> 
 <p> 
 <a href =" http://docs.jquery.com/Ajax/jQuery.ajax #options ">＃1 jQuery.ajax ref </a> 
 </ p> 
 
 </ div> 
 
 <p>サーバーは言う：</ p> 
 <pre id = "response"> 
 
 </ pre> 
 </ body> 
 </ html>

a.xmlの内容

 <？xml version = "1.0"？> 
 <note> 
 <to>移動</ to> 
 <from> Jani </ from> 
 <heading>リマインダー</ heading> 
 <body>今週末は忘れないでください！</ body> 
 </ note>

この例 を拡張します。

19
bobobobo

DataType： "xml"はIE8のこの問題を修正しませんが、 "TypeError"の期待に応えます。

素早い汚い修正は、divのようにxml応答をhtml要素でラップすることです：

$("<div>" + xml + "</div>").find("something");

（すべてのブラウザで動作します）

6
McMadsen

データ型をget呼び出しに渡すと、XMLとして適切に解析される場合があります。 IEの癖により、jQueryがそれをXMLとして自動検出するのを停止し、誤ったデータ型がコールバック関数に渡される可能性があります。

<script type="text/javascript">
      $(document).ready(function() {
        $.get('messages.xml', function(d) {
          //I have confirmed that it gets to here in IE
          //and it has the xml loaded.
          //alert(d); gives me a message box with the xml text in it
          //alert($(d).find('message')); gives me "[object Object]"
          //alert($(d).find('message')[0]); gives me "undefined"
          //alert($(d).find('message').Length); gives me "undefined"
          $(d).find('message').each(function() {
            //But it never gets to here in IE
            var $msg = $(this);
            var type = $msg.attr("type");
            var message = $msg.text();
            switch (type) {
            case "HeaderMessage":
              $("#HeaderMessageDiv").html(message);
              break;
            case "FooterMessage":
              $("#footermessagecell").html(message);
              break;
              default:
            }
          });
        }, "xml");
      });
</script>

編集：

私は実際にはどのブラウザーでもプロジェクトで機能しない.find（）を経験しましたが、代わりに.filter（）を使用することができました。私がこれに頼らなければならなかったのは面倒ですが、それがうまくいくなら...

$(d).filter('message').each(......);
5
MJJames

私も同じ問題を抱えていましたが、以下のコードを使用してIE jQuery XML .find（）の問題を修正しました。

注：.html（）の代わりに.text（）を使用してください。

jQuery.ajax({
 type: "GET",
        url: "textxml.php",
        success: function(msg){             
            data = parseXml(msg);
            //alert(data);
            var final_price = jQuery(data).find("price1").text();
            alert(final_price); 
            }
    });     

function parseXml(xml) {
     if (jQuery.browser.msie) {
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
        xmlDoc.loadXML(xml);
        xml = xmlDoc;
    }   
    return xml;
}
3
sanjeev

できるよ

<a>
<messages>
  <message type="HeaderMessage">
    This message is put up in the header area.
  </message>
  <message type="FooterMessage">
    This message is put in the lower left cell.
  </message>
</messages>
</a>

そしてfind（）を使用します。 IE8とFirefox v.3.6.3で動作します

3
Guest

XML文書からデータを取得するときにも同じ問題が発生しました。インターネットでたくさんググった後、私はこのウェブサイトを見つけましたが、問題に対する適切な答えがありませんでした。しかし、1つの回答が問題の解決に役立ちました。

「IEの問題は、正しい「text/xml」ヘッダーを使用して渡されないxmlファイルのxmlパーサーチョークであるため、Ajax完了イベントにコードのビットを含めることができます。」

$ .ajax（...）と$ .get（...）を呼び出すときのIEに関する2つの問題を特定しました：

  1. xmlパラメーター値は、両方の呼び出しで大文字にする必要があります（ 'XML'ではなく 'XML'）-$ .ajax（...、dataType： "XML"）および$。get（xmlDataFilePath、function（d）{...}、 "xml"）

  2. Ajax呼び出しが成功すると、コールバック関数のxml引数は、実際にはstringXML DOMオブジェクトではありません

2番目の問題はこの方法で解決されます。

$(document).ready(function()
{
    $.ajax(
    { 
        type: "GET",
        url: "messages.xml", 
        dataType: "XML", /* this parameter MUST BE UPPER CASE for it to work in IE */
        success: function(xml)
        { 
            processXmlDoc( createXmlDOMObject ( xml ) );
        }, /* success: */
        error: function(xhr, textStatus, errorThrown)
        { 
            alert(textStatus + ' ' + errorThrown);
        } /* error: */
    });/* $.ajax */

    function createXmlDOMObject(xmlString)
    {
        var xmlDoc = null;

        if( ! window.DOMParser )
        {
            // the xml string cannot be directly manipulated by browsers 
            // such as Internet Explorer because they rely on an external 
            // DOM parsing framework...
            // create and load an XML document object through the DOM 
            // ActiveXObject that it can deal with
            xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
            xmlDoc.async = false;
            xmlDoc.loadXML( xmlString );
        }
        else
        {
            // the current browser is capable of creating its own DOM parser
            parser = new DOMParser();
            xmlDoc = parser.parseFromString( xmlString, "text/xml" ) ;
        }

        return xmlDoc;
    }

    function processXmlDoc(xmlDoc)
    {
        // write here your XML processing logic for the document object...
    } 
}); // $(document).ready
1
Bigabdoul

メールの連絡先のインポート中にも同じ問題が発生しました。 .find()が機能していなかったため、IE以外のすべてのブラウザーで連絡先をインポートして表示できました。

だから、私は"text/xml"からresponse.contentType。

つまり、response.contentType = "text/xml"そしてそれは働いた。

以前は"text/html"

1
Wasim
$.ajax({
  url: 'messages.xml',
  success: function(data){
     $(d).find('message').each(function(){
        //But it never gets to here in IE
        var $msg = $(this);
        var type = $msg.attr("type");
        var message = $msg.text();
        switch (type) {
          case "HeaderMessage":
             $("#HeaderMessageDiv").html(message);
          break;
          case "FooterMessage":
             $("#footermessagecell").html(message);
          break;
        }
      });
  },
  dataType: 'xml'
});

正しいメソッドを使用してリクエストを処理できるように、取得するdataTypeをjQueryに伝えてみてください。

1
RobertPitt

IEは改行を余分なノードとして読み取ることがあります。タグまでの余分な空白を削除するか、CDATAとして囲んでみてください。

1
jacobangel

以下の内容を変更してください。

dataType :"text/xml",

に

dataType :"xml",

Find（）を変更する必要はありません。

1
Rahul Vaidya

XMLがPHPスクリプトによって生成される場合

<?php
    header("Content-type: text/xml");
    echo '<myxml></myxml>';
?>

次に、すべてのブラウザでfindメソッドが機能します

0
christophe

私は同じ問題を抱えています...

これで解決：

http://www.w3schools.com/dom/dom_parser.asp

if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text); 
  }

これを使用して、varをxmlオブジェクトに変換します...

0
stevensf

問題なく動作しています!!!これを試してください

Chrome/Firefox：

xml.children[0].childNodes[1].innerHTML;

IE8 +/Safari：

xml.childNodes[0].childNodes[1].textContent;

IE8：

xml.documentElement.childNodes[1].text;

ここにサンプルコード、

var xml = $.parseXML(XMLDOC); 

Var xmlNodeValue = ""; 

if(userAgent.match("msie 8.0")){

xmlNodeValue = xml.children[0].childNodes[1].innerHTML;

}else{ // IE8+

xmlNodeValue = xml.childNodes[0].childNodes[1].textContent; 

}
0
Muthu Selvam

同じ問題がありました。Webベースのアプリケーションを開発していますが、オフラインでCD内にデプロイするために必要です。このページで、上記の解決策と同じ解決策を見つけました http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests で、コードは非常に簡単です。

 $.ajax({
   url: "data.xml",
   dataType: ($.browser.msie) ? "text" : "xml",
   success: function(data){
     var xml;
     if (typeof data == "string") {
       xml = new ActiveXObject("Microsoft.XMLDOM");
       xml.async = false;
       xml.loadXML(data);
     } else {
       xml = data;
     }
     // write here your XML processing logic for the document object... 
   }
 });
0
prof. Xavier