Creación de un widgets para buscar palabras en la RAE (Real Academia Española )

Posted on 25 Septiembre 2009, 5:27, by Webmaster, under General, JavaScript.

En igoogle podemos utilizar un widgets llamado “Buscón R.A.E” que permite buscar palabras en la R.A.E ( Real Academia Española ).

Este widgets me pareció útil y decidí crear uno para poder utilizarlo en mis proyectos. A continuación os dejo un ejemplo real funcionando, para que podáis ver como es.

Ejemplo real

Esta realizado con javascript y utiliza un iframe para mostrar los resultados. Estos resultados son simplemente una página que devuelve la R.A.E con el significado de la palabra deseada.

El iframe se crea con un ancho del 100% para que se adapte a cualquier lugar donde se inserte. Evidentemente, cada uno puede cambiar las propiedades del iframe, para adaptarlas a sus necesidades.

La única propiedad que no debemos modificar es SRC, porque si cambiamos esta, no obtendremos resultados de búsqueda.

Para terminar dejo el código de este widgets para que podáis insertarlo en vuestra web, blog, …

JavaScript:

 /**
             * Esta funcion busca una palabra en la RAE (www.rae.es)
             *
             * @palabra: la palabra que deseamos buscar.
             * @div: elemento div del documento html donde queremos crear
             * el ifram con el resultado de la busqueda.
             */
            function buscar(palabra, div)
            {
                //codificar la palabra por si lleva acentos
                palabra = encodeURI(palabra);
 
                //Generar url a la que debemos llamar para obtener
                //el resultado de buscar dicha palabra en la RAE
                var url;
 
                    url = "http://buscon.rae.es/draeI/SrvltGUIBusUsual?";
                    url = url + "LEMA=" + palabra + "&origen=RAE&TIPO_BUS=3";
 
               //Generar iframe con la página de la RAE
               var iframe;
 
                    iframe = document.createElement("iframe");
 
                    //Añadir atributos al iframe creado
                    iframe.setAttribute("scroll", "auto");
                    iframe.setAttribute("frameborder", "0");
                    iframe.setAttribute("width", "100%");
                    iframe.setAttribute("height", "300px");
                    iframe.setAttribute("src", url);
 
               //Limpiar el contenido de result
              limpiarDiv(div);
 
               //Guardar el iframe creado dentro del div indicado
               var result;
 
                       result = document.getElementById(div);              
 
                    //Añadir al div el iframe con los resultados
                    result.appendChild(iframe);
            }
 
            /**
             * Limpiar (eliminar) todos los elementos que contenga
             * el div.
             *
             * @id: identificador del elemento div.
             */
            function limpiarDiv(id)
            {
                var div;
 
                    div = document.getElementById(id);
 
                    while(div.hasChildNodes())
                    {
                        div.removeChild(div.lastChild);
                    }
            }

Html:

<!--
            Buscar con Javascript en la web de la RAE
            www.rae.es
        -->
        <p>
            Buscar: &nbsp;
            <input type="text" id="palabra" /> &nbsp;
                <a href="#"
                   onclick="buscar(document.getElementById('palabra').value,
                                   'resultado');"> buscar </a>
        </p>
        <p>
            <div id="resultado"></div>
        </p>

Share and Enjoy: