Как сделать историю в браузере wpf

Обновлено: 04.07.2024

Пример метода pushState()

Метод pushState()

Метод pushState() принимает три параметра: объект состояния, заголовок (в данный момент игнорируется) и (необязательно) параметр "URL".

Давайте более подробно рассмотрим каждый и этих трёх параметров.

state object Объект состояния – это JavaScript-объект, связанный с новой записью в истории, созданной pushState() . Всякий раз, когда пользователь переходит к новому состоянию, происходит событие popstate , а свойство state этого события содержит копию объекта состояния с записями истории. Объект состояния может быть чем-угодно, что может быть сериализовано. Поскольку Firefox сохраняет объекты состояния на диске пользователя, чтобы их можно было восстановить после перезапуска браузера, мы накладываем ограничение в 640 тысяч символов на сериализованное представление объекта состояния. Если вы передаёте объект состояния, чьё сериализованное представление больше этого значения, метод pushState() выдаст исключение. Если вам нужно хранилище большего размера, следует рассмотреть использование sessionStorage и/или localStorage . title Заголовок - все браузеры, кроме Safari, на данный момент игнорируют этот параметр, но могут начать использовать в будущем. Ввиду будущих изменений метода, безопасным решением является передача пустой строки. В качестве альтернативы вы можете передать короткий заголовок для состоянии, в которое переходите. URL Через этот параметр передаётся URL-адрес новой новый записи в истории. Обратите внимание, что браузер не будет пытаться загрузить данный URL сразу после вызова pushState() , но может попытаться сделать это позже, например, после того, как пользователь перезапустит браузер. Новый URL-адрес не обязан быть абсолютным; если он относительный, то определяется относительно текущего URL. Новый URL должен вести на тот же домен, протокол и порт, иначе pushState() выдаст исключение. Данный параметр не является обязательным; если он не указан, будет использоваться URL текущего документа.

Примечание: Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) и до Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), переданный объект сериализуется с помощью JSON. Начиная с Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), объект сериализуется с помощью алгоритма структурированного клонирования. Это позволяет безопасно передавать более широкий спектр объектов.

Но у pushState() есть несколько преимуществ:

Обратите внимание, что pushState() никогда не вызывает событие hashchange , даже если новый URL отличается от старого только хешем.

В XUL-документах он создаёт указанный XUL-элемент

В других документах он создаёт элемент с null namespace URI.

Метод replaceState()

history.replaceState() работает точно так же, как history.pushState() , за исключением того, что replaceState() изменяет текущую запись истории вместо создания новой записи. Обратите внимание, что он не предотвращает создание новой записи в глобальной истории браузера.

replaceState() особенно полезен, когда вы хотите обновить объект состояния или URL текущей записи в истории в ответ на какое-то действие пользователя.

Пример метода replaceState()

Объяснение этих двух строк можно найти в приведённом выше разделе пример метода pushState().

Событие popstate

Событие popstate вызывается в окне каждый раз, когда активная запись в истории меняется. Если запись в истории, которая активируется, была создана с помощью вызова pushState или активирована вызовом replaceState , свойство state события popstate содержит копию записи в истории объекта события.

WPF стирает границы между традиционными настольными и веб-приложениями. За счет использования страниц можно создавать WPF-приложения с возможностями навигации в веб-стиле. ХВАР позволяют выполнять WPF-приложения внутри окна браузера. С применением элемента управления Frame можно проделывать обратное, размещая HTML-страницу в окне WPF.

Однако при использовании элемента Frame для отображения HTML-содержимого все возможности по управлению содержимым утрачиваются. Не остается никакого способа для его инспектирования или для следования ему, когда пользователь переходит на новую страницу по щелчку на ссылке. И, конечно же, отсутствует возможность вызова методов JavaScript внутри HTML-страницы либо их обращения к коду WPF. Вот здесь как раз и приходит на помощь элемент управления WebBrowser.

