JQuery - Añadir Iframe con jQuery

Añadir Iframe con jQuery

Publicado por DiabloJR (8 intervenciones) el 16/06/2012 15:26:56

Buenas a todos.... tengo en mi aplicacion una serie de botones que, dependiendo del que pulse, me agregan un iframe con una url determinada pero dichas url no son de mi dominio (externas)

Para añadir el iframe uso lo siguiente:

$('#iframe').html("").append($("<iframe></iframe>", {

        src: url,

        css: { "width": "100%", "height": "100%" }

}));

Esto funciona correctamente, ya que al pulsar F12 puedo ver que el código del iframe aparece, pero no se me muestra. Y si miro la consola de javascript me sale el siguiente mensaje:

Refused to display document because display forbidden by X-Frame-Options.

Alguien me puede decir que puede estar pasando ??? Necesito solucionarlo lo antes posible y no se que esta pasando.

P.D.: La aplicación solo se usa en Google Chrome, por si es de utilidad...

Gracias de antemano por cualquier ayuda que me podais facilitar.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 302

Añadir Iframe con jQuery

Publicado por xve (673 intervenciones) el 17/06/2012 21:15:42

Segun veo, al final de un iframe añades otro iframe... es eso lo que quieres hacer??
Creo que esto es erroneo:
$('#iframe').html("")
Un iframe creo que no puedes indicarle un código html...

Puede ser que quieras modificar el source (src) del iframe? si es así, seria algo así:

$('#iframe').attr({src:url});

Coméntanos exactamente que es el lo que quieres hacer, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Añadir Iframe con jQuery

Publicado por DiabloJR (8 intervenciones) el 19/06/2012 19:12:46

lo que hago no es añadir un iframe dentro de otro.... $('#iframe') es una capa a la cual añado el iframe pero no hay forma de hacer que el iframe se vea.... sin embargo si cambio la funcion y utilizo window.open se me abre en una nueva ventana y ahi si que va perfecto.... no se que puede estar pasando

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Añadir Iframe con jQuery

Publicado por xve (673 intervenciones) el 19/06/2012 19:54:11

Has probado a ponerle una anchura y altura al iframe?? algo así:

$('#iframe').html("").append($("<iframe width='100%' height='100%'></iframe>", {

        src: url

}));

Valora esta respuesta

Comentar

Añadir Iframe con jQuery

Publicado por DiabloJR (8 intervenciones) el 20/06/2012 17:58:26

en la funcion que utilizo, cuando añado el iframe con la funcion append, indico el src y el css... en el css le pongo la altura y la anchura al 100%.. puedes verlo en el comentario con el que abri este hilo....

el error que me esta dando creo que no tiene nada que ver con eso... y por mas foros que miro no encuentro nada... he visto hilos de otras personas que tienen el mismo problema pero no le dan respuestas....

Valora esta respuesta

Comentar

Pos: 1

Val: 302

Añadir Iframe con jQuery

Publicado por xve (673 intervenciones) el 20/06/2012 22:31:44

Es que me da la sensación, que te lo pone a 1 pixel, y por eso no se visualiza... podemos ver la página?

Valora esta respuesta

Comentar

Añadir Iframe con jQuery

Publicado por DiabloJR (8 intervenciones) el 21/06/2012 09:42:01

Fue lo primero que comprobe... la altura y anchura, pero lo pinta correctamente... la capa superior tiene una altura y anchura fija y al poner el iframe al 100% se ajusta a esa capa... si ese fuese el problema no me daría ningún tipo de error, tan solo no se pintaría

El problema tiene que venir por otro sitio ya que si ves el error que indico arriba, me indica que el cuerpo del iframe no lo puede cargar porque esta prohibido por... eso es lo que quiero averiguar... que me esta impidiendo que el iframe se cargue, ya que X-Frame-Options no se que es....

Valora esta respuesta

Comentar

Añadir Iframe con jQuery

Publicado por DiabloJR (8 intervenciones) el 21/06/2012 10:29:01

/********************************************************************

Funciones comunes

********************************************************************/

function showPublishDiv(width, height, url) {

	$('#background').fadeIn();

	$('#publishform').html("").append($("<iframe>", {

		src: url,

		css: { "width": "100%", "height": "100%" }

	}));

	$('#publishform').css({ height: height+'px', width: width+'px', left: ($(window).width() - width)/2, top: ($(window).height() - height)/2 }).fadeIn();

	$('#publishbuttons').fadeOut();

/********************************************************************

Codio para inyectar en la pagina

********************************************************************/

var divBackground = $("<div>", {

	id: "background",

	css: { "background-color": "black", "opacity": "0.7", "position": "fixed", "width": "100%", "height": "100%", "top": "0", "left": "0", "z-index": "10000",

		"display": "none"

},

	click: function (e) {

		$('#background').fadeOut();

		$('#publishform').fadeOut();

		$('#publishbuttons').fadeIn();

});

var divPublishForm = $("<div>", {

	id: "publishform",

	css: { "background-color": "white", "position": "fixed", "width": "50%", "height": "50%", "top": "25%", "left": "25%", "z-index": "10001", "display": "none",

		"-webkit-box-shadow": "0px 0px 30px #fff", "border-radius": "10px", "padding": "10px", "overflow": "hidden"

});

var divButtons = $("<div>", {

	id: "publishbuttons",

	css: { "background-color": "white", "position": "fixed", "bottom": "0", "right": "0", "border-top": "1px solid #888", "border-left": "1px solid #888",

		"border-radius": "8px 0 0 0", "padding": "2px"

});

var facebookButtons = $("<img>", {

	id: "facebook",

	css: { "padding": "2px", "width": "24px", "cursor": "pointer" },

	src: "http://cdn5.iconfinder.com/data/icons/inFocus_social_media/40/facebook-logo-square.png",

	click: function (e) {

		var url = "http://www.facebook.com/share.php?u=" + encodeURI(document.location) + "&t=" + encodeURI(document.title);

		showPublishDiv(626, 436, url);

});

$('body').append(divBackground).append(divPublishForm).append(divButtons);

$('#publishbuttons').append(facebookButtons);

ahí les dejo parte del archivo js que uso para incluir los botones y todo lo demas en mi web... a ver si así resolvemos mas rápido el error...

por lo que he leido, lo del X-FRAME-OPTION es una especie de metodo de proteccion de los navegadores pero... entonces esto significa que por jquery no puedo agregar un iframe a mi web ??? no tendría mucho sentido...

Valora esta respuesta

Comentar

Añadir Iframe con jQuery

Publicado por DiabloJR (8 intervenciones) el 02/07/2012 09:00:37

He encontrado una pagina en la que sucede exactamente lo que comento.

http://www.oscarmendezaguirre.com/ejemplos/formularioiframe/

Si pulsan en el enlace formulario, se muestra una pagina perteneciente al mismo dominio, por lo que no da ningun tipo de problemas.

Por el contrario, si pulsan en "Google", se abre un dialog en el cual se añade un iframe que nunca se llega a mostrar y si miran la consola de errores pueden ver el mismo error que me sale a mi...

Valora esta respuesta

Comentar

yquery y <div> html

ayuda con validate y autocomplete