Кнопки назад и вперед в фрейме - PullRequest
25 голосов
/ 15 июля 2010

Как «внедрить» кнопки назад и вперед в iframe с помощью JS?

Ответы [ 5 ]

37 голосов
/ 15 июля 2010

Используйте объект window.history.

// For the current window
window.history.back();     
window.history.forward();

// For an iframe's window
iframe.contentWindow.history.back(); 
iframe.contentWindow.history.forward();

или

iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1);  // forward

https://developer.mozilla.org/en/dom/window.history

8 голосов
/ 15 июля 2010

Кнопка внутри кадра:

<input type="button" value="Back" onclick="history.back()">

Кнопка внутри родительского кадра:

<input type="button" value="Back" onclick="frame_name.history.back()">
7 голосов
/ 11 апреля 2017

Обновление для 2017: нет никакого способа сделать это, если источник содержимого iframe отличается от источника вложенной страницы - если только вы не управляете контентом в удаленном источнике и не можете принимать события postMessage , Если источник один и тот же, более старые ответы по-прежнему работают.

1 голос
/ 13 февраля 2016

Спасибо всем за ваши ценные советы :-) Мне удалось начать с ваших предложений и развить их чуть дальше.

У меня есть веб-страница с двумя вертикальными фреймами: узкий столбец слева для строки меню (frame name = "menu") и главное окно справа (frame name = "main"), охватывающее большинство ширины. То есть index.htm содержит только набор фреймов по всей поверхности. Теперь ... чтобы решить общую проблему «обратной» навигации в моем простом наборе кадров, мне удалось использовать предложение Павла Страхова с кнопкой ввода type = button - только мне пришлось более подробно проработать путь DOM. Поскольку у меня есть кнопка в рамке «меню» слева, а содержимое для навигации происходит в «главном» кадре справа, эти два кадра - это братья и сестры, а не родитель и потомок. Таким образом, в моем случае мне пришлось пройти один уровень вверх по иерархии, прежде чем я смог сослаться на фрейм родственника. В результате, в моем случае элемент кнопки читает

<input type="button" value="Back in the main frame" onclick="window.parent.main.history.back()">

или вы можете ссылаться на фрейм по порядковому номеру (с нуля) в массиве, а не по имени:

<input type="button" value="Back in the main frame" onclick="window.parent.frames[1].history.back()">

Я также заметил, что все свойство 'onclick' может быть привязано практически к любому другому видимому элементу, такому как anchor / href (A), DIV или P. Я тоже пробовал их, чтобы сделать кнопку «назад» более похожей на остальную часть моего меню, но в итоге вернулась к грубому «застенчивому» виду и поведению, чтобы сделать кнопку более заметной / заметной / отчетливой. Это выглядит сырым, но это работает лучше всего.

На самом деле, в моем случае, windows.parent на самом деле относится к верхнему фрейму, поэтому есть другой способ обратиться к моему фрейму, называемому "основным", и попросить его вернуться назад: onclick="top.main.history.back()". Или, видимо, onclick="top.frames['main'].history.back()".

А потом я узнал, что он все еще не работает надежно. Причуды, обнаруженные до сих пор:

  • в Firefox около v42, если вы вернетесь назад, а затем нажмете кнопку «вперед» браузера, еще несколько щелчков URL-адреса вниз по дороге, вы можете получить забавные результаты: иногда функция history.back () в кадре будет приводим к history.back () в верхнем фрейме без видимой причины.

  • в Firefox около v42, иногда собственная кнопка браузера «назад» приводит к покадровой history.back (), а не к верхней рамке history.back (), без видимой причины (= непоследовательное поведение родной кнопки "назад")

  • независимо от марки и версии браузера, некоторые сайты, по-видимому, очищают историю своего базового фрейма при загрузке сайта. Если вы загружаете такой сайт во фрейм, то для каждого фрейма history.back () ничего не делает.

Возможно, это еще одна причина (кроме гомогенного стиля), почему вряд ли кто-либо использует старые добрые HTML-фреймы. Получающееся поведение не очень детерминировано / предсказуемо / очевидно для пользователя. Вероятно, поэтому веб-мастера предпочитают фиксированные столбцы, реализованные в виде таблиц или более современными средствами. Или, может быть, это потому, что в настоящее время все используют CMS.

0 голосов
/ 07 апреля 2018

Как уже упоминалось, это серьезная проблема в наши дни из-за, казалось бы, некорректных изменений в системе безопасности.В частности, как говорит mrec в предыдущем комментарии, Уродливая проблема здесь заключается в том, что когда ваш iframe уже находится в начале своей собственной истории - и нет способа обнаружить это условие в скрипте - выполнение другого возврата () вместо этого будет эффективно вызывать back () на содержащей странице, что почти наверняка не то, что вам нужно. - действительно, это была непреодолимая проблема для меня.

Это решение проверенная версия решения, упомянутая в ответах, в которой история обрабатывается вручную, и пользователь не может вернуться назад до начала истории.Он использовался в http://www.0AV.com для встроенной справки и здесь был упрощен, что могло привести к ошибкам в проверенной версии.Это также, вероятно, потребует доработки для вашего требования.

JS на странице хоста ..

var Hstory = [], sorc = '';

window.onmessage = function(e){ //# message fired by iFrame with onmousedown="window.top.postMessage('...','*');" or etc.
    var hilitedCrefText = e.data;    
    switch(String(hilitedCrefText)){
        case "Help_Home": //# defined in iframe
            sorc = "/index.html"; //# eg
            HistryManager(sorc); //# store
            break;
        case "Help_Back": //# defined in iframe
            sorc = HistryManager(); //# retrieve
            break;
        default: //# anything else that is generated by a link.
            HistryManager(sorc);
    }    
    if( sorc.length > 0 ) document.getElementById('your_iframe_id').src = sorc;  
}


function HistryManager(toPush) { //# history_handler
    if (toPush != undefined) {
        Hstory.push(toPush);
    }else{
        if( Hstory.length > 1 ){
            var az = Hstory[Hstory.length-2]; //..
            //# -2 is: -1 as is base 1, + -1 as it just stored this location, so must go back to PRIOR locastion.
            Hstory = Hstory.slice(0, -1); // Reduce array (Use neg num to select from end of array)
            return az;
        }else{
            alert('End of history. \n\n(Can not go further Back).');
            return '';
        }
    }
} 

JS / HTML на странице iframe ..

    <button onclick="window.top.postMessage('Help_Back','*');">Back</button>
    <button onclick="window.top.postMessage('Help_Home','*');">Home</button>

    <button onclick="window.top.postMessage('helppage1.html','*');">HelpOn1</button>
    <button onclick="window.top.postMessage('helppage2.html','*');">HelpOn2</button>

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

Надеюсь, что это кому-то поможет.(Совет: я неправильно написал некоторые из моих переменных, чтобы избежать путаницы с системными переменными).Код является дополнением к Codiad, и, следовательно, является лицензией MIT.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...