modifica sorgente iframe con jquery

Ho cercato questo per un po 'ora e ho guardato altre risposte a domande simili su SO, ma quando sto cercando di cambiare l'attributo src di un iframe, lo aggiorna per l'intero finestra. Ecco il seguente codice che sto usando che funziona correttamente (senza jquery):modifica sorgente 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>

Come ho detto, ho provato

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

che visualizza la pagina, ma non nell'iframe. Sono davvero solo imparare jQuery, ma non riesco a capire cosa c'è di diverso la mia situazione rispetto ad altre domande simili come questo:

Jquery and iFrame update

Grazie.

fonte

2010-05-28 Casey

si parla che viene visualizzata la pagina, ma non nel iframe, sei sicuro che sia un problema di jQuery e non un problema CSS? Forse potresti abilitare i bordi per vedere se il fotogramma sta cambiando dimensioni quando carica una nuova pagina. – Mayo

Dovrebbe funzionare.

Ecco un esempio di lavoro:

http://jsfiddle.net/rhpNc/

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

fonte

2010-05-28 15:56:04 user113716

Utilizzando attr() che punta a un dominio esterno può scatenare un errore come questo in Chrome: "ha rifiutato di visualizzare documento perché visualizzazione vietato dalla X -Frame-Options ". La soluzione a questo può essere quella di spostare l'intero codice HTML iframe nello script (ad esempio utilizzando .html() in jQuery).

Esempio:

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; 
}

fonte

2013-10-23 06:55:49 TheLegs

modifica sorgente iframe con jquery

risposta

Problemi correlati