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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Он перезагрузит iframe, даже через домены! Протестировано с помощью IE7/8, Firefox и Chrome.

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Я скорее возьму 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 м) и Opera (12.0.2) в Windows.

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

Ответ 8

для нового URL

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

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

перезарядка

location.reload();

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

Ответ 9

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

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

Ответ 10

В IE8 с использованием .Net установка iframe.src в первый раз в порядке, но второй раз iframe.src не поднимает page_load страницы iframed. Чтобы решить эту проблему, я использовал iframe.contentDocument.location.href = "NewUrl.htm".

Откройте его при использовании jQuery thickBox и попытайтесь повторно открыть ту же страницу в толстопанельном iframe. Затем он просто показал более раннюю страницу, которая была открыта.

Ответ 11

Используйте перезагрузку для IE и установите src для других браузеров. (перезагрузка не работает на FF) проверены на IE 7,8,9 и Firefox

if(navigator.appName == "Microsoft Internet Explorer"){
    window.document.getElementById('iframeId').contentWindow.location.reload(true);
}else {
    window.document.getElementById('iframeId').src = window.document.getElementById('iframeId').src;
}

Ответ 12

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

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

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

Ответ 13

Рассматривали ли вы добавление к URL-адресу бессмысленного параметра строки запроса?

<iframe src="myBaseURL.com/something/" />

<script>
var i = document.getElementsById("iframe")[0],
    src = i.src,
    number = 1;

//For an update
i.src = src + "?ignoreMe=" + number;
number++;
</script>

Это не будет видно, и если вы знаете о безопасном параметре, это должно быть хорошо.

Ответ 14

Если вы используете Jquery, тогда есть один код строки.

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

и если вы работаете с одним и тем же родителем, то

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

Ответ 15

Если все вышеперечисленное не работает для вас:

window.location.reload();

Это почему-то обновило мой iframe вместо всего script. Может быть, потому, что он помещается в самом кадре, а все эти решения getElemntById работают, когда вы пытаетесь обновить кадр из другого фрейма?

Или я не понимаю это полностью и болтаю, так или иначе, это работало для меня как шарм:)

Ответ 16

<script type="text/javascript">
  top.frames['DetailFrame'].location = top.frames['DetailFrame'].location;
</script>

Ответ 17

Если вы попробовали все другие предложения и не могли заставить их работать (например, я не мог), здесь вы можете попробовать, что может быть полезно.

HTML

<a class="refresh-this-frame" rel="#iframe-id-0">Refresh</a>
<iframe src="" id="iframe-id-0"></iframe>

JS

$('.refresh-this-frame').click(function() {
    var thisIframe = $(this).attr('rel');
    var currentState = $(thisIframe).attr('src');
    function removeSrc() {
        $(thisIframe).attr('src', '');
    }
    setTimeout (removeSrc, 100);
    function replaceSrc() {
        $(thisIframe).attr('src', currentState);
    }
    setTimeout (replaceSrc, 200);
});

Сначала я попытался сэкономить время на RWD и кросс-браузерном тестировании. Я хотел создать быструю страницу, в которой размещалась куча iframe, организованная в группы, которые я бы показывал/скрывал по своему усмотрению. Логически вы хотите иметь возможность легко и быстро обновлять любой данный фрейм.

Я должен отметить, что проект, над которым я сейчас работаю, тот, который используется на этом тестовом посте, - это сайт с одной страницей с индексированными местоположениями (например, index.html # home). Возможно, это имело какое-то отношение к тому, почему я не смог получить какие-либо другие решения для обновления моего конкретного фрейма.

Сказав это, я знаю, что это не самая чистая вещь в мире, но она работает для моих целей. Надеюсь, это поможет кому-то. Теперь, если бы я мог понять, как сохранить iframe от прокрутки родительской страницы каждый раз, когда анимация внутри iframe...

EDIT: Я понял, что это не "обновляет" iframe, как я надеялся. Однако он перезагрузит исходный источник iframe. Все еще не могу понять, почему я не мог получить какие-либо другие варианты работы.

UPDATE: Причина, по которой я не мог получить какие-либо другие методы для работы, заключается в том, что я тестировал их в Chrome, а Chrome не разрешает вам получать доступ к содержимому iframe (Объяснение: Это вероятно, что будущие выпуски Chrome поддерживают contentWindow/contentDocument, когда iFrame загружает локальный файл html из локального html файла?), если он не происходит из того же места (насколько я понимаю). При дальнейшем тестировании я также не могу получить доступ к contentWindow в FF.

ИЗМЕНЕННЫЙ JS

$('.refresh-this-frame').click(function() {
    var targetID = $(this).attr('rel');
    var targetSrc = $(targetID).attr('src');
    var cleanID = targetID.replace("#","");     
    var chromeTest = ( navigator.userAgent.match(/Chrome/g) ? true : false );
    var FFTest = ( navigator.userAgent.match(/Firefox/g) ? true : false );      
    if (chromeTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }
    if (FFTest == true) {
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc() {
            $(targetID).attr('src', targetSrc);
        }
        setTimeout (replaceSrc, 200);
    }       
    if (chromeTest == false && FFTest == false) {
        var targetLoc = (document.getElementById(cleanID).contentWindow.location).toString();
        function removeSrc() {
            $(targetID).attr('src', '');
        }
        setTimeout (removeSrc, 100);
        function replaceSrc2() {
            $(targetID).attr('src', targetLoc);
        }
        setTimeout (replaceSrc2, 200);
    }
});

Ответ 18

Использование self.location.reload() перезагрузит iframe.

<iframe src="https://vivekkumar11432.wordpress.com/" width="300" height="300"></iframe>
<br><br>
<input type='button' value="Reload"  onclick="self.location.reload();" />

Ответ 19

Для целей отладки можно открыть консоль, изменив контекст выполнения на фрейм, который он хочет обновить, и выполните document.location.reload()

Ответ 20

Другое решение.

const frame = document.getElementById("my-iframe");

frame.parentNode.replaceChild(frame.cloneNode(), frame);

Ответ 21

Теперь, чтобы выполнить эту работу на chrome 66, попробуйте следующее:

const reloadIframe = (iframeId) => {
    const el = document.getElementById(iframeId)
    const src = el.src
    el.src = ''
    setTimeout(() => {
        el.src = src
    })
}