WebBrowserコンテンツを再描画するとイベントが発生しますか？

Question

私は、WebBrowserコントロールを使用していて、ある時点で私は、例えば、持つ要素のスタイルを更新します。WebBrowser1.Document.GetElementById("elementId").Style = "color: red";

WebBrowserコントロールが変更されたスタイルを反映して自動的に再描画されますが、DocumentCompletedイベントにはありません火災。 この場合に発生するイベントはありますか？

Answer 1

デフォルトでは、WinForms WebBrowserコントロールはそのようなイベントを提供しません。 しかし、コントロールは非常に強力なので、いくつかのトリックであなたは望ましい動作を実装することができます：Documentプロパティを介してDOMツリーにアクセスできますが、Webブラウザで実行されているスクリプトとObjectForScriptingプロパティと方法Document.InvokeScript。 'Vanilla' JavascriptはDOMツリーの変更を聞くことができるので、そのような変更を登録するスクリプトを作成して、WebBrowserコントロールをホストするアプリケーションにルーティングすることができます。

以下の小さなクラスは、これがどのように機能するかの例です。もちろん、Javascriptリスナーを変更して、より特殊なイベントを受け取ることもできます。

[PermissionSet(SecurityAction.Demand, Name = "FullTrust")] 
[ComVisibleAttribute(true)] 
public class DOMListener 
{ 
    public event Action DOMChanged; 

    private WebBrowser Browser; 

    public DOMListener(WebBrowser webbrowser) 
    { 
     this.Browser = webbrowser; 
     this.Browser.ObjectForScripting = this; 
     this.Browser.DocumentCompleted += OnDOMLoaded; 
    } 

    private void OnDOMLoaded(object sender, WebBrowserDocumentCompletedEventArgs e) 
    { 
     HtmlElement script = this.Browser.Document.CreateElement("script"); 
     script.InnerHtml = "function listenToDOM() { document.addEventListener('DOMSubtreeModified', function(e) { window.external.DOMUpdate() }); }"; 
     this.Browser.Document.GetElementsByTagName("body")[0].AppendChild(script); 
     this.Browser.Document.InvokeScript("listenToDOM"); 
    } 

    public void DOMUpdate() 
    { 
     if (this.DOMChanged != null) this.DOMChanged.Invoke(); 
    } 
} 

ちょうど引数として、あなたのWebブラウザーを使用して、このクラスのインスタンスを作成しますDOMChangedイベントを経由して、DOMツリーの変更を受けることができるようになります：

private DOMListener Listener; 

public Form1() 
{ 
    this.InitializeComponent(); 
    this.Listener = new DOMListener(this.WebBrowser); 
    this.Listener.DOMChanged += this.OnDOMChanged; 
    this.WebBrowser.Navigate("www.google.de"); 
} 

void OnDOMChanged() 
{ 
    Console.WriteLine(DateTime.Now.ToLongTimeString() + ": DOM changed"); 
}