no me funciona en IE

[juanromerocruz]

Bueno, en principio, no se exactamente donde enviar este post, si a Ajax o a Javascript.

Como de costrumbre me da error este codigo en IE aunque en FF funciona perfectamente

Se trata de un lector de RSS que viene como ejerccio en un curso de Ajax y que estoy tratando de destripar para comprender su funcionamento.

El codigo HTML y JS es este:

Código:

<script type="text/javascript">

function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {

      req = false;
    }
  }
}
return req;
}


Object.prototype.get = function(etiqueta) {
  return this.getElementsByTagName(etiqueta)[0].textContent;
}
 
var rss = {
  canal: {},
  items: []
};
 
window.onload = function(){
  document.getElementById('mostrar').onclick = cargaRss;
}
 
function cargaRss(){


  // Obtener URL de RSS
  borrarLog();
 logg('Averiguar la URL del canal RSS');
 
  var url_original = document.getElementById('url').value;
  logg('URL original es ' + url_original);
  
  var url_rss = descubreRss(url_original);
  logg('La URL descubierta es ' + url_rss);
 
  // Descargar canal RSS
  logg('Descargando canal RSS');
  descargaRss(url_rss);
  
}
 
function descubreRss(url){
  //var peticion = getXMLHTTPRequest();
  peticion = new XMLHttpRequest();
  peticion.onreadystatechange = function(){};
  peticion.open('GET', 'descubreRss.php?url=' + encodeURIComponent(url), false);
  peticion.send(null);
  return peticion.responseText;
}
 
function descargaRss(url){
 // var peticion = getXMLHTTPRequest();
  peticion =new XMLHttpRequest();
  peticion.onreadystatechange = procesaRss;
  peticion.open('GET','temp/proxy.php?url=' + encodeURIComponent(url) + '&ct=text/xml', true);
  peticion.send(null);
 
  function procesaRss(){
 
    if (peticion.readyState == 4) {
	
      if (peticion.status == 200) {
	   
        var xml = peticion.responseXML;
 		
        var canal = xml.getElementsByTagName('channel')[0];
        var titulo = canal.getElementsByTagName('title')[0].textContent;
        rss.canal.titulo = titulo;
 
        if(canal.getElementsByTagName('image').length > 0) {
          var url_imagen = canal.getElementsByTagName('image')[0].getElementsByTagName('url')[0].textContent;
          rss.canal.titulo = '<img src="'+url_imagen+'" />'+rss.canal.titulo;
        }
 
        var enlace = canal.getElementsByTagName('link')[0].textContent;
        rss.canal.enlace = enlace;
 
        var items = xml.getElementsByTagName('item');
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
        var titulo = item.get('title');
          var enlace = item.getElementsByTagName('link')[0].textContent;
          var descripcion = item.getElementsByTagName('description')[0].textContent;
          var fecha = item.getElementsByTagName('pubDate')[0].textContent;

          rss.items[i] = {
            titulo: titulo,
            enlace: enlace,
            descripcion: descripcion,
            fecha: fecha
          };
        }
 
        muestraRss();
      }
    }
  }
}
 
function muestraRss(){
  document.getElementById('noticias').style.display = 'block';
  document.getElementById('titulares').innerHTML = '';
  document.getElementById('contenidos').innerHTML = '';
 
  document.getElementById('titulo').innerHTML = '<a href="' + rss.canal.enlace + '">' + rss.canal.titulo + '</a>';
 
  var titulares = document.getElementById('titulares');
 
  for (var i = 0; i < rss.items.length; i++) {
    titulares.innerHTML += '<a href="#" onclick="muestraElemento(' + i + ')">' + rss.items[i].titulo + '</a> <br/>';
  }
}
 
function muestraElemento(indice){
  var item = rss.items[indice];
  var html = "";
  html += "<h1><a href=\"" + item.enlace + "\">" + item.titulo + "</a></h1>";
  if (item.fecha != undefined) {
    html += "<h2>" + item.fecha + "</h2>";
  }
  html += "<p>" + item.descripcion + "</p>";
 
  document.getElementById("contenidos").innerHTML = html;
}
 
