1 (изменено: Rom5, 2014-07-26 13:24:30)

Тема: JS: html-утилита в помощь HTA-программистам/авторам Web-кнопкодавов

Кратко об утилите контекстного меню IE (работает и для HTA) "IE_OuterHtml.htm"

  • показывает достаточно полный набор свойств выделенного на вызывающей форме (документа в IE или HTA-приложения) объекта;

  • навигация по объектам формы: родители/потомки, фильтры узлов по названиям и именам и т.п.;

  • исполнение javascript-кода с участием объектов вызывающей формы, простой редактор стиля элемента формы.


Страница со скриншотами - scripttools/home/context-menu-for-ie/ie_outerhtml



Инсталл – запуск скриптом «IE_outerHtml_setup.vbs» добавления пункта «Viewer outerHtml» контекстного меню IE.

(Запускать vbs под той у/з, под которой будем запускать HTA. Если пукнт меню добавляли после старта приложения, то его прийдётся перезапустить.)



Много букв о том - для чего создавалась и что делает:

+ открыть спойлер

Для чего создавалась и что делает.

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

Сначала была задумка скриптом из html, вызываемого по своему пункту контекстного меню IE (оно доступно и в движке mshta), править все элементы формы на предмет добавления в текст «title» значения «id», но решил, что из-за множественных вложенностей одних элементов в другие получится ерунда и решил просто отображать «outerHtml» того элемента, который был выделен на странице перед вызовом меню.


Как показала практика – полученный скриптом «parentElement ()» для «selection.createRange ()» вызвавшего меню документа возвращает ссылку на объект не всегда на тот, который хотелось бы увидеть:)

Поэтому благодаря идее, озвученной kalabuni в теме IE, Javascript: как узнать перечень выделеных на странице элементов организовал построение списка всех «родительских» узлов, вплоть до “#document” с возможностью переключения в утилите не только на отображение свойств выбранного родителя, но и возможность выбора вложенных в него “childNode”.

Таким образом получился простенький исследователь свойств и аттрибутов элементов формы с возможностью перемещения по родителям/детям, копирования в буффер ID интересующих объектов или значений их свойств. Можно поисследовать также и узел HTML\HEAD\APPLICATION приложения.


«И тут Остапа понесло».

Решил, раз уж окно утилиты имеет доступ к объектам родительского окна, то дам себе возможность выполнения и пользовательских js-команд использующих ссылку объект вызвавшего окна, реализация - это всего лишь редактирование в  «textarea» скрипта и выполнение его методом «eval()».

Для удобства добавил в программку и редактирование самых ходовых аттрибутов стиля текущего элемента: color, background, font-weight, font-style, font-size, font-family. Цвета можно выбирать из списка цветов с предопределёнными именами. Т.е. не надо перезапускать своё HTA-приложении для испытания проб внесения в него интерфейсных правок – все вносиммые изменения сразу отображаются в форме работающего приложения, после получения желаемого результата дизайна – копипастим в исходный текст полученнные аттрибуты «style».


"Боевое" применение утилиты для помощи в правке скрипта, управляющего элементами Web-формы (в моём случае - автоматизация вызова параметизированного Web-отчёта с заполнением полей) показало необходимость переходов к объектам формы ещё и по id либо фильтруя объекты по имеющися названиям nodeName + type.



Замеченные нюансы выделения содержимого окна перед вызовом «Viewer outerHtml»:

  • вызов меню приводит к получению объекта INPUT (text/button) и без предварительного выделения;

  • INPUT text с «disabled» - выделение содержимого обязательно;

  • выделяем содержимое в ячейке - получаем её <TD> / <TH>, конечно, если не было других вложений;

  • выделяем содержимое нескольких ячеек – получаем <TR>;

  • выделяем несколько строк – получаем <TBODY>;

  • сходу получить объект SELECT/BUTTON не получится, как не выделяя, будем получать объект в который он входит - далее надо переходить к "потомкам"


Т.к. я не особо продвинутый javascript-автор, то возможно некоторые реализации выглядят "по-колхозному", буду рад критике и предложениям.

Надеюсь, примочка пригодится.


ps.был забыл приложить архив с исходником:), исправлено.

Post's attachments

IE_outerHtml.zip 17.86 kb, 23 downloads since 2014-07-26 

You don't have the permssions to download the attachments of this post.
WBR. Roman

2

Re: JS: html-утилита в помощь HTA-программистам/авторам Web-кнопкодавов

Rom5, спасибо! Очень хорошая вещь. Есть над чем работать. Например, не вижу смысла отображать встроенные функции объект, где, кроме "native code", ничего нет.