cambiando fuente de iframe con jquery

He estado intentando esto por un tiempo y he visto otras respuestas a preguntas similares en SO, pero cuando intento cambiar el atributo src de un iframe, lo actualiza para todo ventana. Aquí está el siguiente código que estoy usando que funciona correctamente (sin jQuery):cambiando fuente de iframe con jquery

<html> 
<head> 
<style type="text/css"> 
iframe#ifrm { 
    border:none; 
    padding:.5em; 
    margin:1.5em 0 1em; 
    width:100%; 
    height:100%; 
} 
</style> 
<script src="./js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
// <![CDATA[ 
    // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
    // this is the function I'm trying to replace: 
    function loadIframe(iframeName, url) { 
    if (window.frames[iframeName]) { 
     window.frames[iframeName].location = url; 
     return false; 
    } 
    return true; 
} 
// ]]> 
</script> 
</head> 

<body> 
<ul> 
<li><a href="http://www.google.com/" onclick="return loadIframe('ifrm', this.href)">Page 1</a> </li> 
<li><a href="tabs.html" onclick="return loadIframe('ifrm', this.href)">Page 2</a></li> 
</ul> 
<div class="iframe"> 
<iframe name="ifrm" id="ifrm" src="tabs.html" frameborder="0"> 
Your browser doesn't support iframes.</iframe>

Como ya he dicho, lo he intentado

$('#ifrm').attr('src', "http://www.google.com")

que muestra la página, pero no en el iframe Realmente estoy aprendiendo jQuery, pero no puedo imaginar lo que es diferente acerca de mi situación que otras preguntas similares como esto:

Jquery and iFrame update

Gracias.

Fuente

2010-05-28 Casey

Usted menciona que muestra la página, pero no en el marco flotante, ¿estás seguro de que es un problema de jQuery y CSS no es un problema? Tal vez podría habilitar los bordes para ver si el marco está cambiando las dimensiones cuando carga una página nueva. – Mayo

Debería funcionar.

Aquí está un ejemplo de trabajo:

http://jsfiddle.net/rhpNc/

function loadIframe(iframeName, url) { 
    var $iframe = $('#' + iframeName); 
    if ($iframe.length) { 
     $iframe.attr('src',url); 
     return false; 
    } 
    return true; 
}

Fuente

2010-05-28 15:56:04 user113716

Usando attr() que apunta a un dominio externo puede desencadenar un error como este en Chrome: "se negó a mostrar documento porque la pantalla prohibido por X -Frame-Options ". La solución a esto puede ser mover todo el código HTML del iframe al script (por ejemplo, usar .html() en jQuery).

Ejemplo:

var divMapLoaded = false; 
$("#container").scroll(function() { 
    if ((!divMapLoaded) && ($("#map").position().left <= $("#map").width())) { 
    $("#map-iframe").html("<iframe id=\"map-iframe\" " + 
     "width=\"100%\" height=\"100%\" frameborder=\"0\" scrolling=\"no\" " + 
     "marginheight=\"0\" marginwidth=\"0\" " + 
     "src=\"http://www.google.it/maps?t=m&amp;cid=0x3e589d98063177ab&amp;ie=UTF8&amp;iwloc=A&amp;brcurrent=5,0,1&amp;ll=41.123115,16.853177&amp;spn=0.005617,0.009943&amp;output=embed\"" + 
     "></iframe>"); 
    divMapLoaded = true; 
}

Fuente

2013-10-23 06:55:49 TheLegs

cambiando fuente de iframe con jquery

Respuesta

Cuestiones relacionadas