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

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

При использовании 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), но в коротком виде.