Элемент управления Frame является прекрасным вариантом, когда необходим контейнер, способный гладко переключаться между содержимым WPF и HTML. Элемент управления WebBrowser более удобен, когда нужно изучать объектную модель страницы, ограничивать или следить за страничной навигацией или создавать путь, через который код JavaScript и код WPF могут взаимодействовать.

И WebBrowser, и Frame (с HTML-содержимым) отображают стандартное окно Internet Explorer. Это окно обладает всеми возможностями и средствами браузера Internet Explorer, включая поддержку JavaScript, Dynamic HTML, элементов управления ActiveX и подключаемых модулей. Однако дополнительных деталей вроде панели инструментов, адресной строки или строки информации о состоянии это окно не содержит (хотя все эти ингредиенты легко добавить к форме с использованием соответствующих элементов управления).

Элемент управления WebBrowser не был написан с нуля в виде управляемого кода. Подобно Frame (когда он отображает HTML-содержимое), он является оболочкой для СОМ-компонента shdocvw.dll, который представляет собой часть Internet Explorer и включен в Windows. Как следствие, WebBrowser и Frame имеют несколько графических ограничений, которые отсутствуют у остальных элементов управления WPF. Например, не допускается размещать другие элементы поверх HTML-содержимого, отображаемого в этих элементах управления, равно как применять трансформации для скашивания или поворота.

В качестве средства, способность WPF отображать HTML-содержимое (с помощью Frame или WebBrowser) даже близко не настолько же полезно, как страничная модель или ХВАР. Тем не менее, в особых ситуациях при наличии готового HTML-содержимого, которое не хотелось бы заменять, это средство может пригодиться. Например, элемент WebBrowser может использоваться для отображения внутри приложения HTML-документации или для предоставления возможности переходить к функциональности, предлагаемой на веб-сайте сторонних разработчиков.

Навигация к странице

Кроме свойства Source доступны также и методы навигации, которые перечислены ниже:

Navigate()

NavigateToString()

Загружает содержимое из переданной ему строки с полным HTML-содержимым веб-страницы. Это открывает интересные возможности, такие как извлечение HTML-текста из ресурса внутри приложения и его отображение

NavigateToStream()

Загружает содержимое из потока, который содержит HTML-документ. Это позволяет открывать файл и передавать его прямо в элемент управления WebBrowser для визуализации без удержания всего HTML-содержимого в памяти

GoBack() и GoForward()

Переходят к предыдущему или следующему документу в хронологии навигации. Во избежание ошибок перед использованием этих методов необходимо проверять свойства CanGoBack и CanGoForward, т.к. попытка перейти к документу, которого не существует (например, перейти назад, находясь на первом документе в хронологии), вызывает генерацию исключения

Refresh()

Перезагружает текущий документ

Вся навигация WebBrowser является асинхронной. Это значит, что код приложения продолжает выполнение во время загрузки страницы. Элемент управления WebBrowser поддерживает небольшой набор событий, которые описаны ниже:

Событие Navigating срабатывает при установке нового URL-адреса или при выполнении пользователем щелчка на ссылке. URL-адрес можно инспектировать и отменять навигацию, устанавливая е.Cancel в true.

Событие Navigated срабатывает после Navigating непосредственно перед тем, как в WebBrowser начинается загрузка страницы.

Событие LoadCompleted срабатывает после завершения процесса загрузки страницы и представляет собой удобную возможность для обработки полученной страницы.

Построение дерева DOM

Прежде чем можно будет использовать модель DOM с WebBrowser, необходимо добавить ссылку на библиотеку Microsoft HTML Object Library (mshtml.tlb). Поскольку она является библиотекой СОМ-объектов, в Visual Studio понадобится сгенерировать для нее соответствующую управляемую оболочку. Для этого нужно выбрать в меню Project (Проект) пункт Add Reference (Добавить ссылку), перейти на вкладку СОМ, выбрать опцию Microsoft HTML Object Library (Библиотека объектов HTML от Microsoft) и щелкнуть на кнопке ОК.

Стартовой точкой для исследования содержимого на веб-странице является свойство WebBrowser.Document. Оно дает объект HTMLDocument, который представляет одиночную веб-страницу в виде иерархической коллекции объектов IHTMLElement.

