Search code examples
html.netiframechartsfill

how to fill an iframe with html code

I am working on a project where HTML code is being generated to display graphs generated by Google's visualization API. So when the page loads it creates an HTML snippet that has the HTML code to display the graphs. What I would like to do is take this raw HTML code and load it into an iframe so it can be displayed on the page. In .NET is there a way to fill an iframe on button click with raw HTML code?

VB CODE:
public html as String

 Sub Page_Load(Src As Object, E As EventArgs)

 Dim htmlHeader As String = "<!DOCTYPE html PUBLIC " & Chr(34) & "-//W3C//DTD XHTML 1.0 Transitional//EN" & Chr(34) & "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" & Chr(34) & "><html xmlns=" & Chr(34) & "http://www.w3.org/1999/xhtml" & Chr(34) & "><head><meta http-equiv=" & Chr(34) & "Content-Type" & Chr(34) & " content=" & Chr(34) & "text/html; charset=utf-8" & Chr(34) & " /><title>Test</title>" & Chr(60) & "script type = " & Chr(34) & "text/javascript" & Chr(34) & " src = " & Chr(34) & "http://canvg.googlecode.com/svn/trunk/canvg.js" & Chr(34) & ">" & Chr(60) & "/script>" & Chr(60) & "script type = " & Chr(34) & "text/javascript" & Chr(34) & " src = " & Chr(34) & "http://canvg.googlecode.com/svn/trunk/rgbcolor.js" & Chr(34) & ">" & Chr(60) & "/script></head><body>"
 Dim htmlFooter As String = Chr(60) & "div>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart1_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart2_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart3_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart4_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart5_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "div style=" & Chr(34) & "clear:both" & Chr(34) & ">" & Chr(60) & "/div></div></body></html>"
 Dim htmlChartheader As String = Chr(60) & "script src=" & Chr(34) & "https://www.google.com/jsapi" & Chr(34) & " type=" & Chr(34) & "text/javascript" & Chr(34) & ">" & Chr(60) & "/script>" & Chr(60) & "script type=" & Chr(34) & "text/javascript" & Chr(34) & ">   /*CACHARTS*/   google.load(" & Chr(34) & "visualization" & Chr(34) & ", " & Chr(34) & "1" & Chr(34) & ", {packages:[" & Chr(34) & "corechart" & Chr(34) & "]});   google.setOnLoadCallback(drawChart);   function drawChart() {    var data;    var chart;"
 Dim htmlChartfooter As String = " window.scroll(0,0);  } " & Chr(60) & "/script>"
 Dim htmlChart1 As String = ""
 Dim htmlChart2 As String = ""
 Dim htmlChart3 As String = ""
 Dim htmlChart4 As String = ""
 Dim htmlChart5 As String = ""
 Dim dataPoints As String = ""
 Dim qCount As Integer = 0          

 dataPoints += "data.setValue(" & qCount & ",0,'" & "Q1" & "'); "
 dataPoints += "data.setValue(" & qCount & ",1," & "141000" & "); "
 qCount += 1
 dataPoints += "data.setValue(" & qCount & ",0,'" & "Q2" & "'); "
 dataPoints += "data.setValue(" & qCount & ",1," & "151000" & "); "
 qCount += 1
 dataPoints += "data.setValue(" & qCount & ",0,'" & "Q3" & "'); "
 dataPoints += "data.setValue(" & qCount & ",1," & "161000" & "); "
 qCount += 1
 dataPoints += "data.setValue(" & qCount & ",0,'" & "Q4" & "'); "
 dataPoints += "data.setValue(" & qCount & ",1," & "145000" & ");"                      

 htmlChart1 = "document.getElementById('chart1_div').scrollIntoView();chartTitle = 'Regular & REO Average Sold Price';   xColumn = 'Quarter';   yColumn = 'Avg Sold Price';   zColumn = 'Smoothed';   yTitle = 'Price in Thousands';   chart = new google.visualization.LineChart(document.getElementById('chart1_div'));   legendType = 'none';   data = new google.visualization.DataTable();   data.addColumn('string', xColumn);   data.addColumn('number', yColumn);   data.addColumn('number', zColumn);   data.addRows(10); " & dataPoints & "chart.draw(data, {title: chartTitle ,vAxis:{title: yTitle} ,width: 500, height: 500 ,hAxis:{slantedText:true, slantedTextAngle:90, textStyle:{fontSize:10}} ,curveType:'function' ,lineWidth:1 ,pointSize:1 ,legend:'none' ,legend: legendType   }); "          
    html = htmlHeader & htmlChartheader & htmlChart1 & htmlChartfooter & htmlFooter         
    textbox1.text = html     
 End sub

 Sub Button1_Click(Byval sender as object,Byval e as EventArgs)
   filliFrame(html)
 End Sub

 Sub filliFrame(htmlcode as String)
   This is where I would like to write the HTML to the iFrame
   ?? iframe.write(htmlcode) ??
 End Sub
Solution

  • I was able to accomplish this by storing the html code into a hidden field and using a JavaScript function to push the code to the iFrame.

    VB CODE:

    Sub Page_Load(Src As Object, E As EventArgs)
  Dim html as String = ""
  Dim htmlHeader As String = "<!DOCTYPE html PUBLIC " & Chr(34) & "-//W3C//DTD XHTML 1.0 Transitional//EN" & Chr(34) & "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" & Chr(34) & "><html xmlns=" & Chr(34) & "http://www.w3.org/1999/xhtml" & Chr(34) & "><head><meta http-equiv=" & Chr(34) & "Content-Type" & Chr(34) & " content=" & Chr(34) & "text/html; charset=utf-8" & Chr(34) & " /><title>Test</title>" & Chr(60) & "script type = " & Chr(34) & "text/javascript" & Chr(34) & " src = " & Chr(34) & "http://canvg.googlecode.com/svn/trunk/canvg.js" & Chr(34) & ">" & Chr(60) & "/script>" & Chr(60) & "script type = " & Chr(34) & "text/javascript" & Chr(34) & " src = " & Chr(34) & "http://canvg.googlecode.com/svn/trunk/rgbcolor.js" & Chr(34) & ">" & Chr(60) & "/script></head><body>"
  Dim htmlFooter As String = Chr(60) & "div>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart1_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart2_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart3_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart4_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "span class=" & Chr(34) & "float-left" & Chr(34) & " id=" & Chr(34) & "chart5_div" & Chr(34) & ">" & Chr(60) & "/span>" & Chr(60) & "div style=" & Chr(34) & "clear:both" & Chr(34) & ">" & Chr(60) & "/div></div></body></html>"
  Dim htmlChartheader As String = Chr(60) & "script src=" & Chr(34) & "https://www.google.com/jsapi" & Chr(34) & " type=" & Chr(34) & "text/javascript" & Chr(34) & ">" & Chr(60) & "/script>" & Chr(60) & "script type=" & Chr(34) & "text/javascript" & Chr(34) & ">   /*CACHARTS*/   google.load(" & Chr(34) & "visualization" & Chr(34) & ", " & Chr(34) & "1" & Chr(34) & ", {packages:[" & Chr(34) & "corechart" & Chr(34) & "]});   google.setOnLoadCallback(drawChart);   function drawChart() {    var data;    var chart;"
  Dim htmlChartfooter As String = " window.scroll(0,0);  } " & Chr(60) & "/script>"
  Dim htmlChart1 As String = ""
  Dim dataPoints As String = ""
  Dim qCount As Integer = 0          

  dataPoints += "data.setValue(" & qCount & ",0,'" & "Q1" & "'); "
  dataPoints += "data.setValue(" & qCount & ",1," & "141000" & "); "
  qCount += 1
  dataPoints += "data.setValue(" & qCount & ",0,'" & "Q2" & "'); "
  dataPoints += "data.setValue(" & qCount & ",1," & "151000" & "); "
  qCount += 1
  dataPoints += "data.setValue(" & qCount & ",0,'" & "Q3" & "'); "
  dataPoints += "data.setValue(" & qCount & ",1," & "161000" & "); "
  qCount += 1
  dataPoints += "data.setValue(" & qCount & ",0,'" & "Q4" & "'); "
  dataPoints += "data.setValue(" & qCount & ",1," & "145000" & ");"                      

  htmlChart1 = "document.getElementById('chart1_div').scrollIntoView();chartTitle = 'Regular & REO Average Sold Price';   xColumn = 'Quarter';   yColumn = 'Avg Sold Price';   zColumn = 'Smoothed';   yTitle = 'Price in Thousands';   chart = new google.visualization.LineChart(document.getElementById('chart1_div'));   legendType = 'none';   data = new google.visualization.DataTable();   data.addColumn('string', xColumn);   data.addColumn('number', yColumn);   data.addColumn('number', zColumn);   data.addRows(10); " & dataPoints & "chart.draw(data, {title: chartTitle ,vAxis:{title: yTitle} ,width: 500, height: 500 ,hAxis:{slantedText:true, slantedTextAngle:90, textStyle:{fontSize:10}} ,curveType:'function' ,lineWidth:1 ,pointSize:1 ,legend:'none' ,legend: legendType   }); "          

  html = htmlHeader & htmlChartheader & htmlChart1 & htmlChartfooter & htmlFooter
  lblhtmlholder.text = html        
End sub



Sub Button1_Click(Byval sender as object,Byval e as EventArgs) 
  hdnTextbox1.Value = lblhtmlholder.text
  filliFrame()
End Sub

Sub filliFrame()
  Page.ClientScript.RegisterStartupScript(Me.GetType(), "myKey", "injectHTML();", True) 
End Sub

    HTML CODE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type = "text/javascript" src = "//canvg.googlecode.com/svn/trunk/canvg.js"></script>
  <script type = "text/javascript" src = "//canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
  <script type = "text/javascript">
    function injectHTML(){

    //step 1: get the DOM object of the iframe.
    var iframe = document.getElementById('iFrame1');        
    var html_string = document.getElementById("hdnTextbox1").value
    document.getElementById("hdnTextbox1").value = ""

    try{                
      //step 2: obtain the document associated with the iframe tag
      //most of the browser supports .document. Some supports (such as the NetScape series) .contentDocumet, while some (e.g. IE5/6) supports .contentWindow.document
      //we try to read whatever that exists.
      var iframedoc = iframe.document;
      if (iframe.contentDocument)
        iframedoc = iframe.contentDocument;
      else if (iframe.contentWindow)
        iframedoc = iframe.contentWindow.document;

        if (iframedoc){
          // Put the content in the iframe
          iframedoc.open();
          iframedoc.writeln(html_string);
          iframedoc.close();
        } else {
          //just in case of browsers that don't support the above 3 properties.
          alert('Cannot inject dynamic contents into iframe.');
        }                           
      }
      catch(err)
      {
        alert(err.message);
      }      
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
    <asp:label id="lblHtmlHolder" runat="server" visible="false" />
    <input type="hidden" id="hdnTextbox1" runat="server" />
    <input type="hidden" id="hdnChart1" runat="server" />
    <asp:Button ID="button1" runat="server" Text="Fill iFrame" OnClick="Button1_Click" />
    <iframe id="iFrame1" runat="server" style="width:700px; height:400px;" />
  </form>       
</body>
</html>