jQuery .find()不会在IE中返回数据,但会在Firefox和Chrome中返回数据

2021/01/25 17:11 · jquery ·  · 0评论

我通过为他做一些网络工作来帮助一个朋友。他需要的一部分是在他的站点上更改几段文字的简便方法。与其让他编辑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]索引到数组中或无法检查它的长度,所以我猜想这意味着.find不是返回任何结果。有什么理由可以在Firefox和Chrome中完美运行,但在IE中失败?

我是jQuery的新手,所以我希望我还没有做一些愚蠢的事情。上面的代码已从论坛中删除,并进行了修改以满足我的需要。由于jQuery是跨平台的,所以我认为我不必处理这种混乱。

编辑:我发现,如果我在Visual Studio 2008中加载页面并运行它,那么它将在IE中工作。因此事实证明,在开发Web服务器中运行时,它始终有效。现在,我认为IE只是不喜欢从本地驱动器中加载XML格式的.find文件,所以也许当它在实际的Web服务器上运行时就可以了。

我已经确认从网络服务器浏览时可以正常工作。必须是IE的特殊功能。我猜这是因为Web服务器为xml数据文件传输设置了mime类型,而没有IE则无法正确解析xml。

检查响应的内容类型。如果您将message.xml设置为错误的mime类型,则Internet Explorer不会将其解析为XML。

要检查内容类型,您需要访问XMLHttpRequest对象。正常的成功回调不会将其作为参数传递,因此您需要添加通用的ajaxComplete或ajaxSuccess事件处理程序。这些事件的第二个参数是XMLHttpRequest对象。您可以对其调用getResponseHeader方法以获取内容类型。

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

不幸的是,我在Internet Explorer中没有办法覆盖服务器发送的内容,因此,如果错误,则需要更改服务器以发送“ text / xml”作为内容类型。

某些浏览器提供了overrideMimeType一种可以send强制使用“ text / xml”的方法,但是据我所知,Internet Explorer不支持该方法。

由于IE的问题是它的xml解析器扼杀了未使用正确的“ text / xml”标头传递的xml文件,因此您可以在Ajax complete事件中包含一些代码

    完成:功能(xhr,状态)
    {
      alert(“完成。您得到:\ n \ n” + xhr.responseText);
      if(status =='parsererror')
      {
        alert(“出现了PARSERERROR。幸运的是,我们知道如何解决这个问题。\ n \ n” +
               “完整的服务器响应文本为” + xhr.responseText);

        xmlDoc = null;

        //从responseText字符串创建xml文档。
        //这使用w3schools方法。
        //另请参见
        如果(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>完整事件/状态:'+状态+'</ p>');

        processXMLDoc(xmlDoc);
      }
    },

这是一个更完整的例子

<!DOCTYPE html>
<html>
<头>
<title>使用jQuery读取XML </ title>
<样式>
#响应
{
  边框:纯色1px黑色;
  填充:5px;
}
</ style>
<script src =“ jquery-1.3.2.min.js”> </ script>
<脚本>
函数processXMLDoc(xmlDoc)
{
  var heading = $(xmlDoc).find('heading')。text();
  $('#response').append('<h1>'+标题+'</ h1>');

  var bodyText = $(xmlDoc).find('body')。text();
  $('#response').append('<p>'+ bodyText +'</ p>');
}
$ {document).ready(function()
{
  jQuery.ajax({

    类型:“ GET”,

    网址:“ a.xml”,//!当心一样
    //起源类型问题

    dataType:“ xml”,//'xml'通过浏览​​器的xml解析器传递它

    成功:功能(xmlDoc,状态)
    {
      // SUCCESS EVENT表示xml文档
      //从服务器上下来并成功解析
      //使用浏览器自己的xml解析上限。

      processXMLDoc(xmlDoc);

      //当IE变得非常沮丧
      //该文件的mime类型
      //传下来的不是text / xml。

      //如果缺少text / xml标头
      //显然xml解析失败,
      //并且在IE中,您根本无法执行此功能。

    },
    完成:功能(xhr,状态)
    {
      alert(“完成。您得到:\ n \ n” + xhr.responseText);
      if(status =='parsererror')
      {
        alert(“出现了PARSERERROR。幸运的是,我们知道如何解决这个问题。\ n \ n” +
               “完整的服务器响应文本为” + xhr.responseText);

        xmlDoc = null;

        //从responseText字符串创建xml文档。
        //这使用w3schools方法。
        //另请参见
        如果(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>完整事件/状态:'+状态+'</ p>');

        processXMLDoc(xmlDoc);
      }
    },
    错误:功能(xhr,状态,错误)
    {
      alert('ERROR:'+ status);
      alert(xhr.responseText);
    }
  });
});
</ script>
</ head>
<身体>
  <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引用</a>
    </ p>

  </ div>

  <p>服务器说:</ p>
  <pre id =“ response”>

  </ pre>
</ body>
</ html>

a.xml的内容

<?xml version =“ 1.0”?>
<注意>
  <to> Tove </ to>
  <from> Jani </ from>
  <heading>提醒</ heading>
  <body>这个周末别忘了我!</ body>
</ note>

它扩展了这个示例

dataType:“ xml”不能解决IE8中的此问题,而是通过“ TypeError”期望来解决。

快速与肮脏的解决方法是将xml响应包装在html元素中,例如div:

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

(适用于所有浏览器)

您可能会发现,如果将数据类型传递到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(......);

我也遇到了同样的问题,但是我使用下面的代码修复了IE jQuery XML .find()问题。

注意:使用.text()而不是.html()。

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

你可以做

<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

有时IE会将换行符读取为额外的节点。尝试删除标记之前的多余空白,或尝试将其包装为CDATA。

当我从XML文档中检索数据时遇到了同样的问题。在Internet上搜索了很多之后,我才找到这个网站,但没有对该问题的正确答案。但是,有一个答案可以帮助我解决问题:

“由于IE的问题是它的xml解析器在未使用正确的“ text / xml”标头传递的xml文件上阻塞,因此您可以在Ajax complete事件中包含一些代码:“

在进行$ .ajax(...)和$ .get(...)调用时,我发现了IE的两个问题:

  1. 两次调用xml参数值都必须为大写(“ XML”而不是“ xml”)-$ .ajax(...,dataType:“ XML”)和$ .get(xmlDataFilePath,function(d){.。 。},“ xml”)

  2. 当ajax调用成功时, 回调函数的xml参数实际上是一个字符串,而不是XML DOM对象

第二个问题通过这种方式解决:

$(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
$.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'
});

尝试告诉jQuery它获得什么dataType,以便它使用正确的方法来处理您的请求。

更改以下内容。

dataType :"text/xml",

dataType :"xml",

无需更改find​​()。

导入电子邮件联系人时,我也遇到了同样的问题。我可以导入联系人并在除IE之外的所有浏览器中显示,因为.find()它无法正常工作。

因此,我分配"text/xml"response.contentType

response.contentType = "text/xml",它的工作。

之前是 "text/html"

我遇到了同样的问题,我正在开发一个基于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... 
   }
 });

我也有同样的问题...

解决:

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对象...

运行正常!!!尝试这个,

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; 

}

如果XML是由PHP脚本生成的,则可以执行

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

然后find方法可在所有浏览器上使用

本文地址:http://jquery.askforanswer.com/jquery-findbuhuizaiiezhongfanhuishujudanhuizaifirefoxhechromezhongfanhuishuju.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!