我正在开发一个项目,其中生成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
答案 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>