2010-11-22 2 views
130

У меня есть два iframe на странице, а один делает изменения в другом, но другой iframe не показывает изменения до тех пор, пока я не обновляюсь. Есть ли простой способ обновить этот iframe с помощью jQuery?Перезагрузка iframe с jQuery

<div class="project"> 
    <iframe id="currentElement" class="myframe" name="myframe" src="http://somesite.com/something/new"></iframe> 
</div> 
+3

ли IFrame документ на другом домене? – 2010-11-22 20:17:32

+0

У вас есть доступ к коду сайта, который отображается в iFrame? – 2010-11-22 20:17:43

+0

Показать больше кода - html для iFrames, а также код javascript, который вы используете для внесения изменений. Трудно понять, в чем проблема, видя только то, что вы включили до сих пор. – 2010-11-22 20:19:34

ответ

152

Если IFrame не был на другом домене, вы могли бы сделать что-то вроде этого:

document.getElementById(FrameID).contentDocument.location.reload(true); 

Но поскольку IFrame находится на другом домене, будет отказано в доступе к IFrame-х contentDocument недвижимость по same-origin policy.

Но вы можете взломать перекрестный домен iframe для перезагрузки, если ваш код работает на родительской странице iframe, установив для него свой атрибут src. Как это:

// hackishly force iframe to reload 
var iframe = document.getElementById(FrameId); 
iframe.src = iframe.src; 

Если вы пытаетесь перезагрузить IFRAME из другого фрейма, вы не повезло, что является не возможно.

+16

Его вопрос состоял в том, как выполнить это с помощью jQuery - не Javascript. См. Сообщение Sime Vidas ниже для правильного ответа jQuery. – FastTrack 2012-03-24 16:50:51

38

вы также можете использовать jquery. Это то же самое, что Алекс предложил только с помощью JQuery:

$('#currentElement').attr("src", $('#currentElement').attr("src")); 
4

Просто возвратно-ответ Алекс, но с JQuery

var currSrc = $("#currentElement").attr("src"); 
$("#currentElement").attr("src", currSrc); 
208
$('#iframe').attr('src', function (i, val) { return val; }); 
1

Это возможно с простым JavaScript.

  • В iFrame1 выполните функцию JavaScript, которая вызывается в теге body onload. Я проверяю переменную на стороне сервера, которую я установил, поэтому он не пытается запустить функцию JavaScript в iframe2, если я не принял конкретное действие в iframe1. Вы можете установить это как функцию, нажатую нажатием кнопки или, если хотите, в iframe1.
  • Тогда в iframe2 у вас есть вторая функция, которую я перечисляю ниже. Функция iframe1 в основном переходит на родительскую страницу, а затем использует синтаксис window.frames для запуска функции JavaScript в iframe2. Просто не забудьте использовать id/name iframe2, а не src.