function logg(mensaje){
  document.getElementById('info').innerHTML += mensaje + "<br/>";
}
 
function borrarLog(){
  document.getElementById('info').innerHTML = "";
}
</script>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; }
form { margin: 0; }
#info { margin: 0; font-size: .7em; color: #777; }
#noticias { 
  position: absolute;
  width: 80%;
  margin-top: 1em;
  border: 2px solid #369;
  padding: 0;
  display: none;
}
#titulo { background-color: #DDE8F3; padding: .3em; border-bottom: 1px solid #369; }
#titulares { width: 20%; float: left; border: none; border-right: 1px solid #D9E5F2; }
#contenidos { margin-left: 22%; padding: 0px 20px; vertical-align: top; }
#titulo h2 { font-weight: bold; color: #00368F; font-size: 1.4em; margin: 0; }
#titulares ul { list-style: none; margin: 0; padding: 0; }
#titulares ul li { border-bottom: 1px solid #EDEDED; padding: 6px; line-height: 1.4em; }
#titulares a { display: block; font-size: 12px; color: #369; }
#titulares a:hover { text-decoration: none; color: #C00; }
#contenidos h1 { font-weight: bold; color: #00368F; font-size: 1.4em; padding: .2em; margin: .3em 0 0 0; }
#contenidos h2 { font-weight: bold; color: #888; font-size: .9em; padding: .2em; margin: .3em 0 0 0; }
#contenidos p { color: #222; font-size: 1.1em; padding: 4px; line-height: 1.5em; }
</style>
</head>
<body>
<form action="#">
  <input type="text" size="40" id="url" value="http://www.microsiervos.com" />
  <input type="button" value="Mostrar RSS" id="mostrar" />
  <div id="info"></div>
</form>
 
<div id="noticias">
  <div id="titulo"></div>
  <div id="titulares"></div>
  <div id="contenidos"></div>
</div>
</body>
</html>

Tiene ademas tres ficheros enlazados que son:

descubreRSS.php
simplepie.inc
proxy.php

Para no hacer excesivamente largo este post, no pego el texto de estos ficheros. Si fuense necesario, diganmelo y lo hare

El error lo da en la linea que he resaltado en rojo
y el texto que que entrega la consola dE IE es:

"El objeto no acepta esta propiedad o metodo"

Un saludo

[derkenuke]

Hola juanromerocruz:

Veo que hay implementada una función get() que no sé si funcionará.
¿Podrías probar a sustituir tu línea de rojo por código nativo? Quiero decir:

Código:

var titulo = item.get('title');

Por

Código:

item[i].getElementsByTagName('title')[0].textContent;

También tienes que tener en cuenta que item es un array, así que obligatoriamente tendrás que poner un índice a ese array ([i]) para poder hacer un getElementsByTagName() al objeto que esté dentro de ese array, ya que los arrays no disponen de ese método.

PD: Por lo que te he dicho quizá con poner item[i].get('title') funcione.



Saludos

[juanromerocruz]

Darte cuenta que en la linea anterior de

Código:

 var titulo = item.get('title');

tenemos un

Código:

var item = items[i];

dentro del for

He probado las dos soluciciones que me has dado y
sigue sin funcionar

[juanromerocruz]

He continuado investigando y he descubierto lo siguiente:

Llegado hasta esta linea, funciona tanto en FF como en IE

Código:

var canal = xml.getElementsByTagName('channel')[0];

en la siguiente sentencia:

Código:

 var titulo = canal.getElementsByTagName('title')[0].textContent;

FF reconoce "titulo" con contenido="Microsiervos" (el titulo RSS) pero FF te devuelve "indefined"

Desde mi ignorancia: ¿Acaso FF no reconoce textContent?
He googleado sobre esto y no he sacado nada claro

[derkenuke]

