Contenido dinámico con Javascript sin AJAX

Queremos generar contenido dinámico en una web, pero deseamos que esta vez sea el usuario el que, insertando un pequeño fragmento en HTML, pueda incluir ese contenido en cualquier página web. La idea original era usar un IFRAME, pero esto trae diferentes problemas (el menor de los cuales no son las poco estéticas barras de desplazamiento) Otra posibilidad es usar AJAX, pero eso obligaría al usuario a incluir las poco ligeras librerías de Prototype en su web.

<p>Al final, optaremos por la solución más sencilla: incrustar el contenido en la web usando las etiquetas <code>&lt;SCRIPT ...&gt;&lt;/SCRIPT&gt;</code> y generar el contenido enviando sentencias <code>document.writeln</code> desde una plantilla <span class="caps">RJS</span>.</p>


<p>Nuestra prueba de concepto será hacer una pequeña aplicación Rails que cuando se la invoque con el mecanismo anterior, devuelva una de las célebres <a href="http://www.escolar.net/MT/archives/000069.html">estrategias oblícuas</a> de <a href="http://es.wikipedia.org/wiki/Brian_Eno">Brian Eno</a></p>

        <!--more-->

        <h3>La aplicación completa</h3>


<p>Nuestro controlador será</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

class EstrategiaController < ApplicationController

def index
  @estrategias = [
    "Remove specifics and convert to ambiguities",
        (...)
    "The tape is now the music"
    ]

  len = @estrategias.length
  @estrategia = @estrategias[rand(len)]
end

end

Por último, la vista .rjs será:

1
2
3

page << "document.writeln('<span class=\"eno_estrategia\">')";
page << "document.writeln(\'#{@estrategia}\')";
page << "document.writeln('</span>');"

La magia la hace el operador <<, que inyecta directamente la cadena que se le pasa en el bloque que luego se devuelve al navegador.

Podeis comprobar cómo invocar a esta pequeña aplicación creando un fichero .HTML e insertando el siguiente fragmento

1
2

<div>Eno dice: «<script type="text/javascript" src="http://estrategias.sobrerailes.com/estrategia"></script>»
</div>