Для каждого имеющегося на веб-странице дескриптора предусмотрен отдельный объект IHTMLElement, включая параграфы (<р>), гиперссылки (<а), изображения (<img>) и прочие знакомые ингредиенты HTML-разметки.

Свойство WebBrowser.Document доступно только для чтения. Это означает, что связанный с ним объект HtmlDocument модифицировать можно, но создавать для него новый объект HtmlDocument "на лету" нельзя. Вместо этого понадобится либо установить свойство Source, либо вызывать метод Navigate() для загрузки новой страницы. После срабатывания события WebBrowser.LoadCompleted можно получать доступ к свойству Document.

Построение объекта HTMLDocument занимает небольшое, но все же заметное время (в зависимости от размеров и сложности веб-страницы). Элемент управления WebBrowser на самом деле не создает объект HTMLDocument для страницы до тех пор, пока не будет предпринята первая попытка доступа к свойству Document. Каждый объект IHTMLElement имеет описанные ниже ключевые свойства:

Свойство tagName содержит сам дескриптор без квадратных скобок. Например, дескриптор привязки имеет вид <а href = ". ">. </a>, поэтому его имя в tagName будет выглядеть как А.

Свойство id содержит значение атрибута id, если он был указан. Элементы идентифицируются с помощью уникальных атрибутов id, когда необходимости иметь возможность манипулировать ими в средстве автоматизации или серверном коде.

Свойство children содержит коллекцию объектов IHTMLElement, по одному объекту для каждого имеющегося дескриптора.

Свойство innerHTML хранит полное содержимое дескриптора, включая любые вложенные в него дескрипторы вместе с их содержимым.

Свойство innerText хранит полное содержимое самого дескриптора и содержимое любых вложенных в него дескрипторов. Однако все HTML-дескрипторы отбрасываются.

Свойства outerHTML и outerText исполняют ту же роль, что и innerHTML и innerText, но включают текущий дескриптор (а не только его содержимое).

Чтобы лучше понять свойства innerText, innertHTML и outerHTML, предположим, что есть следующий дескриптор:

Значение свойства innerText для этого дескриптора будет выглядеть так:

Значение свойства innerHTML — так:

И, наконец, значение свойства outerHTML включает в себя полностью весь дескриптор:

Вдобавок с помощью метода IHTMLElement.getAttribute() можно извлечь значение атрибута для элемента по имени.

Для навигации по модели документа HTML-страницы нужно просто перемещаться по коллекции дочерних элементов каждого объекта IHTMLElement. В следующем коде эта задача выполняется в ответ на щелчок на кнопке. При этом создается дерево, отражающее структуру элементов и содержимого на странице:

История ввода в TextBox WPF
Подскажите пожалуйста, как можно реализовать в TextBox такой механизм: Пользователь ввел в.

WPF создание своего компонента
Подскажите стать по созданию своих компонентов в wpf для новичков, ссылки на msdn не надо читал

Прoблемы с созданием своего контрола wpf
Пробую создать свой контрол UserControl1 : UserControl вот код <UserControl.

Нужен движок браузера под WPF
Всем привет. Прошу помочь в помочь с поиском движка браузера с функциями: 1. Под WPF 2.

Можете сделать коллекцию из строк\Uri, которую будете пополнять при попытке перейти на указанный в textBox адрес. bodynar, а не подскажите как правильно это можно реализовать? а то с wpf только начинаю знакомиться

Lega26, Ну, история переходов никакого отношения к WPF не имеет

Предположу, что у вас по кнопке происходит "загрузка страницы", адрес которой записан в textbox.
Можете написать что-то вроде такого (пишу на коленке)

bodynar, Спасибо. Ну ,а как именно делать вывод этого списка? Мне нужно чтобы я просматривал и перейти еще мог. Если не затруднит,помогите пожалуйста) Lega26, В таком случае вы можете взять любой контейнер (например ListBox, ListView, ItemsControl и т.п.) и там разместить историю.
Примерно так А переход по ссылкам можно сделать различными способами - например добавить кнопку, по клику которой вы будете переходить по выбранной строке в истории. bodynar, к сожалению не выводит содержимое. Возможно я не правильно пишу.