Iniciado por juanromerocruz

Darte cuenta que en la linea anterior de

Código:

 var titulo = item.get('title');

tenemos un

Código:

var item = items[i];

dentro del for

Lo siento, no me había fijado en eso...

Iniciado por juanromerocruz

FF reconoce "titulo" con contenido="Microsiervos" (el titulo RSS) pero FF te devuelve "indefined"

Supongo que has querido decir que IE te devuelve undefined.

Si buscas con google javascript+IE+textContent los tres primeros enlaces te revelan que en IE no existe textContent (algo que no tenía ni idea).

Como alternativa proponen innerHTML o innerText.

Mira a ver si así puedes seguir adelante.



Saludos!

[juanromerocruz]

EStoy a punto de tirar la toalla, y os puedo asegurar que seria la primera vez:

He probado el codigo con innerHTML y con innerText y nada, sigue dandome undefined.

He hecho una prueba con un codigo muy basico:

Código:

<body>
<div>primero</div>
<div>segundo</div>
<div>tercero</div>

<script type="text/javascript">
var contenidoDiv=document.getElementsByTagName('div')[0].innerHTML;
alert(contenidoDiv);
</script>
</body>

y me funciona en los dos navegadores FF IE.
devolviendome alert(contenidoDiv) el contenido del div=primero


El codigo reformado es:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejercicio 21 - RSS</title>
<script type="text/javascript">

function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {

      req = false;
    }
  }
}
return req;
}


Object.prototype.get = function(etiqueta) {
  return this.getElementsByTagName(etiqueta)[0].innerText;
}
 
var rss = {
  canal: {},
  items: []
};
 
window.onload = function(){
  document.getElementById('mostrar').onclick = cargaRss;
}
 
function cargaRss(){


  // Obtener URL de RSS
  borrarLog();
 logg('Averiguar la URL del canal RSS');
 
  var url_original = document.getElementById('url').value;
  logg('URL original es ' + url_original);
  
  var url_rss = descubreRss(url_original);
  logg('La URL descubierta es ' + url_rss);
 
  // Descargar canal RSS
  logg('Descargando canal RSS');
  descargaRss(url_rss);
  
}
 
function descubreRss(url){
  var peticion = getXMLHTTPRequest();
  //peticion =getXMLHTTPRequest();
  peticion.onreadystatechange = function(){};
  peticion.open('GET', 'descubreRss.php?url=' + encodeURIComponent(url), false);
  peticion.send(null);
  return peticion.responseText;
}
 
function descargaRss(url){
  var peticion = getXMLHTTPRequest();
  // peticion =getXMLHTTPRequest();
  peticion.onreadystatechange = procesaRss;
  peticion.open('GET','temp/proxy.php?url=' + encodeURIComponent(url) + '&ct=text/xml', true);
  peticion.send(null);
 
  function procesaRss(){
  
 
    if (peticion.readyState == 4) {
	
      if (peticion.status == 200) {
	   
        var xml = peticion.responseXML;
		
 		
        var canal = xml.getElementsByTagName('channel')[0];
			 	
       var titulo = canal.getElementsByTagName('title')[0].innerHTML;
	  
	
        rss.canal.titulo = titulo;
 
        if(canal.getElementsByTagName('image').length > 0) {
          var url_imagen = canal.getElementsByTagName('image')[0].getElementsByTagName('url')[0].innerHTML;
          rss.canal.titulo = '<img src="'+url_imagen+'" />'+rss.canal.titulo;
        }
 
        var enlace = canal.getElementsByTagName('link')[0].innerHTML;
        rss.canal.enlace = enlace;
 
        var items = xml.getElementsByTagName('item');
        for (var i = 0; i < items.length; i++) {
          var item = items[i];
          //var titulo = item.get('title');
		  var titulo = item.getElementsByTagName('title')[0].innerHTML;
		 // alert(titulo);
          var enlace = item.getElementsByTagName('link')[0].innerHTML;
          var descripcion = item.getElementsByTagName('description')[0].innerHTML;
          var fecha = item.getElementsByTagName('pubDate')[0].innerHTML;

          rss.items[i] = {
            titulo: titulo,
            enlace: enlace,
            descripcion: descripcion,
            fecha: fecha
          };
        }
 
        muestraRss();
      }
    }
  }
}
 
function muestraRss(){
  document.getElementById('noticias').style.display = 'block';
  document.getElementById('titulares').innerHTML = '';
  document.getElementById('contenidos').innerHTML = '';
 
  document.getElementById('titulo').innerHTML = '<a href="' + rss.canal.enlace + '">' + rss.canal.titulo + '</a>';
 
  var titulares = document.getElementById('titulares');
 
  for (var i = 0; i < rss.items.length; i++) {
    titulares.innerHTML += '<a href="#" onclick="muestraElemento(' + i + ')">' + rss.items[i].titulo + '</a> <br/>';
  }
}
 
function muestraElemento(indice){
  var item = rss.items[indice];
  var html = "";
  html += "<h1><a href=\"" + item.enlace + "\">" + item.titulo + "</a></h1>";
  if (item.fecha != undefined) {
    html += "<h2>" + item.fecha + "</h2>";
  }
  html += "<p>" + item.descripcion + "</p>";
 
  document.getElementById("contenidos").innerHTML = html;
}
 
function logg(mensaje){
  document.getElementById('info').innerHTML += mensaje + "<br/>";
}
 
function borrarLog(){
  document.getElementById('info').innerHTML = "";
}
</script>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; }
form { margin: 0; }
#info { margin: 0; font-size: .7em; color: #777; }
#noticias { 
  position: absolute;
  width: 80%;
  margin-top: 1em;
  border: 2px solid #369;
  padding: 0;
  display: none;
}
#titulo { background-color: #DDE8F3; padding: .3em; border-bottom: 1px solid #369; }
#titulares { width: 20%; float: left; border: none; border-right: 1px solid #D9E5F2; }
#contenidos { margin-left: 22%; padding: 0px 20px; vertical-align: top; }
#titulo h2 { font-weight: bold; color: #00368F; font-size: 1.4em; margin: 0; }
#titulares ul { list-style: none; margin: 0; padding: 0; }
#titulares ul li { border-bottom: 1px solid #EDEDED; padding: 6px; line-height: 1.4em; }
#titulares a { display: block; font-size: 12px; color: #369; }
#titulares a:hover { text-decoration: none; color: #C00; }
#contenidos h1 { font-weight: bold; color: #00368F; font-size: 1.4em; padding: .2em; margin: .3em 0 0 0; }
#contenidos h2 { font-weight: bold; color: #888; font-size: .9em; padding: .2em; margin: .3em 0 0 0; }
#contenidos p { color: #222; font-size: 1.1em; padding: 4px; line-height: 1.5em; }
</style>
</head>
<body>
<form action="#">
  <input type="text" size="40" id="url" value="http://www.microsiervos.com" />
  <input type="button" value="Mostrar RSS" id="mostrar" />
  <div id="info"></div>
</form>
 
<div id="noticias">
  <div id="titulo"></div>
  <div id="titulares"></div>
  <div id="contenidos"></div>
</div>
</body>
</html>

y he hecho varias pruebas:

Si insertamos un alert(canal); despues de

Código:

var canal = xml.getElementsByTagName('channel')[0];

y nos devuelve un objectElement tanto en FF como en IE

lo que quiere decir que hasta aqui tenemos un objeto del arbol DOM dentro del documento XML que nos devuelve

Si a continuacion ponemos otro alert(canal.getElementsByTagName('title')[0]);
nos vuelve a dar otro objectElement. Perdonar que sea tan meticuloso, pero es que quisiera saber que es lo que ocurre aqui.

Entonces no entiendo por que da indefinido al contenido cuando se le agrega el innerHTML y en el otro scrip de prueba funciona en las mismas circustancias creo. O no?

