2010-05-28 37 views
36

Şu an biraz denemeye çalışıyorum ve SO ile ilgili benzer soruların diğer yanıtlarını inceledim, ancak iframe'in src niteliğini değiştirmeye çalıştığımda, bunu tümüyle güncelleştiriyor penceresi. İşte o kullanıyorum Aşağıdaki kod (hiçbir jquery) düzgün çalışır:jquery ile iframe kaynağını değiştirme

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

Dediğim gibi, ben sayfasını görüntüler

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

denedim ama iframe'de değil. Gerçekten sadece jquery öğreniyorum, ama bu gibi diğer benzer soruları daha benim durum hakkında neyin farklı olduğunu anlamaya olamaz:

Jquery and iFrame update

teşekkür ederiz.

+0

Sen bir jQuery sorunu değil, bir CSS problem eminiz, iframe'de o değil sayfasını görüntüler söz? Belki de çerçevenin yeni bir sayfa yüklediğinde boyutları değiştirip değiştirmediğini görmek için sınırları etkinleştirebilirsiniz. – Mayo

cevap

91

Çalışır.

http://jsfiddle.net/rhpNc/

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

Chrome'da böyle bir hata tetikleyebilir bir dış etki alanına işaret attr() kullanarak:: Ekran X tarafından yasaklanmış çünkü "belgeyi görüntülemek için reddetti İşte

çalışan bir örnektir -Frame Seçenekleri ". Bunun geçici çözümü, tüm iframe HTML kodunu betiğe (ör. JQuery'de .html() kullanarak) taşımak olabilir.

Örnek:

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; 
} 
İlgili konular