Использование JavaScript в WebBrowser .NET/C#

👁 224 просмотров

При использовании JavaScript в .NET объекте WebBrowser нужно учитывать некоторые ньюансы, связанные с загрузкой страницы. Для того, чтобы выполнить какой-то JavaScript — код необходимо проверить загрузку страницы. Простое решение — это использование в C# специального слушателя события — WebBrowser.DocumentCompleted, который вызывается, когда страница полностью загружена.

Пример вызовава JavaScript — кода из C#

Ниже дан пример его использования. Пусть у нас есть HTML сраница index.html со следующим JavaScript — методом, который определен в head

<script>
	function runScript(){
		alert("Hello World!");
	}
</script>

Тогда вызов данного метода через C# будет выглядеть вот так

public MyForm()
{
//...
//Сначала определяем новое событие для браузера и передаем имя обработчика
            string appDir = Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName().CodeBase);
            webBrowser.Url = new Uri(Path.Combine(appDir, @"pages\index.html"));
  webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(runWebScripts);
}

//Далее, в классе определяем новый обработчик
void runWebScripts(object sender, WebBrowserDocumentCompletedEventArgs e)
{
   webBrowser.Document.InvokeScript("runScript", new object[] { });
}

 Пример создания JavaScript — кода и его запуска из C#

Теперь посмотрим как создать новый элемент в DOM через C# и создать в нем код JavaScript

public MyForm()
{
//...
//Сначала определяем новое событие для браузера и передаем имя обработчика
            string appDir = Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName().CodeBase);
            webBrowser.Url = new Uri(Path.Combine(appDir, @"pages\index.html"));
  webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(runWebScripts);
}

//Далее, в классе определяем новый обработчик
void runWebScripts(object sender, WebBrowserDocumentCompletedEventArgs e)
{

            HtmlDocument doc = webBrowser.Document;
            HtmlElement head = doc.GetElementsByTagName("head")[0];
            HtmlElement s = doc.CreateElement("script");
            s.SetAttribute("text", "function sayHello() { alert('hello'); }");
            head.AppendChild(s);
            webBrowser.Document.InvokeScript("sayHello");

}

Мы добаляем в тег head новый элемент script и устанавливаем в качестве его атрибута text JavaScript — код и далее вызываем этот код с помощью метода InvokeScript

Подключение jQuery в WebBrowser через C# в виде гиперссылки

Давайте посмотрим, как использовать библиотеку jQuery в своем проекте на C#. Для этого нам необходимо создать новый элемент script и передать в атрибут src значение ссылки, для примера подключим библиотеку из стандартной ссылки Google

public MyForm()
{
//...
//Сначала определяем новое событие для браузера и передаем имя обработчика
            string appDir = Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName().CodeBase);
            webBrowser.Url = new Uri(Path.Combine(appDir, @"pages\index.html"));
  webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(runWebScripts);
}
//Далее, в классе определяем новый обработчик
void runWebScripts(object sender, WebBrowserDocumentCompletedEventArgs e)
{
            //Получаем доступ к тегу head
            HtmlDocument doc = webBrowser.Document;
            HtmlElement head = doc.GetElementsByTagName("head")[0];

            //Подключаем библиотеку
            HtmlElement jQuery = doc.CreateElement("script");
            jQuery.SetAttribute("src", "http://code.jquery.com/jquery-latest.min.js");
            head.AppendChild(jQuery);
            
            //Далее запускаем код, содержащий jQuery
            HtmlElement script = doc.CreateElement("script");
            script.SetAttribute("text", "function setRedColor() { $('body').css({ 'background-color': 'red' }); }");
            head.AppendChild(script);

            //Вызываем метод, содержащий код jQuery
            webBrowser.Document.InvokeScript("setRedColor");

}

Подобным образом можно подключить не только jQuery библиотеку, но и любой удаленный JavaScript файл.

Подключение jQuery в WebBrowser через C# из локального хранилища

Если нам необходимо подгрузить jQuery или любой JavaScript — файл локально, то тут необходимо учитывать некоторые особенности, связанные с jQuery, так как при локальном подключении у вас может выскочить ошибка такого рода: Object doesn’t support property or method ‘defineProperty’, который означает: Объект не поддерживает свойство или метод ‘defineProperty’. Что непонятно, так это то, что при подключении через удаленную гиперссылку эта ошибка не выводиться и браузер работает нормально. Данная ошибка актуальная для версий IE 10 — 11 и выше, возможно. В IE он поддерживается, а в IE 8 — ограниченно. Решением данной проблемы является использование тегов для переключения браузера в режимы совместимости с ранними версиями. Подробно про это написано в официальной статье Microsoft «Specifying legacy document modes»

Из данной статьи следует, что для совместимости нужно использовать мета — тег

<meta http-equiv="x-ua-compatible" content="IE=edge" />

