Перезагрузите IFRAME без добавления в историю


Я меняю IFRAME в src для того, чтобы перезагрузить его, его работа нормально и стрельба onload событие, когда его HTML загружается.

но он добавляет запись в историю, которую я не хочу. Есть ли способ перезагрузить IFRAME и все же не влиять на историю?

8 57

8 ответов:

вы можете использовать javascript location.replace:

window.location.replace('...html');

заменить текущий документ с один по указанному URL-адресу. Этот отличие от метода assign () заключается в следующем что после использования заменить () текущий страница не будет сохранена в сеансе история, то есть пользователь не будет возможность использовать кнопку Назад, чтобы перейдите к нему.

использование replace () - это только вариант с вашим собственным доменом iframes. Он не работает на удаленных сайтах (например: кнопка twitter) и требует некоторых знаний, специфичных для браузера, для надежного доступа к дочернему окну.

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

Edit: JDandChips правильно упоминает, что вы можете удалить из DOM, modifiy и повторно добавить. Строить свежий не требуется.

как Грег сказал выше .заменить () функция, как это сделать. Я не могу понять, как ответить на его ответ*, но трюк заключается в том, чтобы ссылаться на свойство iframes contentWindow.

var ifr = document.getElementById("iframeId");
ifr.contentWindow.location.replace("newLocation.html"); 

*только что узнал, что мне нужно больше репутации, чтобы комментировать ответы.

альтернативным методом воссоздания iframe было бы удалить iframe из DOM, изменить src, а затем снова добавить его.

во многом это похоже на replace() предложение, но у меня были некоторые проблемы, когда я попробовал этот подход с историей.JS и управление состояниями вручную.

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);

одним из решений является использование object тег вместо iframe - тег.

замена этого:

<iframe src="http://yourpage"/>

это:

<object type="text/html" data="http://yourpage"/>

позволит вам обновить data атрибут без влияния на историю. Это полезно, если вы используете декларативную структуру, такую как React.js где вы не должны делать никаких императивных команд для обновления DOM.

подробнее о различиях между iframe и object:использование Iframe или Тег объекта для вставки веб-страниц в другой

попробуйте использовать эту функцию для замены старого iframe на новый iframe, который копируется из старого:

function setIFrameSrc(idFrame, url) {
    var originalFrame = document.getElementById(idFrame);
    var newFrame = document.createElement("iframe");
    newFrame.id = originalFrame.getAttribute("id");
    newFrame.width = originalFrame.getAttribute("width");
    newFrame.height = originalFrame.getAttribute("height");
    newFrame.src = url;    
    var parent = originalFrame.parentNode;
    parent.replaceChild(newFrame, originalFrame);
}

используйте его так:

setIFrameSrc("idframe", "test.html");

этот способ не добавит URL iframe в историю браузера.

самое простое и быстрое решение для загрузки
Используйте window.location.replace чтобы не обновлять историю при загрузке страницы или фрейма.

для ссылок это выглядит так:

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>

или

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>



но если вы хотите, чтобы он не действовал из ссылки, а действовал автоматически при загрузке фрейма, то из iframe вы должны поместить это в тело файла iframe раздел:

onload="window.location.replace ('http://www.YourPage.com');"


если по какой-то причине onload не загружается в iframe, то поместите имя целевого фрейма вместо окна в синтаксис следующим образом:

onload="YourTarget.location.replace ('http://www.YourPage.com');"



Примечание: для этого скрипта все onclick,onmouseover,onmouseout,onload и href="javascript:" будет работать.

использовать replace метод обхода добавления URL-адреса iframe в историю:

HTML:

<iframe id="myIframe" width="100%" height="400" src="#"></iframe>

JavaScript:

var ifr = document.getElementById('mIframe')
if (ifr) {
  ifr.contentWindow.location.replace('http://www.blabla.com')
}