Каков наилучший способ перезагрузить / обновить iframe?

Question

Я бы хотел перезагрузить <iframe> с помощью JavaScript. Наилучший способ, который я нашел до сих пор, - это присвоить атрибут iframe src самому себе, но он не очень чистый. Есть идеи?

Answer 1

document.getElementById('some_frame_id').contentWindow.location.reload();

будьте осторожны, в Firefox window.frames[] не может быть проиндексирован по id, но по имени или индексу

Answer 2

document.getElementById('iframeid').src = document.getElementById('iframeid').src

Это перезагрузит iframe даже в разных доменах! Протестировано с IE7 / 8, Firefox и Chrome.

Answer 3

Если вы используете jQuery, похоже, это работает:

$('#your_iframe').attr('src', $('#your_iframe').attr('src'));

Я надеюсь, что это не слишком уродливо для stackoverflow.

Answer 4

window.frames['frameNameOrIndex'].location.reload();

Answer 5

Добавьте пустое место и автоматически перезагрузите iFrame.

document.getElementById('id').src += '';

Answer 6

Из-за одинаковой политики это не будет работать при изменении фрейма iframe, указывающего на другой домен. Если вы можете настроить таргетинг на новые браузеры, рассмотрите возможность использования Перекрестного обмена сообщениями в HTML5 . Вы просматриваете браузеры, которые поддерживают эту функцию здесь: http://caniuse.com/#feat=x-doc-messaging.

Если вы не можете использовать функциональность HTML5, то вы можете следовать трюкам, изложенным здесь: http://softwareas.com/cross-domain-communication-with-iframes. Эта запись в блоге также помогает определить проблему.

Answer 7

для нового URL

location.assign("http:google.com");

Метод assign () загружает новый документ.

перезарядка

location.reload();

Метод reload () используется для перезагрузки текущего документа.

Answer 8

Я только что столкнулся с этим в chrome, и единственное, что сработало, это удаление и замена iframe. Пример:

$(".iframe_wrapper").find("iframe").remove();
var iframe = $('<iframe src="' + src + '" frameborder="0"></iframe>');
$.find(".iframe_wrapper").append(iframe);

Довольно просто, не охвачено другими ответами.

Answer 9

Простая замена атрибута src элемента iframe в моем случае была неудовлетворительной, поскольку можно было увидеть старое содержимое, пока новая страница не загрузится Это работает лучше, если вы хотите дать мгновенную визуальную обратную связь:

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 10);

Answer 10

Уточнение поста Яджры ... Мне нравится эта мысль, но я ненавижу идею обнаружения браузера.

Я предпочитаю ppk использовать обнаружение объектов вместо обнаружения в браузере, (http://www.quirksmode.org/js/support.html), потому что тогда вы на самом деле тестируете возможности браузера и действуете соответственно, а не тому, на что, на ваш взгляд, способен браузер в то время. Кроме того, не требуется так много разборов паролей идентификатора браузера и не исключаются браузеры с отличными возможностями, о которых вы ничего не знаете.

Итак, вместо того, чтобы смотреть на navigator.AppName, почему бы не сделать что-то подобное, фактически проверяя используемые вами элементы? (Вы можете использовать блоки try {}, если хотите стать еще интереснее, но у меня это получилось.)

function reload_message_frame() {
    var frame_id = 'live_message_frame';
    if(window.document.getElementById(frame_id).location ) {  
        window.document.getElementById(frame_id).location.reload(true);
    } else if (window.document.getElementById(frame_id).contentWindow.location ) {
        window.document.getElementById(frame_id).contentWindow.location.reload(true);
    } else if (window.document.getElementById(frame_id).src){
        window.document.getElementById(frame_id).src = window.document.getElementById(frame_id).src;
    } else {
        // fail condition, respond as appropriate, or do nothing
        alert("Sorry, unable to reload that frame!");
    }
}

Таким образом, вы можете попробовать столько разных перестановок, сколько вам нужно или необходимо, не вызывая ошибок javascript, и сделать что-то разумное, если ничего не помогает. Это немного больше работы для проверки ваших объектов перед их использованием, но, IMO, делает для лучшего и более отказоустойчивого кода.

Работал для меня в IE8, Firefox (15.0.1), Chrome (21.0.1180.89 m) и Opera (12.0.2) в Windows.

Может быть, я мог бы сделать еще лучше, фактически протестировав функцию перезагрузки, но мне этого сейчас достаточно. :)