JavaScript 代码在 WPF WebBrowser 加载的 HTML 页面中不起作用

不久前，我制作了一个 HTML 文档，其中包含一些输入字段和 JavaScript 代码，它使用输入字段中的值执行计算。因为我使用了一些脚本，所以我不得不在与 HTML 相同的目录中添加一个名为“scripts”的文件夹。当我打开 HTML 并在输入字段中插入值时，计算过程起作用了。

现在我正在尝试使用 WPF WebBrowser 控件在 WPF 项目中加载该 HTML。文件夹“scripts”已添加到项目中，并始终复制到输出目录中。在我的代码中，我尝试将 HTML 加载为字符串和 HTML 本身。但无论我做什么 - 当我在输入字段中插入值时，什么也没有发生。

我忘记了某些东西还是在 WPF WebBrowser 中不起作用？

提前致谢！

顺便说一下，这是我的 WPF 的代码：

using System;
using System.Reflection;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace WPFWebBrowserControl
{
    /// <summary>
    /// Interaktionslogik für MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            wbcWebBrowser.Navigate(new Uri("https://www.google.de/"));
        }

        private void wbcWebBrowser_Loaded(object sender, RoutedEventArgs e)
        {
            HideScriptErrors(wbcWebBrowser, true);
        }

        private void HideScriptErrors(WebBrowser wb, bool Hide)
        {
            FieldInfo fiComWebBrowser = typeof(WebBrowser).GetField("_axIWebBrowser2", BindingFlags.Instance | BindingFlags.NonPublic);
            if (fiComWebBrowser == null) return;
            object objComWebBrowser = fiComWebBrowser.GetValue(wb);
            if (objComWebBrowser == null) return;
            objComWebBrowser.GetType().InvokeMember("Silent", BindingFlags.SetProperty, null, objComWebBrowser, new object[] { Hide });
        }

        private void NavigateToUrl(object sender, RoutedEventArgs e)
        {
            // Trying to load the HTML CalculationTest
            string curDir = System.IO.Directory.GetCurrentDirectory();
            wbcWebBrowser.Navigate(new Uri(String.Format("file:///{0}/CalculationTest.html", curDir)));
        }

        private void LoadHtml(object sender, RoutedEventArgs e)
        {
            StringBuilder htmlBuilder = new StringBuilder();

            // Trying to load the content of HTML CalculationTest as string
            htmlBuilder.Append("<form style=\"position: relative; height: 100 %; width: 100 %; overflow - x:scroll; overflow - y:scroll; \">");
            htmlBuilder.Append("<div id=\"pagecontent\">");
            htmlBuilder.Append("<input id=\"Wert1\" type=\"text\" maxlength=\"7\" placeholder=\"___,__\" title=\"Please use format ###,##\" pattern=\"^[+-]?\\d{0,3}((\\.|,)\\d{1,2})?\" style=\"position:absolute; top:20px; left:10px; font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;\" />");
            htmlBuilder.Append("<input id=\"Wert2\" type=\"text\" maxlength=\"7\" placeholder=\"___,__\" title=\"Please use format ###,##\" pattern=\"^[+-]?\\d{0,3}((\\.|,)\\d{1,2})?\" style=\"position:absolute; top:70px; left:10px; font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;\" />");
            htmlBuilder.Append("<input id=\"Wert3\" type=\"text\" disabled maxlength=\"7\" placeholder=\"___,__\" title=\"Please use format ###,##\" pattern=\"^[+-]?\\d{0,3}((\\.|,)\\d{1,2})?\" style=\"position:absolute; top:50px; left:150px; font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;\" />");
            htmlBuilder.Append("<script src=\"scripts/ValidationFunctions.js\"/>");
            htmlBuilder.Append("<script src=\"scripts/jquery-2.2.4.min.js\"/>");
            htmlBuilder.Append("<script type=\"text/javascript\">");
            htmlBuilder.Append("$(\"#pagecontent\").keyup(function () {");
            htmlBuilder.Append("CalculationTest();");
            htmlBuilder.Append("});");
            htmlBuilder.Append("$(\"#pagecontent\").change(function () {");
            htmlBuilder.Append("CalculationTest();");
            htmlBuilder.Append("});");
            htmlBuilder.Append("function CalculationTest() {");
            htmlBuilder.Append("var value_Z = parseFloat(ValidateNumberValue(document.getElementById(\"Wert1\").value.replace(\",\", \".\")));");
            htmlBuilder.Append("var value_RBMAX = parseFloat(ValidateNumberValue(document.getElementById(\"Wert2\").value.replace(\",\", \".\")));");
            htmlBuilder.Append("if (value_Z != 0 && value_RBMAX != 0) {");
            htmlBuilder.Append("document.getElementById(\"Wert3\").value = (value_Z*100/value_RBMAX).toFixed(2);");
            htmlBuilder.Append("} else {");
            htmlBuilder.Append("document.getElementById(\"Wert3\").value = null;");
            htmlBuilder.Append("}");
            htmlBuilder.Append("}");
            htmlBuilder.Append("</script>");
            htmlBuilder.Append("</div>");
            htmlBuilder.Append("</form>");

            string html = htmlBuilder.ToString();
            wbcWebBrowser.NavigateToString(html);
        }
    }
}

