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


151

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

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

3
Документ iframe находится в другом домене?
Пекка

У вас есть доступ к коду сайта, который появляется в iFrame?
Мэтт Эсбери

Показать больше кода - HTML для обоих iFrames, а также код JavaScript, который вы используете для внесения изменений. Трудно понять, в чем проблема, видя только то, что вы включили до сих пор.
Бен Ли

У меня есть доступ к коду yes, и iframe находится в другом домене
Matt Elhotiby

@Matt, фреймы не могут вносить изменения в содержимое фреймов в других доменах. Примеры того, как обойти это ограничение междоменных сценариев, см. Здесь: softwareas.com/cross-domain-communication-with-iframes
Бен Ли,

Ответы:


174

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

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

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

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

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

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


19
Его вопрос состоял в том, как сделать это с помощью jQuery, а не Javascript. Правильный ответ jQuery приведен в посте Симе Видаса ниже.
FastTrack

2
Скрипт не работает в моем IE9 (не проверять другую версию). Изменение contentDocument к contentWindow делает его работу на IE9. document.getElementById(FrameID).contentWindow.location.reload(true);
Хан Хе

3
Это не сработало для меня, однако я сделал что-то вроде iframe.contentDocument.location=iframe.src; этого, который работал отлично
glitchyme

3
Этот Jquery работал для меня как очарование:$('#map_iframe').attr('src', $('#map_iframe').attr('src'));
Topher Hunt

234
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

2
+1 только за одну ссылку на удостоверение личности, реже изменить одну, но забыть другую
Мэтью Лок

1
@NicolaeSurdu Кроме того, это:(function (elem) { elem.src = elem.src; }($('#iframe')[0]));
Шиме Видас

1
Чтобы перезагрузить один iframe из другого, измените его на: $ ('# iframe', window.parent.document) .attr ('src', function (i, val) {return val;});
Тиллито

В Internet Explorer такие решения как JavaScript document.getElementById(FrameID).contentWindow.location.reload(true);не работают должным образом. Этот ответ работает лучше.
БеязКаплан

55

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

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

3
Преимущество этого решения - удобочитаемость. Хотя это и не так эффективно, как ответ Видаса, очевидно, что происходит.
Роберт Эггинтон

Я согласен, я также предпочитаю удобочитаемость этого решения
Йонатан Наор

var f = $('#iframeX') ; f.attr( 'src', f.attr( 'src' ))может быть более надежным в обслуживании и чтении
Андреас Дитрих

9

Перезагрузите 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>

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

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

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

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


9

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

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

Это решение, если вы хотите обновить текущий iframe, где мы находимся. Большое спасибо!
DaemonHK

5

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

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


3

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

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

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


2

Если вы работаете с несколькими доменами, простая установка 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

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

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

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

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

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



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

1

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

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

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

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

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

    ifrX.src = ifrX.contentWindow.location

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


почему jQuery ?! когда доступны простые js
bortunac

0

РЕШИТЬ! Я регистрируюсь в 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;
}

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


Многочисленные ошибки в этом ответе: 1. не является компонентом ASP.NET, поэтому runat="server"не применяется; 2. Почему все заглавные буквы для IFRAME? 3. значения атрибута измерения не имеют единиц измерения; 4. frameborderустарел
Raptor

0

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

[0] .src

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

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

0

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

$('.refrech-iframe').click(function(){
        $(".myiframe").attr("src", function(index, attr){ 
            return attr;
        });
    });

-5

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

window.parent.location.href = window.parent.location.href;
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.