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

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

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

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

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

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

При использовании jQuery это работает:

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

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

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

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

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

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

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

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

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

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

для нового URL

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

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

перезарядка

location.reload();

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

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

var url = iframeEl.src;
iframeEl.src = 'about:blank';
setTimeout(function() {
    iframeEl.src = url;
}, 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.

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

Теперь, чтобы сделать эту работу на Chrome 66, попробуйте это:

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

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

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

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

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

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

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

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

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

window.location.reload();

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

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

Вы рассматривали добавление к 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>

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

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

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

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

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

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

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

Сказав это, я знаю, что это не самая чистая вещь в мире, но она работает для моих целей. Надеюсь, это кому-нибудь поможет. Теперь, если бы я только мог понять, как не позволить 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);
    }
});

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

Использование 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();" />