how to fill an iframe with html code

Question

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>