c#
  • css
  • webbrowser-control
  • 2010-04-01 190 views 8 likes 
    8

    我有一個項目,我正在VS2005中工作。我已經添加了WebBrowser控件。我通過DOM一個基本空的頁添加到控制C#WebBrowser控件不能應用css

    private const string _basicHtmlForm = "<html> " 
                 + "<head> " 
                 + "<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> " 
                 + "<title>Test document</title> " 
                 + "<script type='text/javascript'> " 
                 + "function ShowAlert(message) { " 
                 + " alert(message); " 
                 + "} " 
                 + "</script> " 
                 + "</head> " 
                 + "<body><div id='mainDiv'> " 
                 + "</div></body> " 
                 + "</html> "; 
    
    private string _defaultFont = "font-family: Arial; font-size:10pt;"; 
    
    private void LoadWebForm() 
    { 
        try 
        { 
         _webBrowser.DocumentText = _basicHtmlForm; 
        } 
        catch(Exception ex) 
        { 
         MessageBox.Show(ex.Message); 
        } 
    } 
    

    ,然後添加各種元件(使用_webBrowser.Document.CreateElement)。我也加載CSS文件:

    private void AddStyles() 
    { 
        try 
        { 
         mshtml.HTMLDocument currentDocument = (mshtml.HTMLDocument) _webBrowser.Document.DomDocument; 
         mshtml.IHTMLStyleSheet styleSheet = currentDocument.createStyleSheet("", 0); 
    
         TextReader reader = new StreamReader(Path.Combine(Path.GetDirectoryName(Application.ExecutablePath),"basic.css")); 
         string style = reader.ReadToEnd(); 
         styleSheet.cssText = style; 
        } 
        catch(Exception ex) 
        { 
         MessageBox.Show(ex.Message); 
        } 
    } 
    

    這裏是CSS頁面內容:

    body { 
        background-color: #DDDDDD; 
    } 
    
    .categoryDiv { 
        background-color: #999999; 
    } 
    
    .categoryTable { 
        width:599px; background-color:#BBBBBB; 
    } 
    
    #mainDiv { 
        overflow:auto; width:600px; 
    } 
    

    風格頁面加載成功,但也受到了影響頁面上的唯一因素是那些最初在頁面中(body和mainDiv)。我也嘗試在標題部分的元素中包含css,但它仍然隻影響創建頁面時存在的元素。

    所以我的問題是,有沒有人有任何想法,爲什麼css沒有被應用到頁面加載後創建的元素?在添加了所有元素之後,我也嘗試不應用CSS,但結果不會改變。

    +0

    我想知道的一樣。我一直認爲以這種方式創建網頁只是創建了一個陳舊/死/靜態頁面,並且呈現引擎停止檢查樣式,除非頁面中的元素導致呈現器「喚醒」。但即時通訊會讓你感到無聊。 我剛剛學會在最初創建文檔時將CSS作爲頭部的第一件事。 – 2010-04-01 18:16:10

    +2

    我知道這可能根本沒有幫助(這就是爲什麼它是一個評論),但我想從經驗告訴你,C#的WebBrowser組件是垃圾。看起來微不足道的事情往往最終會成爲頭痛的事情,而當它沒有做到你想做的事情時,你最終不得不去做底層的ActiveX組件......至少可以說是一團糟(〜5個不同的接口完全不同無組織的,具有任意組合的功能)。 我強烈建議儘可能使用不同的瀏覽器組件,例如基於Firefox引擎的GeckoFX。 – Teekin 2010-06-17 15:54:04

    +2

    這裏缺少一條關鍵信息:你正在創建的元素,那些沒有得到風格的元素。據推測,你將class屬性設置爲'「categoryDiv」','「categoryTable」'等等......但是,你的問題沒有明確說明。鑑於你所描述的結果,我更傾向於認爲元素創建中存在一個缺陷,而不是直接與樣式表創建相關的任何錯誤。話雖如此,你會意識到你迫使新樣式表成爲文檔中的第一個(因此也是最低優先級),對吧? – Shog9 2010-06-19 04:30:10

    回答

    0

    除非您發送此鏈接,否則很難說。

    但通常做風格相關的東西的最佳方法是,你已經在頁面中的css和你的c#代碼中,你只需將id或類添加到元素來查看樣式效果。

    +0

    當我在頁面中的樣式元素中創建它時,我曾嘗試在頁面中使用CSS,它仍然隻影響創建頁面時存在的正文元素,而不是通過代碼添加的任何元素。 – JamesL 2010-04-01 18:12:01

    +0

    你有沒有內聯樣式,所以你添加的CSS失去了他們的繼承層次? – XGreen 2010-04-01 18:17:56

    +0

    不,我沒有任何內聯樣式。 – JamesL 2010-04-01 18:21:47

    0

    我發現生成的帶有class屬性的標籤沒有得到它們的樣式應用。

    這是我的解決辦法做到這一點,生成文檔後:

    public static class WebBrowserExtensions 
    { 
        public static void Redraw(this WebBrowser browser) 
        { 
         string temp = Path.GetTempFileName(); 
         File.WriteAllText(temp, browser.Document.Body.Parent.OuterHtml, 
          Encoding.GetEncoding(browser.Document.Encoding)); 
         browser.Url = new Uri(temp); 
        } 
    } 
    
    +0

    你能解釋一下這一點嗎?我有一些div動態生成,他們有類屬性 - 現在我想設置顯示:無這個類,任何想法我可以這樣做嗎? – marifrahman 2015-01-08 02:50:02

    +0

    @marifrahman我不能幫你,這聽起來像值得[它自己的問題](http://stackoverflow.com/questions/ask) – hultqvist 2015-01-08 22:02:48

    0

    我用similiar控制,而不是web瀏覽器,我加載HTML頁面與「默認」樣式規則,我改變了計劃中的規則。

    (缺點 - 修的,當我需要添加一個規則,我也需要改變它的代碼)

    ' ---------------------------------------------------------------------- 
    Public Sub mcFontOrColorsChanged(ByVal isRefresh As Boolean) 
        ' ---------------------------------------------------------------------- 
        ' Notify whichever is concerned: 
        Dim doc As mshtml.HTMLDocument = Me.Document 
        If (doc.styleSheets Is Nothing) Then Return 
        If (doc.styleSheets.length = 0) Then Return 
        Dim docStyleSheet As mshtml.IHTMLStyleSheet = CType(doc.styleSheets.item(0), mshtml.IHTMLStyleSheet) 
        Dim docStyleRules As mshtml.HTMLStyleSheetRulesCollection = CType(docStyleSheet.rules, mshtml.HTMLStyleSheetRulesCollection) 
    
        ' Note: the following is needed seperately from 'Case "BODY" 
        Dim docBody As mshtml.HTMLBodyClass = CType(doc.body, mshtml.HTMLBodyClass) 
        If Not (docBody Is Nothing) Then 
        docBody.style.backgroundColor = colStrTextBg 
        End If 
    
        Dim i As Integer 
        Dim maxI As Integer = docStyleRules.length - 1 
        For i = 0 To maxI 
        Select Case (docStyleRules.item(i).selectorText) 
         Case "BODY" 
         docStyleRules.item(i).style.fontFamily = fName ' "Times New Roman" | "Verdana" | "courier new" | "comic sans ms" | "Arial" 
         Case "P.myStyle1" 
         docStyleRules.item(i).style.fontSize = fontSize.ToString & "pt" 
         Case "TD.myStyle2" ' do nothing 
         Case ".myStyle3" 
         docStyleRules.item(i).style.fontSize = fontSizePath.ToString & "pt" 
         docStyleRules.item(i).style.color = colStrTextFg 
         docStyleRules.item(i).style.backgroundColor = colStrTextBg 
         Case Else 
         Debug.WriteLine("Rule " & i.ToString & " " & docStyleRules.item(i).selectorText) 
        End Select 
    
        Next i 
    
        If (isRefresh) Then 
        Me.myRefresh(curNode) 
        End If 
    
    End Sub 
    
    0

    這可能是因爲在網頁上的對象存在於該頁面被時間加載,所以每種風格都可以應用。僅僅因爲您將節點添加到DOM樹中,並不意味着它可以在瀏覽器內部操縱和呈現其所有屬性。 上面的方法似乎使用重載頁面(DOM)的方法,這表明這可能是這種情況。 總之,刷新頁面後,添加了一個元素

    0

    這聽起來好像phq已經經歷了這一點。我認爲我會採取的方式是添加一個jQuery的引用到你的html文檔(從一開始)。

    然後在頁面內部創建一個JavaScript函數,該函數接受元素ID和要應用的類的名稱。在函數內部,使用jquery動態應用有問題的類或直接修改css。例如,使用jQuery的.addClass或.css函數來修改元素。

    從那裏,在你的C#代碼,以後你添加的元素動態地調用這個JavaScript作爲由Rick施特拉爾說明如下:http://www.west-wind.com/Weblog/posts/493536.aspx

    1

    一個解決方案是將HTML檢查設置DocumentText之前,並在注入CSS客戶端。我不設置控件url屬性,而是通過WebCLient獲取HTML,然後設置DocumentText。也許設置DocumentText(或你的情況文件)後,你操作DOM能得到它的重新渲染正確

    private const string CSS_960 = @"960.css"; 
    private const string SCRIPT_FMT = @"<style TYPE=""text/css"">{0}</style>"; 
    private const string HEADER_END = @"</head>"; 
    
    
    public void SetDocumentText(string value) 
    { 
        this.Url = null; // can't have both URL and DocText 
        this.Navigate("About:blank"); 
        string css = null; 
        string html = value; 
    
        // check for known CSS file links and inject the resourced versions 
        if(html.Contains(CSS_960)) 
        { 
         css = GetEmbeddedResourceString(CSS_960); 
         html = html.Insert(html.IndexOf(HEADER_END), string.Format(SCRIPT_FMT,css)); 
        } 
    
        if (Document != null) { 
         Document.Write(string.Empty); 
        } 
        DocumentText = html; 
    } 
    
    6

    我做了少許修改您的AddStyles()方法,它爲我工作。 你從哪裏來的?我從「_webBrowser_DocumentCompleted」中調用它。

    我必須指出,我在修改DOM後調用AddStyles。

    private void AddStyles() 
    { 
        try 
        { 
         if (_webBrowser.Document != null) 
         { 
          IHTMLDocument2 currentDocument = (IHTMLDocument2)_webBrowser.Document.DomDocument; 
    
          int length = currentDocument.styleSheets.length; 
          IHTMLStyleSheet styleSheet = currentDocument.createStyleSheet(@"", length + 1); 
          //length = currentDocument.styleSheets.length; 
          //styleSheet.addRule("body", "background-color:blue"); 
          TextReader reader = new StreamReader(Path.Combine(Path.GetDirectoryName(Application.ExecutablePath), "basic.css")); 
          string style = reader.ReadToEnd(); 
          styleSheet.cssText = style; 
    
         } 
        } 
        catch (Exception ex) 
        { 
         MessageBox.Show(ex.Message); 
        } 
    } 
    

    這裏是我的DocumentCompleted處理器(我加了一些樣式basic.css用於測試):

    private void _webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e) 
    { 
        HtmlElement element = _webBrowser.Document.CreateElement("p"); 
        element.InnerText = "Hello World1"; 
        _webBrowser.Document.Body.AppendChild(element); 
    
        HtmlElement divTag = _webBrowser.Document.CreateElement("div"); 
        divTag.SetAttribute("class", "categoryDiv"); 
        divTag.InnerHtml = "<p>Hello World2</p>"; 
        _webBrowser.Document.Body.AppendChild(divTag); 
    
    
        HtmlElement divTag2 = _webBrowser.Document.CreateElement("div"); 
        divTag2.SetAttribute("id", "mainDiv2"); 
        divTag2.InnerHtml = "<p>Hello World3</p>"; 
        _webBrowser.Document.Body.AppendChild(divTag2); 
    
        AddStyles(); 
    } 
    

    這是我得到的(修改的樣式,使之醜如單人可以希望做到這一點:D):

    alt text http://www.freeimagehosting.net/uploads/2e372f7276.png

    +0

    只是幾個意見,對我來說,使用此代碼一個wpf網頁瀏覽器控件,我不得不使用WebControl.Document作爲mshtml.HTMLDocument;獲取文檔並將其應用於Navigated事件。謝謝 – Kezza 2013-02-12 16:38:28

    +1

    @ LifeH2O:Mission已完成。 :) – 2013-12-12 02:01:24

    相關問題