Html как запустить приложение

Обновлено: 07.01.2025

HTA (HTML Application) - это простая технология, позволяющая создавать полезные приложения даже без знания серьезных языков программирования.

Создать HTA-приложение можно, просто написав HTML-страницу и сохранив ее с расширением .hta, которое обрабатывается программой mshta.exe , её задача - обеспечить связь программы с браузером. Так как такие приложения используют движок браузера, то они объединяют в себе все их возможности - их объектную модель, разметку страницы (HTML), каскадные листы стилей (CSS), скрипты (VBS и JS). Также на такие приложения не накладывается ограничения безопасности - они работают как любой исполняемый файл.

То есть при помощи HTML создается абсолютно любой пользовательский интерфейс, причем с минимальными усилиями и без каких-либо существенных ограничений, логика программы организуется кодом на Java Script или Visual Basic Script, а само приложение выходит за рамки браузера - программа на стадии выполнения ничем не будет отличаться от обычных оконных приложений для Windows - запущенное приложение будет присутствовать на панели задач, иметь собственные окно, меню и значок. Хотя здесь нужно оговориться: программа не будет видна среди запущенных приложений в диспетчере задач, единственное средство, которым можно контролировать запущенную программу - это процесс mshta.exe.

В то время, как расширение .hta указывает системе как работать с приложением, новый тег <hta:application> и аттрибуты указывают окну, как себя вести будучи приложением. Этот тег предоставляет ограниченный набор аттрибутов, управляющих всем от стиля границы окна и до программной иконки и меню. Для создания функционирующего HTA, этот тег должен быть описан внутри тега HEAD .

Элемент HTA:APPLICATION требует закрывающего тега.

Так как тэг элемента HTA:APPLICATION является пустым, он также может быть закрыт использую следующий прием.

При использовании вышеуказанного приема, прямому слэшу (/) должен предшествовать пробельный символ.

Помимо управлением окном приложения, этот тег также дает возможность обращаться к свойствам приложения из скриптов, расположенных в коде HTA-приложения. Стоит заметить, что все свойства этого тега доступны только для чтения.

Атрибут и свойство id

Определяет идентификатор объекта - уникального имени внутри файла HTA-приложения.

Атрибут и свойство applicationName

Содержит имя приложения. Свойство не имеет значения по умолчанию.

Будучи установленным в true , свойство singleInstance проверяет значение applicationName перед запуском экземпляра приложения. Чтобы проверка была успешной, значение applicationName должно быть уникальным. Можно использовать значение свойства applicationName для идентификации единственности запущенного приложения, независимо от адреса URL, используемого для доступа к нему.

Атрибут и свойство border

Содержит тип бордюра окна. Свойство border влияет на толщину бордюра и действительно только для окон HTA , у которых есть панель заголовка и сам заголовок. Устанавливая border в "None", вы убираете панель заголовка, иконку программы, и кнопки максимизирования и минимизирования. Это свойство может быть использовано совместно со свойством borderStyle . Возможные значения:

Dialog	Бордюр диалогового окна - пользователь не может изменить размер окна.
None	Окно без бордюра.
Thick	Толстый бордюр окна, плюс бордюр для изменения размера окна. (Значение по умолчанию).
Thin	Тонкий бордюр окна с заголовком.

Примечание

Если не указать параметр BORDER или указать BORDER="thick" , то размеры окна программы можно будет изменять при помощи мыши, в остальных же случаях, — размеры окна изменить нельзя.

Атрибут и свойство borderStyle

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

Complex	Приподнятый и утопленный бордюр.
Normal	Нормальный бордюр. (Значение по умолчанию).
Raised	Приподнятый 3-D бордюр.
Static	3-D бордюр, обычно используемый для окон, не обрабатывающих ввод пользователя.
Sunken	Утопленный 3-D бордюр.

Атрибут и свойство caption

Определяет, будет ли в окне HTML приложения отображаться панель заголовка. Заголовок приложения отображается только тогда, когда свойство caption установлено в "Yes". Отключение свойства caption также отключит кнопки "Свернуть", "Развернуть" и программную иконку. В этом случае нужно не забыть предоставить альтернативный способ выхода из приложения, например, кнопку "Закрыть" на форме приложения, вызывающую метод Window.Close . Возможные значения:

Yes	Панель заголовка отображается. (Значение по умолчанию).
No	Панель заголовка не отображается.

Свойство commandLine

Атрибут и свойство contextMenu

Определяет, появляется ли контекстное меню при нажатии на правую кнопку мыши. Возможные значения:

Yes	Контекстное меню появляется. (Значение по умолчанию).
No	Контекстное меню не появляется.

Атрибут и свойство icon

