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

Question

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

Answer 1

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

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

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

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

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

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

Answer 8

для получения нового URL-адреса

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

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

перезарядить

location.reload();

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

Answer 9

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

Я скорее придерживаюсь мнения 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, и сделать что-нибудь разумное, если все остальное не удастся.Требуется немного больше работы для тестирования ваших объектов перед их использованием, но, ИМО, это позволяет улучшить и сделать более отказоустойчивый код.

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

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

Answer 10

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

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

Answer 11

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

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

Answer 12

Используйте reload для 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;
}

Answer 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>

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

Answer 14

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

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

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

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

Answer 15

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

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

Answer 16

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

window.location.reload();

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

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

Answer 17

Используя 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();" />

Answer 18

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

Answer 19

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

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 и кроссбраузерного тестирования.Я хотел создать быструю страницу, на которой размещалась бы куча фреймов, организованных в группы, которые я бы показывал / скрывал по своему желанию.Логично, что вы хотели бы иметь возможность легко и быстро обновлять любой заданный кадр.

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

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

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

Обновить: Причина, по которой я не смог заставить работать ни один из других методов, заключается в том, что я тестировал их в 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);
    }
});

Answer 20

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

Answer 21

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

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

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