JQuery Cross-Domain .load () (widget de autoconstrucción)

Estoy creando un widget para que la gente lo use en sus sitios web, sin embargo, para mantener el widget a prueba de futuro, quiero que se construya por sí mismo usando un javascript externo.

Entonces, el código del widget que le pediría a la gente que pusiera en sus sitios web sería algo como:

mywidget.js luego usaría .load() jquery para rellenar el #my_widget div con un iframe.

El problema es que esto no funciona …

¿que necesito hacer?

(tenga en cuenta que no quiero tener el iframe en el código que le doy a mis clientes)

Depende de la URL que esté especificando en la función de load . Si esta URL no está alojada en el mismo dominio que ejecuta la página que contiene este script, no funcionará debido a la misma restricción de la política de origen . Una posible solución para realizar llamadas ajax entre dominios es usar JSON-P si tiene control sobre el script del lado del servidor que se usa en la función de load .

Aquí está la idea detrás de JSON-P:

  1. Proporciona un script del lado del servidor alojado en el dominio A que devolverá una respuesta con formato JSONP. El dominio A es tu dominio para el que tienes control total.
  2. Este script del lado del servidor se puede llamar desde el dominio B utilizando AJAX.

Supongamos que http://domainA.com/myscript?jsoncallback=foo devuelve la siguiente respuesta:

 foo({ result: 'Hello World' }); 

Ahora dentro de mywidget.js puedes llamar a este script:

 $.getJSON('http://domainA.com/myscript?jsoncallback=?', function(data) { $('#my_widget').html(data.result); }); 

Todo lo que queda es decirle a los usuarios que incluyan el script mywidget.js y que proporcionen un marcador de posición con id="my_widget" para hospedar los resultados (incluso podría generar este marcador de posición en la callback correcta).

Observación: cuando usa JSONP, está limitado a las solicitudes GET solamente. Esto significa que hay un límite en el tamaño de la solicitud que puede enviar.

Usted tiene el control total de su página ya que está ejecutando su código en su sitio.

Puedes crear iframes document.createElement("iframe") , inyectarlo en cualquier lugar de la página document.getElementById("my_widget").appendChild(iframe) y hacer lo que quieras.

Una cosa que debes tener cuidado con esto es no saturar sus espacios de nombres … evita cualquier espacio de nombres habitual y crea el tuyo (__my_widget o lo que sea más extraño). Y trate de mantener los espacios de nombres tan bajos como 1, o incluso ninguno si es posible.

No use load , use un iframe si solo está tratando de cargar html desde su sitio.