insertar - llamar javascript desde html
¿Cree un JavaScript incrustado en una página de host de dominios cruzados que no se ve afectada por el CSS de la página de host? (4)
1) Hay muchas formas diferentes de cargar contenido en iframe. Iframe tiene contenido aislado. iframe que pones en la página de host, no tiene src, debido a la política segura del navegador, no puedes simplemente cargar contenido de otros dominios. Pero puedes cargar js desde otro dominio. Para este propósito necesitas el JSONP.
2) para compartir cookies con la página de host y el iframe de widgets, necesitas usar la API postMessage como en esta post
La mayoría de los widgets de JavaScript que pueden integrarse en un sitio web usan la siguiente estructura. Primero incrusta un código cortado de esta manera:
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){
z._.push(c)},
$=z.s=d.createElement(s),
e=d.getElementsByTagName(s)[0];
z.set=function(o){
z.set._.push(o)
};
z._=[];
z.set._=[];
$.async=!0;
$.setAttribute(''charset'',''utf-8'');
$.src=''//v2.zopim.com/?2342323423434234234'';
z.t=+new Date;
$.type=''text/javascript'';
e.parentNode.insertBefore($,e)})(document,''script'');
</script>
Luego, cuando cargue su página, este script crea una estructura html como esta:
<div class="widget-class">
<iframe src="about:blank">
// the content of the widget
</iframe>
</div
Veo esta misma estructura en muchos servicios de chat como:
https://en.zopim.com/
http://banckle.com/
https://www.livechatinc.com/
Todos tienen en común que su iframe no tiene un src , es decir, una URL adjunta.
Actualización: Aquí está el script que uso para cargar mi código de widget en un sitio web de un tercero:
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName(''SCRIPT'')[0], p = d.createElement(''SCRIPT'');
window.WidgetId = "1234";
p.type = ''text/javascript'';
p.setAttribute(''charset'',''utf-8'');
p.async = true;
p.src = "//www.example.com/assets/clientwidget/chatwidget.nocache.js";
f.parentNode.insertBefore(p, f);
}(document));
</script>
Quiero que el CSS del sitio donde está integrado el widget GWT no influya en el CSS del widget GWT. Evitaré que el CSS de la página de host influya en el CSS de mi widget de GWT.
Nota: También quiero tener acceso al sitio web del host desde mi widget GWT.
El dominio de la página del host es www.example.com y el dominio del iframe es www.widget.com. También quiero configurar las cookies del dominio host desde el iframe.
¿Cuál es el procedimiento para construir un widget que se ejecute en dicha estructura? ¿Cómo se está configurando el contenido del iframe? ¿Hay un patrón para eso? ¿Cómo puedo hacer eso con GWT?
Aquí hay un proyecto de expansión de widget simple completamente funcional que escribí en cloud9 (IDE en línea) con javascript, no dude en solicitar un acceso si desea editarlo, verlo está disponible públicamente (para usuarios registrados, la inscripción es gratuita).
fuentes: https://ide.c9.io/nmlc/widget-example , resultado: https://widget-example-nmlc.c9users.io/index.html
En cuanto a la pregunta sobre cómo lo hacen:
Parece que zopim construye sus widgets gradualmente en el lado del cliente, definiendo y requiriendo módulos básicos (como estos __$$__meshim_widget_components_mobileChatWindow_MainScreen ), que consisten en submódulos y luego procesan todo con el constructor __$$__jx_ui_HTMLElement que crea elementos HTML y los agrega a proporcionó nodos principales. Todo lo que se compila en el HTML resultante de la caja de chat. Por cierto, a juzgar por los nombres de algunos componentes, parece que construyen sus widgets con alguna biblioteca "meshim", pero nunca he oído hablar de esta biblioteca.
this.dom.src=''about:blank''
this.appendToParent(!0)
var H=this.iwin=this.dom.contentWindow
var I=this.idoc=r.extend(H.document)
I.write(G)
I.close()
Este, supongo, es el lugar donde el servicio zopim crea un iframe para sus widgets. No estoy seguro de por qué están usando document.write en lugar de appendChild (document.write, suelta enlaces de eventos), pero he implementado ambas versiones, son prácticamente las mismas excepto setIframeContents y addHtmlElement functions.
Espero que alguien lo encuentre útil :).
No conozco GWT, pero puedes lograrlo fácilmente con JavaScript.
Supongamos que está creando un widget de conteo en línea. Al principio, crea un iframe:
<script id="your-widget">
// Select the script tag used to load the widget.
var scriptElement = document.querySelector("your-widget");
// Create an iframe.
var iframe = document.createElement("iframe");
// Insert iframe before script''s next sibling, i.e. after the script.
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);
// rest of the code
</script>
Luego busque el conteo en línea usando JSONP (vea ¿De qué se trata JSONP? ), Por ejemplo:
// The URL of your API, without JSONP callback parameter.
var url = "your-api-url";
// Callback function used for JSONP.
// Executed as soon as server response is received.
function callback(count) {
// rest of code
}
// Create a script.
var script = document.createElement("script");
// Set script''s src attribute to API URL + JSONP callback parameter.
// It makes browser send HTTP request to the API.
script.src = url + "?callback=callback";
A continuación, gestione la respuesta del servidor (dentro de la función de callback() ):
// Create a div element
var div = document.createElement("div");
// Insert online count to this element.
// I assume that server response is plain-text number, for example 5.
div.innerHTML = count;
// Append div to iframe''s body.
iframe.contentWindow.document.body.appendChild(div);
Eso es todo. Todo el código podría verse así:
Fragmento para insertar en el sitio web de un tercero:
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName(''SCRIPT'')[0], p = d.createElement(''SCRIPT'');
window.WidgetId = "1234";
p.type = ''text/javascript'';
p.setAttribute(''charset'',''utf-8'');
p.async = true;
p.id = "your-widget";
p.src = "//www.example.com/assets/clientwidget/chatwidget.nocache.js";
f.parentNode.insertBefore(p, f);
}(document));
</script>
Archivo JavaScript en su servidor:
// Select the script tag used to load the widget.
var scriptElement = document.querySelector("#your-widget");
// Create an iframe.
var iframe = document.createElement("iframe");
// Insert iframe before script''s next sibling, i.e. after the script.
scriptElement.parentNode.insertBefore(iframe, scriptElement.nextSibling);
// The URL of your API, without JSONP callback parameter.
var url = "your-api-url";
// Callback function used for JSONP.
// Executed as soon as server response is received.
function callback(count) {
// Create a div element
var div = document.createElement("div");
// Insert online count to this element.
// I assume that server response is plain-text number, for example 5.
div.innerHTML = count;
// Append div to iframe''s body.
iframe.contentWindow.document.body.appendChild(div);
}
// Create a script.
var script = document.createElement("script");
// Set script''s src attribute to API URL + JSONP callback parameter.
// It makes browser send HTTP request to the API.
script.src = url + "?callback=callback";
EDITAR:
si desea que su widget no se vea influenciado por ningún CSS del "exterior", debe cargarlo en un iframe.
código para agregar a su sitio web para cargar cualquier proyecto / widget gwt:
<iframe id="1234" src="//www.example.com/assets/Chatwidget.html" style="border: 1px solid black;" tabindex="-1"></iframe>
aviso: que NO estoy cargando el archivo nocache.js, sino el archivo yourwidget.html. así todas tus clases en el marco no se verá afectado por ninguna clase desde el exterior.
para acceder a cualquier cosa que esté fuera de este iframe, puede usar los métodos jsni . esto solo funcionará si el dominio de tu iframe y de la tercera parte es el mismo. de lo contrario, window.postMessage usar window.postMessage :
public native static void yourMethod() /*-{
$wnd.parent.someMethodFromOutsideTheIframe();
}-*/;
EDIT2:
utilizando el fragmento de arriba, asegúrese de que su widget no esté influenciado por ningún CSS de la página de inicio. para obtener la url de la página principal desde el widget, simplemente agregue esta función:
private native static String getHostPageUrl() /*-{
return $wnd.parent.location.hostname;
}-*/;
EDIT3:
ya que estás en 2 dominios diferentes, tienes que usar window.postMessage. aquí un pequeño ejemplo para que empieces:
además del iframe, debe agregar un detector de eventos a la ventana de su example.com, que escucha los mensajes de su iframe. también verifica si los mensajes provienen del origen correcto.
<script>
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener"
: "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage"
: "message";
// Listen to message from child window
eventer(messageEvent, function(e) {
//check for the correct origin, if wanted
//if ( e.origin !== "http://www.widget.com" )
// return
console.log(''parent received message!: '', e.data);
//here you can set your cookie
document.cookie = ''cookie=widget; expires=Fri, 1 Feb 2016 18:00:00 UTC; path=/''
}, false);
</script>
Desde el interior de tu widget, debes llamar a este método:
public native static void postMessageToParent(String message) /*-{
//message to sent, the host that is supposed to receive it
$wnd.parent.postMessage(message, "http://www.example.com");
}-*/;
Puse un ejemplo de trabajo en pastebin:
javascript para insertar en su página: http://pastebin.com/Y0iDTntw
Clase de gwt con onmoduleload: http://pastebin.com/QjDRuPmg