和 JS 脚本 ValidationFunctions.js：

//Validates the given number value and returns it.
function ValidateNumberValue(value) {
    if (isNaN(value) || value == "") {
        value = 0;
    }
    return value;
}

//Validates the actual input in a field of type number.
function ValidateNumberInput(evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    //***
    //Just total numbers.
    //var regex = /[0-9]|\./;
    //Numbers with decimals.
    //var regex = /[0-9]+([.\,][0-9]+)?/;
    //if (!regex.test(key)) {
    //    theEvent.returnValue = false;
    //    if (theEvent.preventDefault) theEvent.preventDefault();
    //}
    //***
    //var allowedSigns = "1234567890,.-";
    //if (!allowedSigns.includes(key)) {
    //    theEvent.returnValue = false;
    //    if (theEvent.preventDefault) theEvent.preventDefault();
    //}
    //***
    var success = false;
    if (key == "1") { success = true; }
    if (key == "2") { success = true; }
    if (key == "3") { success = true; }
    if (key == "4") { success = true; }
    if (key == "5") { success = true; }
    if (key == "6") { success = true; }
    if (key == "7") { success = true; }
    if (key == "8") { success = true; }
    if (key == "9") { success = true; }
    if (key == "0") { success = true; }
    if (key == ",") { success = true; }
    if (key == ".") { success = true; }
    if (key == "-") { success = true; }
    if (success == false) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    }
}

并且 - 最后 - HTML 文档 CalculationTest.html：

<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;"> 
<div id="pagecontent">
<input id="Wert1" type="text" maxlength="7" placeholder="___,__" title="Please use format ###,##" pattern="^[+-]?\d{0,3}((\.|,)\d{1,2})?" style="position:absolute; top:20px; left:10px; font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;" />
<input id="Wert2" type="text" maxlength="7" placeholder="___,__" title="Please use format ###,##" pattern="^[+-]?\d{0,3}((\.|,)\d{1,2})?" style="position:absolute; top:70px; left:10px; font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;" />
<input id="Wert3" type="text" disabled maxlength="7" placeholder="___,__" title="Please use format ###,##" pattern="^[+-]?\d{0,3}((\.|,)\d{1,2})?" style="position:absolute; top:50px; left:150px; font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;" />
<script src="scripts/ValidationFunctions.js"></script>
<script src="scripts/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
$("#pagecontent").keyup(function () {
CalculationTest();});
$("#pagecontent").change(function () {
CalculationTest();});
function CalculationTest() { 
var value_Z = parseFloat(ValidateNumberValue(document.getElementById("Wert1").value.replace(",", ".")));
var value_RBMAX = parseFloat(ValidateNumberValue(document.getElementById("Wert2").value.replace(",", ".")));
if (value_Z != 0 && value_RBMAX != 0) {
document.getElementById("Wert3").value = (value_Z*100/value_RBMAX).toFixed(2);
} else {
document.getElementById("Wert3").value = null;
}
}
</script>
</div>
</form>