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

Question

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

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

Во многих отношениях это похоже на предложение replace(), но у меня были некоторые проблемы, когда я пробовал этот подход с помощью History.js и управления состояниями вручную.

var container = iframe.parent();

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

container.append(iframe);

Answer 5

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

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

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

По этому:

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

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

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

Answer 6

Попробуйте использовать эту функцию для замены старого 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 в историю браузера.

Answer 7

Используйте метод 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')
}

Answer 8

Ответ JDandChips у меня работал на iframe перекрестного происхождения (youtube), вот он в vanilla JS (без JQuery):

const container = iframe.parentElement;

container.removeChild(iframe);

iframe.setAttribute('src', 'about:blank');

container.appendChild(iframe);

Answer 9

Самое простое и быстрое решение для загрузки
Используйте 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:" будут работать.