//function in iframe1 
function refreshIframe2() 
{ 
    if (<cfoutput>#didValidation#</cfoutput> == 1) 
    { 
     parent.window.frames.iframe2.refreshPage(); 
    } 
} 

//function in iframe2 
function refreshPage() 
{ 
    document.location.reload(); 
} 
9

Обновить в IFRAME с JQuery

сделать ссылку внутри фрейма позволяет говорить с идентификатором = "перезагрузка", а затем используйте следующий код

$('#reload').click(function() { 
    document.location.reload(); 
}); 

и вы хорошо идти со всеми браузерами.

Перезагрузка iframe с HTML (без Java Script req.)

Он имеет более простое решение: которое работает без JavaScript в (FF, Webkit)

просто сделать якорь внутри вашего фрейма

<a href="#" target="_SELF">Refresh Comments</a> 

При нажатии на якорь это просто обновить IFRAME

Но , если у вас есть параметр для отправки в ваш iframe, сделайте это следующим образом.

<a id="comnt-limit" href="?id=<?= $page_id?>" target="_SELF">Refresh Comments</a> 

не нужна URL страницы, потому что -> цель = «_ SELF» сделать это для вас

2

Если вы междоменное, просто установив СРК обратно на тот же URL не всегда будет вызвать перезагрузка, даже если хеш местоположения изменяется.

В этой проблеме возникла проблема с ручным построением iframe кнопки Twitter, которая не обновлялась при обновлении URL-адресов.

Twitter как кнопки имеет вид: .../tweet_button.html#&_version=2&count=none&etc=...

Поскольку Twitter использует фрагмент документа для URL, изменение хэша/фрагмента не перезагружать источник, а цели кнопки не отражают мой новый Аякса загруженный контент.

Вы можете добавить параметр строки запроса для силы перегрузочного (например: "?_=" + Math.random() но это будет тратить пропускную способность, особенно в этом примере, где подход Twitter был специально пытается включить кэширование

Чтобы обновить то, что меняется только. хэш-теги, вам нужно удалить элемент или изменить src, дождитесь окончания потока, а затем назначьте его обратно. Если страница все еще кэширована, это не требует сетевого удара, но вызывает перезагрузку кадра.

var old = iframe.src; 
iframe.src = ''; 
setTimeout(function() { 
    iframe.src = old; 
}, 0); 

Обновление: Использование этого подхода создает нежелательные элементы истории. Вместо этого каждый раз удаляйте и воссоздавайте элемент iframe, который удерживает эту кнопку назад(), как ожидается. Также приятно не иметь таймер.

0
ifrX =document.getElementById('id') //or 
    ifrX =frames['index']; 

решение кросс-браузер:

ifrX.src = ifrX.contentWindow.location 

это особенно полезно, когда < IFRAME> является мишенью < форма>

6

с JQuery вы можете использовать это:

$('#iframeid',window.parent.document).attr('src',$('#iframeid',window.parent.document).attr('src')); 
-6

Ниже приведено решение наверняка:

window.parent.location.href = window.parent.location.href; 
0

РЕШЕННЫЙ! Я зарегистрируюсь на биржевом потоке, чтобы предоставить вам единственное решение (по крайней мере, в ASP.NET/IE/FF/Chrome), которое работает! Идея заключается в замене значения innerHTML div на его текущее значение innerHTML.

Вот фрагмент код HTML:

<div class="content-2" id="divGranite"> 
<h2>Granite Purchase</h2> 
<IFRAME runat="server" id="frameGranite" src="Jobs-granite.aspx" width="820px" height="300px" frameborder="0" seamless ></IFRAME> 
</div> 

И мой код JavaScript:

function refreshGranite() {   
    var iframe = document.getElementById('divGranite') 
    iframe.innerHTML = iframe.innerHTML; 
} 

Надеется, что это помогает.

3

Я уверен, что все приведенные выше примеры только перезагружают iframe исходным src, а не его текущим URL.

$('#frameId').attr('src', function() { return $(this).contents().get(0).location.href }); 

Это должно перезаряжаться с использованием текущего URL-адреса.

2

Просто возвратно-ответ Алекс, но с JQuery:

var e = $('#myFrame'); 
    e.attr("src", e.attr("src")); 

Или вы можете использовать небольшую функцию:

function iframeRefresh(e) { 
    var c = $(e); 
     c.attr("src", c.attr("src")); 
} 

Я надеюсь, что это помогает.

3

Вот еще один способ

$('#iframe').attr('src', function() { return $(this)[0].src; }); 
0

Вы должны использовать

[0] .src

найти источник фрейма и его URL должен быть на тот же домен родителя.

setInterval(refreshMe, 5000); 
function refreshMe() { 
    $("#currentElement")[0].src = $("#currentElement")[0].src; 
} 
1
$('IFRAME#currentElement').get(0).contentDocument.location.reload() 
0

// обновить все плавающие фреймы на странице

var f_list = document.getElementsByTagName('iframe'); 

for (var i = 0, f; f = f_list[i]; i++) { 
          f.src = f.src; 
         } 
Смежные вопросы