Una ayudita

[juanromerocruz]

una orientacion, por favor
Perdonen...

[venkman]

Estás recibiendo un XML. Un XML es un XML no es HTML. Luego es normal que un nodo de un documento de XML no tenga una propiedad innerHTML. Un documento HTML (como en el ejemplo que pones) sí la tiene pero tu respuesta no es HTML.

[derkenuke]

Hola de nuevo:

No he entendido muy bien a venkman, pero podrías probar nodeValue o innerText... se me acaban las opciones, debería haber funcionado innerHTML tal y como dicen por ahí.

Para averiguar las propiedades que funcionan y te devuelven lo que quieres:

Código PHP:

  var objeto = canal.getElementsByTagName('title')[0];
for( var i in objeto )
   alert("La propiedad "+i+" tiene como valor "+objeto[i]);  
   

Te recomiendo que lo hagas con document.write() en vez de con alert(), no sé cuántas propiedades puede tener pero me temo que muchísimas.


Saludos.

[venkman]

Lo que pretendía decir es que la respuesta que está recibiendo no es un documento HTML.

Hace una petición que recibe text/xml y que por tanto se trata como XML. No sé si sabréis la diferencia entre un documento HTML y un documento XML, pero no son lo mismo, y su Document Object Model tampoco es igual.


Lo que recibe es un documento XML como:

Código:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>programming: que hay de nuevo en línea</title>
    <link>http://taltal/</link>
    <description></description>
    <item>
      <title>Symbian will go open source</title>
...

Eso tiene un DOM, pero ese DOM no es el mismo que el de un documento HTML. En concreto, los nodos no tienen ninguna propiedad llamada innerHTML.

Si quieres ver más sobre el XML DOM.

Para acceder, en este caso, al valor entre <title>blablabla</title> usa .childNodes[0] para acceder al nodo de texto y luego .nodeValue para obtener el valor.

Código:

var titulo = canal.getElementsByTagName('title')[0].childNodes[0].nodeValue;

[juanromerocruz]

Iniciado por venkman

Lo que pretendía decir es que la respuesta que está recibiendo no es un documento HTML.

Hace una petición que recibe text/xml y que por tanto se trata como XML. No sé si sabréis la diferencia entre un documento HTML y un documento XML, pero no son lo mismo, y su Document Object Model tampoco es igual.


Lo que recibe es un documento XML como:

Código:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>programming: que hay de nuevo en línea</title>
    <link>http://taltal/</link>
    <description></description>
    <item>
      <title>Symbian will go open source</title>
...

Eso tiene un DOM, pero ese DOM no es el mismo que el de un documento HTML. En concreto, los nodos no tienen ninguna propiedad llamada innerHTML.

Si quieres ver más sobre el XML DOM.

Para acceder, en este caso, al valor entre <title>blablabla</title> usa .childNodes[0] para acceder al nodo de texto y luego .nodeValue para obtener el valor.

Código:

var titulo = canal.getElementsByTagName('title')[0].childNodes[0].nodeValue;

Efectivamente eso es lo que le pasaba, hechos los cambios oportunos funciona perfectamente en los dos navegadores.

Bien solo me que da una duda:

Este codigo hace uso de de un metodo que se le agrega a Object por medio de prototype

Código:

Object.prototype.get = function(etiqueta) {
  return this.getElementsByTagName(etiqueta)[0].childNodes[0].nodeValue;

pues bien, haciendo uso de este metodo, el script no funciona en IE y sí en FF.
para que funcione en los dos tengo que poner el codigo nativo. o sea

Código:

 var titulo = item.getElementsByTagName('title')[0].childNodes[0].nodeValue;

Acaso no funciona prototype con IE?

[venkman]

No te lo puedo decir con seguridad, pero dado que en IE el XHR y demás se hacen a través de un objeto ActiveX, no me extrañaría que IE mantuviera diferente contexto para el DOM que construye con el objeto ActiveX y por eso el Object del que parte no es el mismo.