How to access span with needed innerhtml?

Question

Say my WebBrowser1 downloaded a page that has a following line:

<span customattr="hamolulu">hamolulu</span>

It is inside of a td tag, inside of big table, inside of iFrame, inside of div etc.

How to I click this thing using c# ?

I need to do something following:

int i = 0;
for (i = 0; i <= 500; i++)
{
    if (webBrowser1.Document.GetElementsByTagName("span")[i].GetAttribute("customattr") == "hamolulu")
    {
        webBrowser1.Document.GetElementsByTagName("span")[i].InvokeMember("click");
        break;
    }//end if
}// end for

but for some reason it does not work this way, so I'm thinking if it's possible to check the innerHTML of the span, or innerText?

I tried both:

webBrowser1.Document.GetElementsByTagName("span").InnerHTML == "hamolulu"
webBrowser1.Document.GetElementsByTagName("span").InnerText == "hamolulu"

And I failed both times.

Update:
I just noticed that the line is actually like this:

<span customattr="hamolulu"><a>hamolulu</a></span>

So I wrote a simple function:

int i = 0;
for (i = 0; i <= webBrowser1.Document.GetElementsByTagName("a").Count - 1; i++)
{
  log(i.ToString()+ " : " +webBrowser1.Document.GetElementsByTagName("a")[i].InnerHtml);
} //log(string) is a custom function that saves all strings to a file log.txt

And what I've seen is that this link (and span) does not show up in my log. In other words, getElementsByTagName("span") and getElementsByTagName("a") doesn't see the item. My guess is that it is because of iFrame. Do you have any thoughts about this?

Answer 1

another solution using no js (because you don't own the "page") since it is inside an iframe then you should search within that iframe

HtmlElementCollection iframes = WebBrowser1.Document.GetElementsByTagName("iframe");
HtmlElement iframe = iframes(0 /* iframe index */); // 

HtmlElementCollection spans = iframe.Document.GetElementsByTagName("span");
for (i = 0; i < spans.Count; i++) {
    HtmlElement span = spans(i);
    if (span.GetAttribute("customAttr") == "customAttrValue") {
        string onclick = span.Children(0).GetAttribute("onclick"); //span.Children(0) should return the <a>
        WebBrowser1.Document.InvokeScript(onclick);
    }
}

Answer 2

Unless I am missing something...

<span id="hamolulu">hamolulu</span>

Then when you want to change it...

document.getElementById('hamolulu').innerHTML="<h1>Test!</h1>";

Answer 3

you can make it simpler by using JavaScript and invoking it from c# whenever you need to.

WebBrowser1 .Document .InvokeScript ("functionName")

javascript:

function functionName(){

  var spans = document.getElementsByTagName('SPAN');
  for (i = 0; i < spans.length; i++)
  {
    var span = spans[i];
    if (span.getAttribute("customattr") == "hamolulu")
    {
        eval(span.getAttribute('onclick')); // .. be careful "span" has no "click()" method. you should use the onlick attribute if available
        break;
    }//end if
  }// end for
}

Answer 4

If you set up your span as an HTML server control:

<span runat="server" id="myspan" customattribute="customvalue">hello world</span>

Then you can register an event handler on page load:

 protected void Page_Load(object sender, EventArgs e)
    {
        myspan.Attributes["onclick"] = "this.innerText='hamolulu'";
    }

Another way to do it is using Page Methods which would call a page C# method using AJAX.