Как нажать на кнопку в webBrowser?
Очень часто в комментариях спрашивают: как нажать на кнопку в окне webBrowser? Так как этот вопрос очень часто повторяется, решил написать небольшую статью, в которой покажу несколько простых примеров, которые помогут решить данную задачу.
И так для начала создадим Windows Forms приложение, после чего поместим на форму: кнопку и элемент управления webBrowser (wb).
Затем создадим страницу index.html, с которой будем работать на протяжении всей этой статьи.
На этом подготовительная часть закончена, переходим к примерам.
Примеры
Чтобы выполнить код, приведенный в любом из ниже приведенных примеров, необходимо выполнить следующие действия:
1. Получить содержимое страницы, например это можно сделать с помощью метода Navigate или свойства URL.
2. Дождаться полной загрузки страницы, используя событие DocumentCompleted.
3. Для того чтобы нажать на кнопку на странице, которая находится в окне элемента управления webbrower, необходимо воспользоваться методом InvokeMember, в который в качестве аргумента необходимо передать значение Click.
Как нажать на кнопку с атрибутом id?
В первом примере научимся нажимать на кнопку, которая имеет атрибут id.
Сначала с помощью метода GetElementById находим нужный нам элемент, в данном случае кнопку с указанным атрибутом id, после чего нажимаем на него.
Как нажать на кнопку с атрибутом name?
Во втором примере в качестве задачи нам нужно программно нажать на кнопку под номером шесть, которая имеет атрибут name. Как видно на картинке данный атрибут применяется сразу к двум html элементам, поэтому выполним несколько дополнительных действий: сначала найдем все кнопки на странице, а затем проверим у каждой из них наличие атрибута name и интересующего нас имени.
Как нажать на кнопку с атрибутом class?
В этом примере в качестве задачи нам необходимо нажать на третью кнопку, которая содержит атрибут class. О том, как найти html элемент по его классу я рассказывал в одной из предыдущих статей, поэтому сразу же перейдем к решению задачи.
Если сейчас выполнить данный код, то в результате по очереди будут нажаты все кнопки, которые имеют атрибут class со значением btnClick. «Проблема» заключается в том, что данный атрибут можно применить сразу к нескольким элементам на странице, поэтому необходимо уточнить выборку, например, указав индекс интересующего нас элемента.
Как нажать на кнопку, которая находится в окне фрейма?
И последний пример, в котором рассмотрим ситуацию, когда нужно нажать на кнопку, которая находится внутри фрейма. И так для начала создадим ещё один html файл (frm.html), который содержит обычную форму с кнопкой.
Изменим содержимое страницы index.html
При работе с фреймами необходимо использовать проверку, которая позволяет дождаться полной загрузки страницы. Если ей не воспользоваться, то кнопка, в данном примере, будет нажата дважды, так как сначала будет загружена страница frm.html, после чего будет выполнен метод InvokeMember, а затем произойдет загрузка основной страницы index.html, после чего снова происходит нажатие на кнопку. В этом можно легко убедиться, если проследить за изменением значения (e.Url.AbsolutePath).
Ещё один пример, в котором показано, как можно нажать на кнопку, которая находится в ячейке таблицы.
Либо можно найти кнопку «Продать» по значению, например:
Обратиться к нужной таблице можно не только с помощью цикла, но и по индексу, например:
На этом всё, если вопросы, то оставляйте их в комментариях.
10 комментариев
Здравствуйте, почему то когда я в webbrowser нажимаю кнопку загрузить чего-нибудь фалй загружается но не отображается в закачанных после загрузки.
Вопрос о том, как пользоваться webbrowser Internet Explorer?
Просто я не понимаю, что за кнопка «загрузить чего-нибудь» и откуда появился список загруженных файлов…
Здравствуйте! Отличная статья. По Вашим примерам все понятно, все повторил и все сработало.
Но вот как применить к моей HTML странице не соображу(опыта 0,0).
Почитав азы HTML обнаружил, что кнопка расположена в ячейке таблицы и описывается так:
document.write(…);
…-это я заменил длинные имена.
Подскажите пожалуйста.
Спасибо.
В конце статьи (перед видео) добавил пример.
Спасибо за информацию. Очень помогла. Примеры HTML кода очень простые, а в реальных страницах гораздо все навороченнее. Как устроена моя страница я смог понять только в инспекторе FireFox. Оказалось моя кнопка вложена в 17 тэгов.
Хотелось бы спросить: 1.В инспекторе после открытия тэга таблицы идет тэг tbody, а при просмотре HTML кода такого тэга нет. Нужно ли выгружать колекцию элементов этого тэга и парсить их? 2. Как вывести (например в textbox) содержимое колекции (AttributeName, Value)
Спасибо.
В инспекторе после открытия тэга таблицы идет тэг tbody, а при просмотре HTML кода такого тэга нет.
tbody — это обычный html тэг, поэтому он должен отображаться как в инспекторе, так и в исходнике HTML кода страницы.
Нужно ли выгружать колекцию элементов этого тэга и парсить их?
Зависит от задачи.
Как вывести (например в textbox) содержимое колекции (AttributeName, Value)
AttributeName, Value — это свойства объекта. А о какой коллекции идёт речь?
К примеру я получаю коллекцию(HtmlElementCollection) таблиц в тэге боди методом:
боди.GetElementsByTagName(«таблички»). Переберая (foreach) элементы(HtmlElement) хотелось бы вывести в textbox какую нить информацию об элементе, его атрибутах и их значениях. Я могу пока только count-ом вывести количество элементов в коллекции.
Спасибо.
Получить все атрибуты элемента можно только, работая с DOM моделью html документа, а это уже неуправляемый код (в проект нужно добавить библиотеку mshtml).
Не стандартная кнопка, как с ней быть? Очень нужна помощь. Есть такой фрагмент страницы (таких кнопок на странице несколько, и какую кнопку пользователь нажал сервер определяет по значению скрытого поля)
Мне кроме того что нажать на кнопку нежно еще и выполнить присвоение переменной cp_f_ = 1 которая в скрытом поле. Т.е. еще раз пользователь на сайте нажимает одну из кнопок, выполняется скрипт ScriptName(), и при выполнении скрипта на сервере, сервер по значению переменной cp_f_ понимает что нужно сделать, как быть?
<button>¶
Тег <button> (от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью <input> (с атрибутом type=»button | reset | submit» ).
В отличие от этого элемента, <button> предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.
- button
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
Также для этого тега доступны универсальные атрибуты.
autofocus¶
Атрибут autofocus устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.
Синтаксис
Значения
Значение по умолчанию
По умолчанию это значение выключено.
disabled¶
Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу Tab , мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.
Синтаксис
Значения
Значение по умолчанию
По умолчанию это значение выключено.
Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента <form> , например, при создании её программно.
Синтаксис
Значения
Идентификатор формы (значение атрибута id элемента <form> ).
Значение по умолчанию
formaction¶
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction по своему действию аналогичен атрибуту action элемента <form> . Если одновременно указать action и formaction , то при нажатии на кнопку атрибут action игнорируется и данные пересылаются по адресу, указанному в formaction .
Синтаксис
Значения
formenctype¶
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла ( input type=»file» ). Этот атрибут по своему действию аналогичен атрибуту enctype элемента <form> .
Синтаксис
Значения
application/x-www-form-urlencoded Вместо пробелов ставится + , символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя). multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов. text/plain Пробелы заменяются знаком + , буквы и другие символы не кодируются.
Значение по умолчанию
- application/x-www-form-urlencoded
formmethod¶
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
Значения
Различают два метода — GET и POST.
GET Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар « имя=значение », которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ & ). Полный адрес к примеру будет http://site.ru/doc/?name=Vasya&password=pup . Объём данных в методе ограничен 4 Кб. POST Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
formnovalidate¶
Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type=»email»> , <input type=»url»> , а также при наличии атрибута pattern или required у элемента <input> .
Синтаксис
Значения
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget¶
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.
Синтаксис
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe> . Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.
_blank Загружает страницу в новую вкладку браузера. _self Загружает страницу в текущую вкладку. _parent Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self . _top Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как _self .
Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.
Синтаксис
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.
Синтаксис
Значения
button Обычная кнопка. reset Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние. submit Кнопка для отправки данных формы на сервер. menu Открывает меню, созданное с помощью элемента <menu> .
Значение по умолчанию
- submit
value¶
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара « имя=значение », где имя задаётся атрибутом name элемента <button> , а значение — атрибутом value . Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value применяется для доступа к данным через скрипты.
<button>
С помощью CSS можно настроить внешний вид кнопки <button> и текста на ней: шрифт, размер, цвет фона и другие параметры. А если ничего не менять, то <button> будет выглядеть, как стандартная браузерная кнопка.
На кнопку можно поместить любой HTML-элемент.
Как пишется
Скопировать ссылку на секцию «Как пишется» Скопировано
Атрибуты
Скопировать ссылку на секцию «Атрибуты» Скопировано
К тегу <button> можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:
- autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
- disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
- form — связывает кнопку с любой формой в документе через ID. Если ID не указан, то с предшествующей формой.
- formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
- formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:
- application / x — www — form — urlencoded : стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя ��);
- multipart / form — data — используется, чтобы отправлять файлы, данные при этом не кодируются;
- text / plain — буквы и другие символы не кодируются, вместо пробелов появляется +.
- post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
- get — добавляет данные из формы прямо в URL-адрес после знака «?», например https : / / site . ru / doc / ? name = Ivan&age = 27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
- _self : показывает данные в текущем окне. Это значение используется по умолчанию.
- _blank : показывает данные в новом окне браузера — его используют чаще всего.
- _parent : показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
- _top : отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
- submit : отправляет данные на сервер. Это также значение по умолчанию.
- reset : удаляет введённые данные из формы.
- button : просто кнопка. Действие для неё можно задать через скрипты.
Подсказки
Скопировать ссылку на секцию «Подсказки» Скопировано
�� Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то <button> либо должен быть внутри контейнера <form> , либо связан с формой при помощи атрибутов id и form :
�� Тег <input> с атрибутом type = «button | reset | submit» тоже создаёт кнопку, но <button> проще стилизовать, так как внутрь <button> можно добавить любой HTML-контент, например, <em> , <strong> или <img> .
�� Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type , иначе может вылезти ошибка.
На практике
Скопировать ссылку на секцию «На практике» Скопировано
Дока Дог советует
Скопировать ссылку на секцию «Дока Дог советует» Скопировано
�� Но есть и другое мнение. Я вот использую <button> крайне редко. Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю <input type = «submit» value = «Отправить»> , потому что <input> проще верстать ��♂️
Единственный случай, когда я использую <button> — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный <input> картинку не вставить. А с тегом <a> не хочется извращаться, потому что он по умолчанию не отправляет данные формы.
�� Если вам нужна кнопка вне формы для отправки данных, то проще использовать тег <a> , то есть обычную ссылку. В href я прописываю # , чтобы кнопка никуда не вела, если не надо. Потом навешиваю на неё всякие события: допустим, атрибут, который вызывает всплывающее окно. Тег <a> намного проще использовать, чем <button> , в нём больше возможностей по умолчанию, чтобы накидать внутрь каких-нибудь значений и условий, например, сделать не простую кнопку, с тремя картинками в определённой последовательности. У <button> больше ограничений.
Алёна Батицкая советует
Скопировать ссылку на секцию «Алёна Батицкая советует» Скопировано
�� При выборе между кнопкой и ссылкой нужно смотреть исключительно на семантику, а не на внешний вид элемента в дизайне и уж точно не на простоту вёрстки.
В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).
�� Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег <a> , ссылку.
Если мы никуда пользователя не отправляем, а, например, открываем диалоговое окно или листаем слайдер, то это кнопки.
Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:
- В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку ( <button> ).
- Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка ( <a href = «»> ).
- Всегда начинайте с кнопки.
На собеседовании
Скопировать ссылку на секцию «На собеседовании» Скопировано
Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.
Какая разница между кнопками и ссылками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?
Скопировать ссылку на секцию «Какая разница между кнопками и ссылками? В каких случаях надо использовать ссылку, в каких кнопку? Почему эта разница важна с точки зрения доступности?» Скопировано
Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.
Читайте также
Формы разные нужны, формы разные важны. Без этого тега ни одна форма работать не будет!
:disabled , :enabled
Эта кнопка серая. Она не доступна для клика. Как написать селектор на основе состояния элемента?
как нажать на кнопку на сайте через консоль JS
Надо каким либо образом выбрать эту кнопку, например, через метод document.getElementById , где вы укажете id элемента. Затем вызываем метод click .
Но наиболее универсальный способ выбрать элемента — это document.querySelector , к примеру для данного случая:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.