Определяет путь к файлу иконки, используемой в HTML приложении. HTA использует системную иконку, если значение не определено. Атрибут Icon распознаёт стандартные файлы с расширением .ico , содержащие изображение размером 32x32 пикселя, а также успешно распознаёт первую иконку из файлов "*.exe", "*.icl" (библиотека иконок), "*.dll", и "*.ocx".

Атрибут и свойство innerBorder

Определяет, отображается ли внутренняя 3-D граница. Возможные значения:

Yes	Внутренняя 3-D граница отображается. (Значение по умолчанию).
No	Внутренняя 3-D граница не отображается.

Атрибут и свойство maximizeButton

Определяет, отображается ли кнопка "Развернуть" на панели заголовка окна HTML приложения. Чтобы отображались кнопки "Свернуть" и "Развернуть", окно должно иметь панель заголовка (атрибут caption ). Возможные значения:

Yes	Кнопка "Развернуть" отображается. (Значение по умолчанию).
No	Кнопка "Развернуть" не отображается.

Атрибут и свойство minimizeButton

Определяет, отображается ли кнопка "Свернуть" на панели заголовка окна HTML приложения. Чтобы отображались кнопки "Свернуть" и "Развернуть", окно должно иметь панель заголовка (атрибут caption ). Возможные значения:

Yes	Кнопка "Свернуть" отображается. (Значение по умолчанию).
No	Кнопка "Свернуть" не отображается.

Атрибут и свойство navigable

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

No	Будут открываться в новых окнах. (Значение по умолчанию).
Yes	Будут открываться в основном окне.

Атрибут и свойство scroll

Определяет, будут ли отображаться полосы прокрутки. Возможные значения:

Yes	Полосы прокрутки отображаются. (Значение по умолчанию).
No	Полосы прокрутки не отображаются.
Auto	Полосы прокрутки появляются только тогда, когда содержимое документа не умещается в клиентской области окна.

Атрибут и свойство scrollFlat

Определяет, в каком виде будут отображаться полосы прокрутки. Возможные значения:

Yes	Полосы прокрутки двухмерные.
No	Полосы прокрутки трёхмерные. (Значение по умолчанию).

Атрибут и свойство selection

Определяет, может ли содержимое документа быть выбрано мышкой или с помощью клавиатуры. Значение "No" запрещает появление контекстного меню и присвоение атрибуту contextMenu значения "Yes" не произведёт никакого эффекта. Возможные значения:

Yes	Содержимое может быть выбрано. (Значение по умолчанию).
No	Содержимое не может быть выбрано.

Атрибут и свойство showInTaskBar

Определяет, будет ли HTML приложение появляться на панели задач Windows. Возможные значения:

Yes	Приложение отображается на панели задач. (Значение по умолчанию).
No	Приложение не отображается на панели задач.

Атрибут и свойство singleInstance

Определяет, может ли быть запущенно больше одного экземпляра HTML приложения одновременно. Возможные значения:

Yes	Может быть запущен только один экземпляр приложения.
No	Может быть запущенно несколько экземпляров приложения одновременно. (Значение по умолчанию).

Атрибут и свойство sysMenu

Определяет, отображается ли системное меню в HTML приложении. Системное меню HTA обозначается программной иконкой в левом углу панели заголовка. Системное меню HTA показывает все команды, входящие в стандартное системное меню Windows, включая "Восстановить", "Переместить", "Размер", "Свернуть", "Развернуть", и "Закрыть". Возможные значения:

Yes	Системное меню отображается в панели заголовка. (Значение по умолчанию).
No	Системное меню не отображается в панели заголовка.

Атрибут и свойство version

Определяет номер версии HTML приложения.

Атрибут и свойство windowState

Определяет начальные размеры окна HTML приложения. Возможные значения:

Normal	Размер окна - стандартный размер для Microsoft Internet Explorer. (Значение по умолчанию).
Minimize	Появляется только заголовок окна на панели задач.
Maximize	Окно появляется развёрнутым во весь экран.

Пример

В этом маленьком примере объединены объектная модель, разметка страницы (HTML), каскадный лист стилей (CSS), Javascript и элементы WSH.

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:

Add workspace folder — открывает меню выбора папки.
Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
Нажмём Add.

После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down,чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

Шаг 6. Запускаем код и смотрим на результат

Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали

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

В следующих частях — о добавлении и проверке кода на JavaScript, и о том, как сделать работу с кодом ещё удобнее. Подпишитесь на нашу рассылку, чтобы не пропустить следующие выпуски.

В наше время при помощи JavaScript и HTML можно сделать практически всё. А благодаря Node-WebKit (недавно переименован в NW.js) можно делать даже десктопные приложения, которые выглядят, как нативные и имеют доступ ко всем частям ОС. Сегодня мы покажем, как создать простое десктопное приложение при помощи Node-WebKit, используя jQuery и несколько модулей для Node.js.

