transición paginas intro entre efectos bootstrap alternatives javascript jquery html css

javascript - paginas - step by step js



Mostrando una demo de mi CSS en cualquier sitio web. (11)

He desarrollado un pequeño componente que se puede colocar en cualquier sitio web. Ahora, quiero desarrollar un código que pueda demostrar cómo se vería mi componente en cualquier sitio web.

Entonces, la persona vendría a mi página y pondría su URL y luego mi código debería incrustar mi JS / CSS personalizado en el HTML descargado y mostrarlo. Algo como esto .

Aquí, al igual que la pestaña de comentarios, quiero mostrar mi componente en cualquier lugar de esa página.

Aquí está mi enfoque ...

http://jsfiddle.net/L2kEf/

html

<iframe src="http://www.bing.com"></iframe> <div>I am div</div>

css

div { background: red; position: absolute; top: 20px; width: 100px; left:20px;} iframe{width: 100%; height: 500px;}

también puede agregar javascript / jquery, así que podría hacer algo como:

jQuery // no estoy 100% seguro de que funcionaría porque es compatible con varios navegadores, pero vale la pena intentarlo.

$(''div'').click(function (){ $(''iframe'').contents().html(''changed'');/// });

si esto no puede cambiar ninguno de los contenidos, puede mostrar un cuadro de diálogo, para decir que normalmente funcionaría si estuviera en su sitio web, luego use el enfoque @ syserr0r para usuarios marcados, para obtener mejores resultados, ya que está ofreciendo este tipo de servicios. Para los desarrolladores, estoy seguro de que sabrían acerca de los marcadores, mi enfoque rara vez se utilizará :) así que espero que ayude.

Estoy de acuerdo con la estrategia bookmarklet.

Soy un fan de http://bookmarklets.heroku.com/ , que te permite generar bookmarklets fácilmente, inyectar jQuery, etc.

La respuesta de Nathan es la más cercana a cómo hemos hecho la función de demostración en WebEngage . Para que una demostración de este tipo sea funcional, deberá crear un widget de Javascript que se pueda insertar en sitios de terceros. La respuesta de syserr0r sobre la creación de un bookmarklet es el enfoque más simple para hacerlo. El nuestro es un backend de JAVA y usamos HttpClient para obtener las respuestas. Como sugirió Nathan, analizamos la respuesta, la desinfectamos y agregamos nuestro widget Javascript a la respuesta. El código JS del widget lo toma desde allí para representar la pestaña Comentarios y cargar una breve encuesta de demostración.

Divulgación: Soy cofundador y director general de WebEngage.

No puede hacer esto con JQuery debido a las restricciones de secuencias de comandos entre sitios.

Le sugiero que escriba un script PHP que descargue la URL especificada por el usuario e incluya su código de widget y luego se lo devuelva al usuario.

Podría hacer una página de iframe, que carga su página en el iframe, y usa javascript para inyectar su código en el iframe.

Pruebe un bookmarklet .

Cree una pieza de javascript que agregue su código a la página, como por ejemplo:

javascript:(function(){var%20script=document.createElement(''script'');script.src=''http://www.example.org/js/example.js'';document.getElementsByTagName(''head'')[0].appendChild(script);})()

Agrégalo como el href de un enlace así:

<a href="javascript:(function(){var%20script=document.createElement(''script'');script.src=''http://www.example.org/js/example.js'';document.getElementsByTagName(''head'')[0].appendChild(script);})()">Link Text Here</a>

Dígales a sus usuarios que arrastren el enlace a su barra de herramientas de marcadores y que hagan clic en diferentes sitios web para probar su código.

Algunos ejemplos: http://www.reclaimprivacy.org/ , http://www.readability.com/bookmarklets

Puede obtener una aproximación de cómo se verá usando un iframe. Eche un vistazo a ese enlace para ver un ejemplo.

http://jsfiddle.net/jzaun/5PjRy/

El problema con esta appoch es que no puede mover su (s) DIV (s) cuando la página se desplaza, están en efecto simplemente flotando sobre el iframe. No hay forma de evitar esto, ya que las secuencias de comandos de dominios cruzados no le permitirán acceder al documento de iframe para monitorear eventos de desplazamiento.

La única otra opción que tiene para un ejemplo de mejor ajuste sería cargar la página desde el lado del servidor en cualquier lenguaje de scripting que esté usando y cargarla en el iframe (o en un div, etc.) y puede usar javascript todo desea como la página viene de tu dominio.

Para su ejemplo de cómo se verá su widget, me imagino que flotar sus DIV (s) sobre un iframe daría suficiente idea.

Tenga en cuenta que el ejemplo que dio está utilizando el método del lado del servidor, no el método iframe.

Puedes crear una extensión Crossrider que tus usuarios pueden descargar. Luego simplemente agregue esto a su código de aplicación / extensión:

appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")

Luego, los usuarios pueden descargar la extensión (funciona en varios navegadores para Internet Explorer, Chrome y Firefox) y cargará su código JS en cada carga de página.

Recomiendo usar bookmarklets. He creado un generador de marcadores para agregar marcadores de jQuery habilitados a una página para facilitar el desarrollo.

Hay un marcador de calibres en la página con el que puedes jugar solo para mostrar un ejemplo de cómo funciona.

Revelación completa, esto es algo que he hecho, no estoy tratando de ser spam ya que creo que es relevante: zbooks

Tuve un problema de naturaleza similar, y el principal obstáculo es la política de dominios cruzados.

Debe pedir al usuario que coloque su código en un <script src="..."> o cree una solución proxy que agregue su código para ellos.

Fui por el proxy y aquí están mis observaciones:

  • es fácil crear un proxy básico en php; hay algunos proxies php en sourceforge y Ben Alman ha creado un proxy php simple para AJAX. Basándome en ellos, pude crear un proxy php que alteraba el contenido correctamente en un día.
  • después de eso, pasé mucho tiempo haciendo que funcionara con más y más sitios con problemas. Nunca puedes crear un proxy perfecto.

Como alternativa (siempre que no sea comercial) puede usar cgi-proxy y colocar el sitio en un iframe y luego hacer lo que quiera hacer con el documento de iframes. Como está en tu dominio gracias al proxy. Puede acceder a iframeDOMnode.contentWindow.document luego, etc.

En el ejemplo que vinculó, solicitan la página especificada en el parámetro url querystring en el servidor y luego realizan más o menos los siguientes pasos:

  1. En la etiqueta <head> están agregando una etiqueta <base href="url" /> al documento. La etiqueta base hará que los enlaces relativos del documento traten el valor del atributo href como su raíz. Así es como se están moviendo css / images rotos. (La etiqueta base es compatible con todos los navegadores)
  2. Al final del documento (IE la etiqueta </body> ) están inyectando el javascript que ejecuta sus demostraciones.
  3. Sirven el HTML modificado solicitado al navegador.

Todo esto es bastante sencillo en la implementación. Podría usar expresiones regulares para hacer coincidir las etiquetas <head> y </body> para los pasos 1 y 2 respectivamente. Dependiendo de la plataforma del servidor, la forma en que solicite la página variará, pero aquí hay algunos enlaces para comenzar: