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

Question

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

Answer 1

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

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 есть анимация ...

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