Node-WebKit — комбинация Node.js и встроенного браузера WebKit. Код JavaScript выполняется в особом окружении, из которого есть доступ и к стандартному API браузеров, и к Node.js.

Устанавливаем Node-WebKit

Для разработки нужно скачать исполняемый файл node-webkit и вызывать его из командной строки. Позже всё вместе упакуется в одну программу, которая будет запускаться пользователем.

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

Первое приложение

Мы подготовили для вас тестовое приложение для примера. Оно скачивает последние статьи с Tutorialzine и делает из них карусельку при помощи jQuery Flipster.

структура каталогов

В архиве содержатся вышеуказанные файлы. Выглядят они как статический сайт, но работать в браузере при запуске index.html не будут – им нужны модули Node.js. Для запуска воспользуйтесь командой

Она и запустит наше превосходное приложение.

Как это сделано

Всё начинается с файла package.json, который node-webkit ищет при запуске. Там описано, что нужно загружать и даны разные настройки окна.

package.json

В свойстве window описана необходимость открыть окно размера 800 х 500 пикселей и спрятать у него тулбар. В него загрузится файл из свойства main. У нас это

index.html

И наконец, наш файлик с JavaScript. Вот где самое интересное.

В браузере нельзя получить доступ к информации на другом домене через jQuery. Но node-webkit убирает эти ограничения.

Использованные модули:

– модуль node webkit для работы с десктопом – встроенный в Node.js модуль. Умеет возвращать объём свободной системной памяти – преобразует байты в человеко-читаемые строки 1337 → 1.34 kB.

Также есть jQuery и плагин jQuery-flipster. И всё!

Пакуем и распространяем

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

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

Элемент HTA:APPLICATION требует закрывающего тега.

Так как тэг элемента HTA:APPLICATION является пустым, он также может быть закрыт использую следующий прием.

При использовании вышеуказанного приема, прямому слэшу (/) должен предшествовать пробельный символ.

Атрибут и свойство id

Определяет идентификатор объекта - уникального имени внутри файла HTA-приложения.

Атрибут и свойство applicationName

Содержит имя приложения. Свойство не имеет значения по умолчанию.

Атрибут и свойство border

Dialog	Бордюр диалогового окна - пользователь не может изменить размер окна.
None	Окно без бордюра.
Thick	Толстый бордюр окна, плюс бордюр для изменения размера окна. (Значение по умолчанию).
Thin	Тонкий бордюр окна с заголовком.

Примечание

Атрибут и свойство borderStyle

Complex	Приподнятый и утопленный бордюр.
Normal	Нормальный бордюр. (Значение по умолчанию).
Raised	Приподнятый 3-D бордюр.
Static	3-D бордюр, обычно используемый для окон, не обрабатывающих ввод пользователя.
Sunken	Утопленный 3-D бордюр.

Атрибут и свойство caption

Yes	Панель заголовка отображается. (Значение по умолчанию).
No	Панель заголовка не отображается.

Свойство commandLine

Атрибут и свойство contextMenu

Определяет, появляется ли контекстное меню при нажатии на правую кнопку мыши. Возможные значения:

Yes	Контекстное меню появляется. (Значение по умолчанию).
No	Контекстное меню не появляется.

Атрибут и свойство icon

Атрибут и свойство innerBorder

Определяет, отображается ли внутренняя 3-D граница. Возможные значения:

Yes	Внутренняя 3-D граница отображается. (Значение по умолчанию).
No	Внутренняя 3-D граница не отображается.

Атрибут и свойство maximizeButton

Yes	Кнопка "Развернуть" отображается. (Значение по умолчанию).
No	Кнопка "Развернуть" не отображается.

Атрибут и свойство minimizeButton

Yes	Кнопка "Свернуть" отображается. (Значение по умолчанию).
No	Кнопка "Свернуть" не отображается.

Атрибут и свойство navigable

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

No	Будут открываться в новых окнах. (Значение по умолчанию).
Yes	Будут открываться в основном окне.

Атрибут и свойство scroll

Определяет, будут ли отображаться полосы прокрутки. Возможные значения:

Yes	Полосы прокрутки отображаются. (Значение по умолчанию).
No	Полосы прокрутки не отображаются.
Auto	Полосы прокрутки появляются только тогда, когда содержимое документа не умещается в клиентской области окна.

Атрибут и свойство scrollFlat

Определяет, в каком виде будут отображаться полосы прокрутки. Возможные значения:

Yes	Полосы прокрутки двухмерные.
No	Полосы прокрутки трёхмерные. (Значение по умолчанию).

Атрибут и свойство selection

Yes	Содержимое может быть выбрано. (Значение по умолчанию).
No	Содержимое не может быть выбрано.

Атрибут и свойство showInTaskBar