Lega26, Возможно у вас DataContext не установлен.

Рекомендую вам изучить систему привязок данных в WPF.

А так - можете либо указать контекст данных в конструкторе окна, либо изменить привязку

ColorDialog для WPF. Копии всякого старья для WPF
Последние три дня мучился в поисках ColorDialog для WPF. Не стороннего заменителя, а максимально.

WPF async void fun() для событий контролла. (MapCOntrol.WPF)
Задача: Отмечаем чекбокс элементы и рисуем их на карте. При нажатии на кнопку выполняется.

История для браузера
Здравствуйте, скажите как можно реализовать историю для браузера таким образом что кликнув на.

История для браузера
Здравствуйте! Имеется TextBox куда вводить адрес для поиска через WebBrowser. На кнопке "Поиск".

WPF поставляется с готовым к использованию элементом управления WebBrowser, который позволяет разместить готовый веб-браузер в вашем приложении. Элемент управления WebBrowser в действительности просто оболочка вокруг версии ActiveX для Internet Explorer, но с тех пор как ActiveX стал интегрированной частью Windows, ваше приложение должно работать на всех машинах с установленной Windows, без требования к установке дополнительных компонентов.

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

Итак, давайте взглянем на код:

Сначала код может показаться немного пугающим, но если вы взгляните на него еще раз, то увидите, что в нем много повторений.

Давайте начнем с обсуждения XAML части. Обратите внимание, я использую несколько понятий, рассмотренных в этом руководстве, включая ToolBar(Панель управления) и команды WPF. ToolBar используется для размещения нескольких кнопок, используемых для перемещения вперед и назад. Далее у нас есть адресная строка для ввода и отображение текущего URL-адреса, вместе с кнопкой для перехода к введенному URL.

Под Toolbar у нас расположен компонент WebBrowser. Как вы можете заметить, для его использования требуется только одна строка XAML - в данном случае мы подписываемся на событие Navigating, которое происходит, как только WebBrowser начинает переход по URL-адресу.

В фоновом коде, мы начинаем с перехода по URL-Адресу, расположенного в конструкторе окна, чтобы было что показать, вместо пустого элемента управления. Затем у нас есть событие txtUrl_KeyUp , в котором мы проверяем, нажал ли пользователь Enter внутри адресной строки - если это так, то мы начнем переход к введенному URL.

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

Последняя часть фонового кода - это простая обработка наших команд: Две для кнопок назад и вперед, в которых мы используем CanGoBack и CanGoForward для определения, могут ли они выполняться, и методы GoBack и GoForward для того чтобы выполнить фактическую работу. Это обычное дело при работе с командами в WPF, как и описано в разделе команды, данного руководства.

К последней команде, мы позволяем ей постоянно выполняться, и когда она завершиться, мы снова используем метод Navigate ().

Коротко о вышесказанном

Как вы можете заметить, запустить и использовать веб браузер внутри вашего приложения стало очень легко с использованием компонента WebBrowser. Однако, нужно учитывать, что версия WPF WebBrowser немного ограничена по сравнению с версией WinForms, но для базового использования и навигации она работает отлично.

Если вы хотите использовать версию WinForms, вы можете сделать это с помощью WindowsFormsHost, о котором идет речь в другом месте этого руководства.

Элемент управления WebBrowser очень часто является хорошим вариантом для решения задач, связанных с Web Mining, отображением и работе с HTML данными. Несмотря на кажущуюся простоту работы с этим элементом управления, существует много проблем. На форумах очень часто можно встретить вопросы по работе с WebBrowser, на некоторые из наиболее часто задаваемых попробую ответить, а также расскажу о других приемах / трюках, с которыми пришлось столкнуться.

Работаем с WebBrowser в Windows Forms приложениях

После чего получим такой результат:

Шаблон проекта создан, приступим к выполнению некоторых задач.

Создание HTML Editor

