当我通过脚本标记中带有很多空格的HTML传递Html时,CefSharp会破坏嵌入式chrome的实例(请参阅 var __series_data __ ),但是如果我将其压缩,则所有功能都可以使用。 顺便说一句,如果我用空格传递较小的数据,它仍然可以工作。
断例(示意图):
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">-->
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<title>Stocks</title>
<script>
var __series_data__ = [
{
"name": "AA",
"data": [
[
86400000,
7.140915
],
[
345600000,
7.05681
],
]
},
{
"name": "AAPL",
"data": [
[
345427200000,
0.513393
],
[
345686400000,
0.486607
],
]
}
];
</script>
</head>
<body>
<noscript>JavaScript is disabled. Please, enable JavaScript to see charts.</noscript>
<div id="container" style="height: 100%;"></div>
<div class="error-block"></div>
<script type='text/javascript'>//<![CDATA[
var seriesOptions = __series_data__;
/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1 // 3 months
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
Highcharts.setOptions({
global: {
useUTC: true
}
});
}
createChart();
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*");
}
</script>
</body>
<script>
Other scripts.....
</script>
</html>
工作示例(示意图):
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">-->
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<title>Stocks</title>
<script>
var__series_data__=[{"name":"AA","data":[[86400000,7.140915],[345600000,7.05681],]},{"name":"AAPL","data":[[345427200000,0.513393],[345686400000,0.486607],]}];
</script>
</head>
<body>
<noscript>JavaScript is disabled. Please, enable JavaScript to see charts.</noscript>
<div id="container" style="height: 100%;"></div>
<div class="error-block"></div>
<script type='text/javascript'>//<![CDATA[
var seriesOptions = __series_data__;
/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1 // 3 months
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
Highcharts.setOptions({
global: {
useUTC: true
}
});
}
createChart();
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*");
}
</script>
</body>
<script>
Other scripts.....
</script>
</html>