如何使用html代码填充iframe

时间:2013-12-03 15:38:20

标签: html .net iframe charts fill

我正在开发一个项目,其中生成HTML代码以显示由Google的可视化API生成的图形。因此,当页面加载时,它会创建一个HTML代码段,其中包含用于显示图形的HTML代码。我想要做的是获取这个原始HTML代码并将其加载到iframe中,以便它可以显示在页面上。在.NET中有没有办法用原始HTML代码按钮点击填充iframe?

VB代码:
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 

1 个答案:

答案 0 :(得分:0)

我能够通过将html代码存储到隐藏字段并使用JavaScript函数将代码推送到iFrame来实现此目的。

VB代码:

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>