Мы все привыкли к онлайн-редакторам HTML, но если нам необходимо сделать это в Windows Forms приложении? WebBroser может нам помочь в этом.

В первую очередь мы должны добавить в проект ссылку на Microsoft.mshtml, после чего перепишем наш код таким образом:

Нужно еще заметить, что многие свойства WebBrowser являются COM объектами, т.е. по сути WebBrowser - это обвертка (wrapper) над более старым элементом управления AxSHDocVw.AxWebBrowser. Поэтому следующим этапом является приведение hd.DomElement к интерфейсу mshtml.IHTMLDocument2. дальше мы добрались до самой сути - изменение режима браузера с помощью строки axObj.designMode = "On";

После этого наша страница будет редактируемой (добавим строку "Welcome from WebBrowser Demo!"):

Рассмотрим как можно менять стили в нашем HTML Editor.

Расширяем функционал HTML Editor

Понятно, что в таком виде наш редактор никому не нужен, поэтому добавим ему немного функционала.

Для этого нам необходимо разобраться, как можно управлять содержимым веб-браузера программно. А сделать это можно с помощью команды ExecCommand класса HtmlDocument, но для этого необходимо знать, какие параметры необходимо передавать.

Рассмотрим синтаксис метода execCommand, который принимает на вход три аргумента:

имя команды: указывает на действия, которые необходимо совершить с выделением.
флаг: булево значение, указывающее отображать ли интерфейс пользователя, вызванный командой.
параметры команды

Из этих трех аргументов обязательным является только первый. Пример:

Список команд:

Команда	Описание
2D-Position	Команда, позволяющая пользователю передвигать абсолютно позиционированные элементы.
AbsolutePosition	Команда, устанавливающая свойство position данного элемента в значение "absolute".
BackColor	Команда, устанавливающая или возвращающая цвет фона данного выделеного текста.
BlockDirLTR	Не поддерживается.
BlockDirRTL	Не поддерживается.
Bold	Команда, переключающая состояние шрифта выделенного фрагмента текста между жирным и нормальным.
BrowseMode	Не поддерживается.
Copy	Команда, помещающая копию данного выделенного фрагмента текста в буфер обмена.
CreateBookmark	Команда, создающая "якорь" из выделенного фрагмента текста или возвращает имя "якоря" для выделенного фрагмента текста.
CreateLink	Команда, создающая гиперссылку из выделенного фрагмента текста.
Cut	Команда, помещающая копию данного выделенного фрагмента текста в буфер обмена и удаляющая этот фрагмент из документа.
Delete	Команда, удаляющая выделенный фрагмент текста.
DirLTR	Не поддерживается.
DirRTL	Не поддерживается.
EditMode	Не поддерживается.
FontName	Команда, задающая или возвращающая имя шрифта текста.
FontSize	Команда, задающая или возвращающая размер шрифта текста
ForeColor	Команда, задающая или возвращающая цвет текста.
FormatBlock	Команда, форматирующая выделенный фрагмент текста как блок "DIV", "P" или "SPAN".
Indent	Команда, увеличивающая отступ выделенного фрагмента текста.
InlineDirLTR	Не поддерживается.
InlineDirRTL	Не поддерживается.
InsertButton	Команда, вставляющая в документ кнопку("BUTTON").
InsertFieldset	Команда, вставляющая в документ группу "FIELDSET".
InsertHorizontalRule	Команда, вставляющая в документ горизонтальную полосу прокрутки.
InsertIFrame	Команда, вставляющая в документ "плавающий" фрейм.
InsertImage	Команда, вставляющая в документ изображение.
InsertInputButton	Команда, вставляющая в документ командную кнопку.
InsertInputCheckbox	Команда, вставляющая в документ кнопку-"флажок".
InsertInputFileUpload	Команда, вставляющая в документ элемент управления для отправки файла на сервер.
InsertInputHidden	Команда, вставляющая в документ скрытое поле.
InsertInputImage	Команда, вставляющая в документ изображение как элемент управления.
InsertInputPassword	Команда, вставляющая в документ поле ввода пароля.
InsertInputRadio	Команда, вставляющая в документ радиокнопку.
InsertInputReset	Команда, вставляющая в документ кнопку сброса данных формы.
InsertInputSubmit	Команда, вставляющая в документ кнопку отправки данных из формы на сервер.
InsertInputText	Команда, вставляющая в документ поле ввода текста.
InsertMarquee	Комманда, вставляющая в документ прокручивающийся текст.
InsertOrderedList	Комманда, вставляющая в документ нумерованный список.
InsertParagraph	Комманда, создающая абзац из выделенного фрагмента текста.
InsertSelectDropdown	Комманда, вставляющая в документ выпадающий список.
InsertSelectListbox	Комманда, вставляющая в документ список.
InsertTextArea	Комманда, вставляющая в документ область редактирования текста.
InsertUnorderedList	Комманда, вставляющая в документ маркированный список.
Italic	Комманда, переключающая состояние шрифта выделенного фрагмента текста между наклонным и нормальным.
JustifyCenter	Комманда, выравнивающая абзац, в который входит фрагмент выделенного текста, по центру.
JustifyFull	Не поддерживается.
JustifyLeft	Комманда, выравнивающая абзац, в который входит фрагмент выделенного текста, по левому краю.
JustifyNone	Не поддерживается.
JustifyRight	Комманда, выравнивающая абзац, в который входит фрагмент выделенного текста, по правому краю.
LiveResize	Комманда, включающая или выключающая режим мгновенного("живого") отображения размеров или местоположения элементов страницы во время изменения размеров последней.
MultipleSelection	Комманда, позволяющая или запрещающая выделение сразу нескольких элементов web-строницы.
Open	Не поддерживается.
Outdent	Комманда, уменьшающая отступ выделенного фрагмента текста.
OverWrite	Комманда, переключающая режим ввода текста между вставкой и заменой.
Paste	Комманда, заменяющая данный выделенный фрагмент текста на содержимое буфера обмена.
PlayImage	Не поддерживается.
Print	Комманда, открывающая диалоговое окно "Печать".
Redo	Не поддерживается.
Refresh	Комманда, перезагружающая данный документ с сервера.
RemoveFormat	Комманда, удаляющая все тэги форматирования текста из выделенного фрагмента текста.
RemoveParaFormat	Не поддерживается.
SaveAs	Комманда, сохраняющая текущую web-страницу в файл.
SelectAll	Комманда, выделяющая весь документ.
SizeToControl	Не поддерживается.
SizeToControlHeight	Не поддерживается.
SizeToControlWidth	Не поддерживается.
Stop	Не поддерживается.
StopImage	Не поддерживается.
StrikeThrough	Не поддерживается.
Subscript	Не поддерживается.
Superscript	Не поддерживается.
UnBookmark	Комманда, удаляющая элемент закладки из текущего фрагмента выделенного текста.
Underline	Комманда, устанавливающая подчёркивание для выделенного фрагмента текста или снимающая это подчёркивание.
Undo	Не поддерживается.
Unlink	Комманда, удаляющая элемент гиперссылки из текущего фрагмента выделенного текста.
Unselect	Комманда, очищающая данный фрагмент выделенного текста.

При запуске приложения вы можете выделить произвольный текст и установить стиль шрифта жирным путем нажатия на нашу кнопку. Таким образом вы можете написать полноценный HTML Editor, который будет поддерживать все команды форматирования.

Переход на новую страницу

В случае, если мы ничего не меняли в исходном шаблоне, переход при нажатии на кнопку пройдет успешно, но если вы хоть что-то поменяли в исходном документе, то при переходе вы увидите такое окно:

Я обшарил весь интернет в поисках решения, но ответа не нашел ни на одном из ресурсов, свойства типа ShowWarningPopup нет. В итоге решение пришло в виде такого трюка:

Эта функция изменяла свойство веб-браузера на противоположный, ее нужно вызывать перед тем как осуществлять переход на новую страницу. Вся соль в том, что простое присвоение true или false не помогает, необходимо каждый раз менять значение свойства на противоположный!

Читайте также: