Який найкращий спосіб перезавантажити / оновити кадр?


242

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


4
Чи є причина, чому встановлення srcатрибута для себе не є чистою? Здається, це єдине рішення, яке працює в браузерах та в усіх доменах
— mirhagk

Встановлення srcатрибута для себе спричиняє проблеми, якщо у вас є посилання в іншому місці, яке націлене на <iframe>. Тоді кадр покаже початкову сторінку, як було створено спочатку.
— Е. ван Путтен

Відповіді:


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

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


26
Насправді, такий підхід не працював для мене в Chrome. Не було властивості "contentWindow". Хоча можна було використати document.getElementById ('some_frame_id'). Location.reload (); Метод, який працював як для FF, так і для Chrome, був document.getElementById ('iframeid'). Src = document.getElementById ('iframeid'). Src
— Майк Бевз

1
@MikeBevz може location.reload також доступний за допомогою селектора Jquery?
— Jitender Mahlawat

2
абсолютно це робота, але дотримуючись тієї ж політики походження домену == a
— Bobby Stenly

6
frames[1].location.href.reload()а window.frames['some_frame_id'].location.href.reload()також можна використовувати
— Daniël W. Crompton

1
Якщо ви не можете отримати доступ до вікна iframe, вам доведеться змінити атрибут src тегу iframe.
— Maciej Krawczyk

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

Він буде перезавантажений iframeнавіть у різних доменах! Тестовано на IE7 / 8, Firefox та Chrome.


68
document.getElementById('iframeid').src += '';також працює: jsfiddle.net/Daniel_Hug/dWm5k
— Web_Designer

3
І що саме ви робите, якщо джерело iframe змінилося після його додавання на сторінку?
— Niet the Dark Absol

Мені працює на Chrome ver33! Дивно, що ми не можемо просто використовувати, reloadале це дозволено.
— Лука

8
Зауважте, що якщо iframe src має хеш у ньому (наприклад http://example.com/#something), це не перезавантажить кадр. Я використовував підхід додавання параметра запиту, що викидається, ?v2до URL перед хешем.
— користувач85461

Це змушує iframe прокручуватися назад до вершини.
— MrTux

60

Якщо використовується jQuery, це, здається, працює:

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

Я сподіваюсь, що це не надто негарно для stackoverflow.


6
Це, без jQuery: var iframe = document.getElementById("your_iframe"); iframe.src = src;
— Seagrass

Будь-ласка, зверніть увагу на майбутніх людей, що це (та звичайне рішення js) найкраще використовувати, оскільки це крос-платформа та працює в усіх доменах.
— mirhagk

13
@Seagrass Я думаю, ти маєш на увазі:var iframe = document.getElementById("your_iframe"); iframe.src = iframe.src;
— maxisme

15

Додайте порожній простір, також автоматично завантажте iFrame.

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


8

Через ту саму політику щодо початкового коду , це не буде працювати при зміні рамки, що вказує на інший домен. Якщо ви можете орієнтуватися на новіші веб-переглядачі, подумайте про використання перехресних документів HTML5 . Ви переглядаєте веб-переглядачі, які підтримують цю функцію: http://caniuse.com/#feat=x-doc-messaging .

Якщо ви не можете використовувати функцію HTML5, ви можете дотримуватися описаних тут прийомів: http://softwareas.com/cross-domain-communication-with-iframes . Цей запис у блозі також добре допомагає визначити проблему.


7

Я просто зіткнувся з цим у хромі, і єдине, що працювало, - це видалення та заміна iframe. Приклад:

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

Досить простий, не висвітлений в інших відповідях.


4

для нової URL-адреси

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

Метод призначення () завантажує новий документ.

перезавантажити

location.reload();

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


4

Проста заміна srcатрибута елемента iframe в моєму випадку не була задовільною, тому що ви побачите старий вміст до завантаження нової сторінки. Це краще працює, якщо ви бажаєте отримати миттєвий візуальний відгук:

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

Я щойно перевірив той же підхід, але без setTimeout - і він працював на мене. власне, просто iframe.setAttribute ('src', iframe.getAttribute ('src'))
— bonbonez

3

Вдосконалення посту yajra ... Мені подобається думка, але ненавиджу ідею виявлення браузера.

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

Тож замість того, щоб дивитися на навігатор.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.

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


3

Тепер, щоб зробити цю роботу на Chrome 66, спробуйте:

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

2

У IE8, використовуючи .Net, налаштування параметра в iframe.srcперший раз нормально, але встановлення iframe.srcдругого разу не підвищує page_loadзначення iframed сторінки. Для її вирішення я використав iframe.contentDocument.location.href = "NewUrl.htm".

Відкрийте для себе, коли використовували jQuery thickBox і спробували знову відкрити ту саму сторінку в кадрі iframe. Тоді він просто показав відкриту попередню сторінку.


2

Використовуйте перезавантаження для 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;
}

2

Якщо ви використовуєте Jquery, то є один код рядка.

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

і якщо ви працюєте з тим самим батьком, то

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

1

Якщо все вищезазначене не працює для вас:

window.location.reload();

Це чомусь оновило мій кадр замість цілого сценарію. Може тому, що він розміщений у самому кадрі, тоді як усі ці рішення getElemntById працюють, коли ви намагаєтесь оновити кадр з іншого кадру?

Або я не розумію цього в повній мірі і розмовляю по-хамськи, інакше це спрацювало для мене як шарм :)


1

Чи вважаєте ви додавати до 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>

Він не буде видно, і якщо ви знаєте, що параметр є безпечним, тоді він повинен бути добре.


1

Ще одне рішення.

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

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

Недоліком цього є модифікація кореневого документа DOM-дерева і спричинить перефарбування. Я використавvar url = ifr.src; ifr.src = null; ifr.src = url;
— Pocketsand

Я думаю, що перезавантаження iframe завжди спричинить перефарбування незалежно від використовуваного коду.
— Василе Олександру Пеште

1

Використання 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();" />


1
що перезавантажте все головне вікно
— pery mimon

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

1
Не вибір, який я б використав, але я думаю, що це зробить. З деяким додатковим кодом, який ви могли б додати.
— 1212

0

Якщо ви спробували всі інші пропозиції, і не вдалося змусити жодної з них (як я не зміг), ось що ви можете спробувати, що може бути корисним.

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. Досі не можу зрозуміти, чому я не зміг отримати жоден з інших варіантів роботи.

ОНОВЛЕННЯ . Причиною того, що я не зміг застосувати жоден з інших методів роботи, є те, що я тестував їх у Chrome, а Chrome не дозволить вам отримати доступ до вмісту iframe (Пояснення: Чи ймовірно, що майбутні випуски вмісту підтримки ChromeWindow / 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);
    }
});

0

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.