Запись атрибута content дает указание на то, с какой версией IE следует иметь совместимость. В нашем случае, данная запись эквивалентна использованию типа документа HTML5 и совместимости с другими браузерами. Это заставит Internet Explorer работать в режиме последней поддерживаемой спецификации документа. Значение «IE=edge» является наиболее полезным для регулярного поддерживания веб-сайтов, которые отрабатываются на совместимость между несколькими браузерами, в том числе Internet Explorer.
Данный тег совместимости необходимо в начале тега head в документе.

Итак, теперь, собственно сам код подключения. HTML документ будет таким

 

...
<head>
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
</head>
...

C# — код будет таким

HtmlDocument doc = wbTestEditor.Document;
HtmlElement head = doc.GetElementsByTagName("head")[0];
HtmlElement s = doc.CreateElement("script");
s.SetAttribute("src", Environment.CurrentDirectory + @"\pages\js\jquery-2.1.3.min.js");
head.AppendChild(s);

Свойство Environment.CurrentDirectory содержит корневую папку запускаемой программы, а @ нужен для обработки слэшей в нормальном виде, чтобы не писать как \\. Environment.CurrentDirectory — это тоже самое, если бы мы писали как Path.GetDirectoryName(Assembly.GetExecutingAssembly().GetName().CodeBase), но в коротком виде.

Введение в Node.js и запуск «Hello World!»

👁 70 просмотров

Node.js — это интерпретатор для языка JavaScript, который используется в виде серверного языка программирования ровно также, как и PHP, Ruby, Python и т.д. Так, зачем же надо было создавать еще один интерпретатор, если подобных уже немало? А затем, что это совсем необычная технология взаимодействия клиент-сервер. Основное отличие данного интерпретатора в том, что она позволяется быстро исполнять код JavaScript на стороне сервера и мгновенно ассинхронно передавать ответ на запросы удаленных пользователей. По сути дела, Node.js  — движок V8, на котором работает браузер Chrome от Google, который переделали в сервер, добавив к нему необходимые модули работы с файловой системой, с HTTP — запросами, c сокетами и т.д.

Установка Node.js

Скачать и установить Node.js — это проще простого. Для этого заходим на официальный сайт проекта и жмем на зеленную кнопку INSTALL. После скачивания установка происходит в стандартном режиме, если у вас Windows x64, то установщик по умолчанию установит в Node.js  в папке C:\Program Files\nodejs\, соглашаемся с установщиком

node-js-default-path

После установки мы сможем передавать команды управления для Node.js из командной строку, через ключевое слово node.

Запуск рабочего примера «Hello World!»

Давайте запустим пример работы в среде Node.js. Для этого нам нужно место, где будут храниться наши файлы сервера. Представьте это как папку хранения хостов Denvera или OpenServer, хотя для Node.js нет принципиальной разницы где будут храниться ваши исполняемые файлы, но мы условимся хранить наши файлы на диске C:/NodeServer/hostname.loc, а в папку hostname.loc добавим файл index.js со следующим сожержимым

var http = require('http');//Подключаем подуль приема и отправки по протоколу Http
//Создаем объект нового сервера
http.createServer(function (req, res) {
  //Передаем заголовок
  res.writeHead(200, {'Content-Type': 'text/plain'});
  //Выводим запись
  res.end('Hello World\n');
}).listen(1337, '127.0.0.1');//Указываем адрес хоста
//Уведомляем в консоли о том, что запущен наш сервер
console.log('Server running at http://127.0.0.1:1337/');

После записи данного кода сохраняем данный файл и закрываем, переходим в консоль и набираем команду исполнения данного файла с указанием пути

node C:/NodeServer/hostname.loc/index.js

start-node-js-hello-worldЕсли все удачно установилось и запустилось, то увидите следующее собщение

start-node-js-hello-world-result

Теперь отрываем браузер и вводим адрес http://127.0.0.1:1337/ и убеждаемся, что у нас вышла долгожданная строка

node-js-result-in-browser-hw

 

На этом все, Node.js установлен и готов для дальнейшей работы.

 

Safe Manager — программа для изменения атрибутов файлов

👁 144 просмотров

Safe Manager — программа для Windows, которая помогает устанавливать или изменять атрибуты любого файла. С помощью данной программы вы можете также скрывать файлы на компьютере под пароль, возведя файл в собственный формат программы .smf и извлекать их из сейфа, введя поставленный пароль. С помощью атрибутов можете скрывать файл на компьютере, установив атрибут Hidden, а также запретить его удалять с компьютера установив атрибут System. Программа очень легкая и весит от силы 1 Мгб и со скромными потребностями .NET 3.5 или выше.

Prewiev Image

Примечание: При скрытии файла имейте в виду, что увидеть его и изменить его атрибут на видимый можно, в дальнейшем,  через настройки папок и файлов Windows(Панель управления\Все элементы панели управления\Параметры папок) сняв галочку с пункта Скрывать защищенные системные файлы.