2010-05-28 4 views
36

Я уже немного пробовал это и посмотрел на другие ответы на подобные вопросы по SO, но когда я пытаюсь изменить атрибут src iframe, он обновляет его для целого окно. Здесь пока следующий код, я использую, что работает правильно (не JQuery):изменение источника iframe с 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> 

Как я уже сказал, я попытался

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

, который отображает страницу, но а не в iframe. Я действительно только учусь JQuery, но я не могу понять, что по-другому о моей ситуации, чем другие подобные вопросы, как это:

Jquery and iFrame update

Спасибо.

+0

Вы упоминаете, что он отображает страницу, но не в IFRAME, вы уверены, что это проблема JQuery и не проблема CSS? Возможно, вы можете включить границы, чтобы увидеть, меняет ли кадр размеры при загрузке новой страницы. – Mayo

ответ

91

Должно работать.

Вот рабочий пример:

http://jsfiddle.net/rhpNc/

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

Использование Attr(), указывающий на внешний домен может вызвать ошибку, как это в Chrome: «Отказался для отображения документа, поскольку дисплей запрещен X -Frame-Options ". Обходным путем к этому может быть перемещение всего кода iframe HTML в скрипт (например, с использованием .html() в jQuery).

Пример:

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