Определяет, будет ли HTML приложение появляться на панели задач Windows. Возможные значения:

Yes	Приложение отображается на панели задач. (Значение по умолчанию).
No	Приложение не отображается на панели задач.

Атрибут и свойство singleInstance

Yes	Может быть запущен только один экземпляр приложения.
No	Может быть запущенно несколько экземпляров приложения одновременно. (Значение по умолчанию).

Атрибут и свойство sysMenu

Yes	Системное меню отображается в панели заголовка. (Значение по умолчанию).
No	Системное меню не отображается в панели заголовка.

Атрибут и свойство version

Определяет номер версии HTML приложения.

Атрибут и свойство windowState

Определяет начальные размеры окна HTML приложения. Возможные значения:

Normal	Размер окна - стандартный размер для Microsoft Internet Explorer. (Значение по умолчанию).
Minimize	Появляется только заголовок окна на панели задач.
Maximize	Окно появляется развёрнутым во весь экран.

Пример

Хочу, чтобы клик по ссылке запускал указанную по ссылке программу с указанными параметрами. Без всяких вопросов. Клик - и крутится.

Такое сегодня хоть в одном браузере возможно?

А жаль. Вот бы дырище было :)

А что если это оформить в виде веб скрипта, крутящегося на каком-то простеньком сервере? А скрипт уже может запустить все что угодно.

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

>Такое сегодня хоть в одном браузере возможно?

ага, rm -rf? размечтался!

>А что если это оформить в виде веб скрипта, крутящегося на каком-то простеньком сервере?

Слишком геморройно. Коллекция и веб-сервер на одной машине, просмотр и запуск (по NFS) - с другой. Вариант - с сервера делать ssh+exec на другую машину не особо покатит, так как смотреть нужно с разных машин :) Хотя, если определять на ком запускать по IP. Можно, но всё равно геморройно.

Да, в IE2 это работало и было очень удобно для интранета :)

хотя можно заюзать и фишки xul

Под Linux есть ActiveX?

Да поставь винду, и скажи себе "да зато у меня линакс на сервере".

ЗЫ NFS клиент под винду должен быть, сам видел 100 лет назад.

Или можно через хелпер-аппликейшн. Когда браузер сам стартует прогу по типу файла.

> Коллекция и веб-сервер на одной машине, просмотр и запуск (по NFS) - с другой.

Дурацкий вопрос. Как запустить из HTML программу по ссылке? :)

Дурацкий ответ: По клику на ссылке javascript пишет в cookie команду с параметром. А демон (по inotify) парсит файл (sqlite базу) кукисов и исполняет команду.

Почему бы не передать в адресной строке команду с параметром?

Почему бы не передать в адресной строке команду с параметром?

Передать куда/кому? Локальному демону? Можно и так. Можно по-быстрому накостылить скрипт с netcat в качестве сетевого интерфейса.

>Под Linux есть ActiveX?

Но есть Java Plug-in.
Если апплет распространять с сертификатом (подписанный апплет), которому доверяет пользователь, то можно запускать сторонние приложения из апплета, давать апплету такие же права, как локальному приложению.
Но не всякий пользователь захочет/сможет импортировать сертификат для доверенных апплетов в собственное хранилище ключей Java (JKS).

ну это для лохалкоста, так что пойдет

чет я не догоняю. В любом браузере есть возможнсть открытия файлов разных типов (скорее всего MIME) разными прогами. Почему нельзя открывать выполяемые файлы bash'ем, например.

С параметрами думать надо.

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

> Конкретные функции не помню, но идея такова: яваскрипт ведь умеет писать в файлы?

> ну это для лохалкоста, так что пойдет

Для локалхоста можно вообще greasemonkey поставить со всеми правами на локальные файлы.

А если посмотреть в сторону джава-апплета?

А что, в этих ваших линуксах браузеры позволяют запускать файлы? НЕ ВЕ РЮ

Как-то браузеры могут iTunes открывать. Вот в эту сторону нужно и копать.

если правильно скучерявится то могут

Я так понимаю, можно сделать custom protol (exe:// например). Нужно просто ассоциации правильно прописать.

>ЗЫ NFS клиент под винду должен быть, сам видел 100 лет назад.

Угу. Но только даже сегодня нет работающего с русскими именами или со всякими «:» в имени.

Не катит. Мне нужно разное виде запускать в разных плейерах. Скажем, есть такие, которые только vlc корректно показывает. Как из mythtv вызывать vlc или kaffeine? Опять же, мне нужен просмотр деталей о фильма в виде полноценной страницы - с обложкой, сюжетом, ролями. Писать свой плагин? Проще придумать что-то с нормальным браузером. Ну и я так и не добился от mythtv безупречной работы. То с русским проблемы, то тормозит, то глючит.

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