Перезагрузите iframe с помощью jQuery - PullRequest
142 голосов
/ 22 ноября 2010

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

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

Ответы [ 18 ]

2 голосов
/ 30 декабря 2011

Если вы работаете с несколькими доменами, простая установка 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, благодаря чему эта кнопка назад () работает должным образом. Также приятно не иметь таймера.

1 голос
/ 28 июня 2011

Это возможно с простым 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 голос
/ 16 февраля 2017

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

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

 for (var i = 0, f; f = f_list[i]; i++) {
                            f.src = f.src;
                        }
0 голосов
/ 10 февраля 2016

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

[0] .src

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

setInterval(refreshMe, 5000);
function refreshMe() {
    $("#currentElement")[0].src = $("#currentElement")[0].src;   
}
0 голосов
/ 11 апреля 2013

РЕШИТЬ!Я регистрируюсь в 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 голосов
/ 02 марта 2012
    ifrX =document.getElementById('id') //or 
    ifrX =frames['index'];

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

    ifrX.src = ifrX.contentWindow.location

это полезно, особенно когда

0 голосов
/ 04 марта 2019

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

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });
0 голосов
/ 10 октября 2012

Ниже решение будет работать наверняка:

window.parent.location.href = window.parent.location.href;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...