JavaScript代码在WPF WebBrowser

时间：2017-11-24 10:43:06

标签： javascript c# jquery html wpf

不久前，我制作了一个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>

2 个答案:

答案 0 :(得分：1)

确保您的网页在IE中正常运行。考虑使用CefSharp（基于铬）而不是webbrowser（基于IE）。

答案 1 :(得分：0)

我找到了解决问题的方法。 我必须将HTML字符串编写为文件并使用WebBrowser控件导航到它。

这是我方法的新代码：

        StringBuilder htmlBuilder = new StringBuilder();

        htmlBuilder.Append("<!--saved from url=(0014)about:internet-->");
        htmlBuilder.Append("<!DOCTYPE html>");
        htmlBuilder.Append("<html lang=\"de\" xmlns=\"http://www.w3.org/1999/xhtml\">");
        htmlBuilder.Append("<head>");
        htmlBuilder.Append("<meta charset=\"utf-8\" content=\"IE=9\" />");
        htmlBuilder.Append("<title></title>");
        htmlBuilder.Append("</head>");
        htmlBuilder.Append("<body>");
        htmlBuilder.Append("<form>");
        htmlBuilder.Append("<div id =\"pagecontent\">");
        htmlBuilder.Append("<label>Wert 1</label><br/>");
        htmlBuilder.Append("<input id =\"Wert1\" type=\"text\" maxlength=\"7\" placeholder=\"___,__\" title=\"Please use format ###,##\" pattern=\"^[+-]?\\d{0,3}((\\.|,)\\d{1,2})?\" style=\"font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;\" /><br/>");
        htmlBuilder.Append("<label>Wert 2</label><br/>");
        htmlBuilder.Append("<input id =\"Wert2\" type=\"text\" maxlength=\"7\" placeholder=\"___,__\" title=\"Please use format ###,##\" pattern=\"^[+-]?\\d{0,3}((\\.|,)\\d{1,2})?\" style=\"font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;\" /><br/>");
        htmlBuilder.Append("<label>Ergebnis</label><br/>");
        htmlBuilder.Append("<input id =\"Wert3\" type=\"text\" disabled maxlength=\"7\" placeholder=\"___,__\" title=\"Please use format ###,##\" pattern=\"^[+-]?\\d{0,3}((\\.|,)\\d{1,2})?\" style=\"font-family:Arial; font-style:normal; font-weight:normal; font-size:12px; text-align:left; height:20px; width:120px;\" /><br/>");
        htmlBuilder.Append("<script src =\"scripts/ValidationFunctions.js\"></script>");
        htmlBuilder.Append("<script src =\"scripts/jquery-2.2.4.min.js\"></script>");
        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("</script>");
        htmlBuilder.Append("</div>");
        htmlBuilder.Append("</form>");
        htmlBuilder.Append("</body>");
        htmlBuilder.Append("</html>");

        string html = htmlBuilder.ToString();
        // This doesn't work! JavaScript will not be executed when the page was loaded as a string.
        //wbcWebBrowser.NavigateToString(html);

        // Alternative solution: Writing the page to a file and then navigate to it.
        string curDir = System.IO.Directory.GetCurrentDirectory();
        System.IO.File.WriteAllText(curDir + "\\calctest.html", html, Encoding.UTF8);
        wbcWebBrowser.Navigate(new Uri(String.Format("file:///{0}/calctest.html", curDir)));
相关问题
最新问题