it-roy-ru.com

Перезагрузите iframe с помощью jQuery

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

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

Если iframe не находится в другом домене, вы можете сделать что-то вроде этого:

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

Но поскольку iframe находится в другом домене, вам будет отказано в доступе к свойству iframe contentDocument в соответствии с политикой same-Origin .

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

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

Если вы пытаетесь перезагрузить iframe из другого iframe, вам не повезло, that возможно not.

164
Alex
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
222
Šime Vidas

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

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

Перезагрузить iframe с помощью jQuery

сделать ссылку внутри iframe, скажем с id = "reload", затем использовать следующий код

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

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

Перезагрузить iframe с HTML (без требования Java Script)

У этого есть более простое решение: которое работает без javaScript в (FF, Webkit)

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

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

Когда вы нажимаете этот якорь, он просто обновляет ваш iframe

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

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

не нужно URL страницы, потому что -> target = "_ SELF" сделает это за вас

9
user1008545

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

$('#iframeid',window.parent.document).attr('src',$('#iframeid',window.parent.document).attr('src'));
8
elin3t

Просто отвечу взаимностью Алекса, но с помощью jQuery

var currSrc = $("#currentElement").attr("src");
$("#currentElement").attr("src", currSrc);
5
Matt Asbury

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

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

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

3
Mark

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

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

Просто отвечу взаимностью Алекса, но с помощью jQuery:

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

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

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

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

2
Akm16
$('IFRAME#currentElement').get(0).contentDocument.location.reload()
2
Pavel

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

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

Кнопки, похожие на Twitter, имеют вид: .../Tweet_button.html#&_version=2&count=none&etc=...

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

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

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

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

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

2
greg.kindel

Это возможно с простым 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();
}
1
Keith Pastorek

РЕШИТЬ! Я регистрируюсь в stockoverflow, чтобы поделиться с вами единственным решением (по крайней мере, в 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;
}

Надеюсь это поможет.

0
hubert17

вы можете сделать это так

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });
0
aitbella
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

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

    ifrX.src = ifrX.contentWindow.location

это полезно, особенно когда <iframe> является целью <form>

0
bortunac

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

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

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }
0
wesley7

Вам нужно использовать 

[0] .src

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

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}
0
Mau