带有 Highchart 的 c# WPF Webbrowser，来自外部源的 Javascript 不工作 "An error has occurred in the script on this page"

Question

我想找出为什么我的图表没有显示在我的 WPF WebBrowser 中。当我加载 html 文件时，出现以下错误：

我认为 IE 可能会阻止 WPF WebBrowser 中的 Highchart（Javascript 来自外部源），因为当我尝试使用 IE 加载它时，我的页面受到运行ning 脚本或 ActiveX 的限制控制：

我知道 how 允许 IE 运行脚本或 ActiveX 控件，但我不知道如何在我的 WPF WebBrowser 中允许它。

我试过 Mark Of The Web 但我不确定我是否正确使用它？

<!-- saved from url=(0016)http://localhost -->

我也尝试过一些绝望的方法，比如将我的程序添加到 :

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\MyProgram.exe 和 MyProgram.vshost.exe 值为 0x00002af9

非常感谢您的帮助。

I don't have find any answer that fix this problem so far.

我的 html 文件：

<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <style type="text/css">
    </style>
</head>
<body>
    <script src="https://code.highcharts.com/highcharts.src.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

    <script type="text/javascript">
        Highcharts.chart('container', {
            chart: {
                type: 'spline',
                inverted: true
            },
            title: {
                text: 'Atmosphere Temperature by Altitude'
            },
            subtitle: {
                text: 'According to the Standard Atmosphere Model'
            },
            xAxis: {
                reversed: false,
                title: {
                    enabled: true,
                    text: 'Altitude'
                },
                labels: {
                    formatter: function () {
                        return this.value + 'km';
                    }
                },
                maxPadding: 0.05,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Temperature'
                },
                labels: {
                    formatter: function () {
                        return this.value + '°';
                    }
                },
                lineWidth: 2
            },
            legend: {
                enabled: false
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br/>',
                pointFormat: '{point.x} km: {point.y}°C'
            },
            plotOptions: {
                spline: {
                    marker: {
                        enable: false
                    }
                }
            },
            series: [{
                name: 'Temperature',
                data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
                    [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
            }]
        });
    </script>
</body>
</html>

更新

请求：警报（navigator.userAgent）；

结果：

Signification

解决方案

在我的 PC 安全配置中没有任何更改的情况下，我通过在我的 html 文件的 header 中添加这个解决了这个问题：

<meta http-equiv="x-ua-compatible" content="IE=11">

有关详细信息或此 link。

，请参阅 Alexander Ryan Baggett 的回答

Answer 1

好的，这对我来说很好。

我加了<meta http-equiv="x-ua-compatible" content="IE=11">。我还在 visual studio 本地加载了 HTML 文件，方法是将其添加到项目并将其设置为 copy always。我最终也不必在我的机器上进行任何注册表调整。

C# 文件

        using System;
        using System.IO;
        using System.Windows;

        namespace Whosebug_question
        {
            public partial class MainWindow : Window
            {
                public MainWindow()
                {
                    InitializeComponent();
                    string curDir = Directory.GetCurrentDirectory();
                    webbrowser1.Navigate(new Uri(String.Format("file:///{0}/test.html", curDir))) ;
                }
            }
        }

HTML 文件

        <!DOCTYPE HTML>
        <!-- saved from url=(0016)http://localhost -->
        <html>
        <head>
            <meta http-equiv="x-ua-compatible" content="IE=11">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highcharts Example</title>
            <style type="text/css">
            </style>
        </head>
        <body>
            <script src="https://code.highcharts.com/highcharts.src.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

            <script type="text/javascript">
                Highcharts.chart("container", {
                    chart: {
                        type: "spline",
                        inverted: true
                    },
                    title: {
                        text: "Atmosphere Temperature by Altitude"
                    },
                    subtitle: {
                        text: "According to the Standard Atmosphere Model"
                    },
                    xAxis: {
                        reversed: false,
                        title: {
                            enabled: true,
                            text: "Altitude"
                        },
                        labels: {
                            formatter: function () {
                                return this.value + "km";
                            }
                        },
                        maxPadding: 0.05,
                        showLastLabel: true
                    },
                    yAxis: {
                        title: {
                            text: "Temperature"
                        },
                        labels: {
                            formatter: function () {
                                return this.value + "°";
                            }
                        },
                        lineWidth: 2
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        headerFormat: "<b>{series.name}</b><br/>",
                        pointFormat: "{point.x} km: {point.y}°C"
                    },
                    plotOptions: {
                        spline: {
                            marker: {
                                enable: false
                            }
                        }
                    },
                    series: [{
                        name: "Temperature",
                        data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
                            [50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
                    }]
                });
            </script>
        </body>
        </html>

它也给出了一个不错的结果。

如果此代码不能解决您的问题。我怀疑您的本地 Intranet 安全区域设置需要更改。

带有 Highchart 的 c# WPF Webbrowser，来自外部源的 Javascript 不工作 "An error has occurred in the script on this page"

c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"

javascript

c#

wpf

webbrowser-control

highcharts

更新

解决方案