当前位置：首页 > 行业动态 > 正文

如何在CefSharp中有效传递和使用JavaScript参数？

在 CefSharp 中，你可以通过 EvaluateScriptAsync 方法来执行 JavaScript。，，“ csharp，await browser.EvaluateScriptAsync("document.getElementById('myElement').innerText = 'Hello, World!';");，` ，，这个代码将设置 id 为 myElement` 的元素的文本内容为 “Hello, World!”。

CefSharp与JavaScript的交互

如何在CefSharp中有效传递和使用JavaScript参数？ 第1张

CefSharp是一个基于Chromium的.NET库，它允许在WinForms和WPF应用程序中嵌入网页，通过CefSharp，我们可以实现C#与JavaScript之间的相互调用，从而充分利用两者的优势，本文将详细介绍如何在CefSharp中实现这一功能，并提供相关代码示例、表格以及FAQs。

一、C#调用JavaScript

1. 使用ExecuteScriptAsync方法

这种方式类似于JavaScript中的eval方法，异步执行JavaScript代码，但没有返回值。

wb.ExecuteScriptAsync("myFunction()");
wb.ExecuteScriptAsync("jsVar='abc'");

2. 使用EvaluateScriptAsync方法

这种方式也是异步执行JavaScript代码，但有返回值。

Task<CefSharp.JavascriptResponse> t = wb.EvaluateScriptAsync("callTest2()");
t.Wait();
if (t.Result.Result != null) {
    MessageBox.Show(t.Result.Result.ToString());
}

二、JavaScript调用C#

1. 注册C#对象为JavaScript对象

需要启用JavaScript绑定，并创建一个C#类供JavaScript调用。

public class JsEvent {
    public string MessageText = string.Empty;
    public void ShowTest() {
        MessageBox.Show("this in C#.
r" + MessageText);
    }
}
// 注册对象
browser.RegisterJsObject("jsObj", new JsEvent(), false);

2. JavaScript调用C#方法

在JavaScript中，可以通过注册的对象名来调用C#方法。

jsObj.MessageText = "hello";
jsObj.ShowTest();

三、相互调用示例

以下是一个详细的示例，展示了如何实现C#与JavaScript的相互调用。

1. HTML页面（test.html）

<!DOCTYPEhtml>
<html>
<head>
    <metacharset="UTF-8">
    <title>CefSharp测试</title>
    <script>
        // JavaScript调用C#的方法
        function callCSharpMethod() {
            window.cefSharpExample.testMethod("来自JS的调用");
        }
        // C#调用JavaScript的方法，只传递一个普通的字符串
        function displayMessage(message) {
            alert(message);
        }
        // 接收C#传递过来的JSON对象，并以表格形式展示在页面上
        function displayJson(json) {
            var obj = JSON.parse(json);
            var html = "<table border='1'>";
            for (var prop in obj) {
                html += "<tr>";
                html += "<td>" + prop + "</td>";
                html += "<td>" + obj[prop] + "</td>";
                html += "</tr>";
            }
            html += "</table>";
            document.getElementById("jsonTable").innerHTML = html;
        }
    </script>
</head>
<body>
    <h1>CefSharp测试</h1>
    <button onclick="callCSharpMethod()">调用C#方法</button>
    <div id="jsonTable"></div>
</body>
</html>

2. C#代码（MainWindow.xaml.cs）

using CefSharp;
using Newtonsoft.Json;
using System;
using System.Windows;
namespace WpfWithCefSharpDemo {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            Browser.JavascriptObjectRepository.Settings.LegacyJavascriptBindingEnabled = true;
            Browser.JavascriptObjectRepository.Register("cefSharpExample", new JsEvent(), isAsync: false, options: BindingOptions.DefaultBinder);
        }
        private void CallJSFunc_Click(object sender, RoutedEventArgs e) {
            Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("displayMessage('Hello from C#')");
        }
        private void SendJsonToWeb_Click(object sender, RoutedEventArgs e) {
            var json = JsonConvert.SerializeObject(new { Name = "张三", Age = 30 });
            Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync($"displayJson({json})");
        }
    }
}

3. XAML布局（MainWindow.xaml）

<Window x:
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        Title="WPF加载CefSharp测试" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="35"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <TextBlock Text="下面显示的是网页内容" />
        <Border Grid.Row="1" BorderBrush="DarkOrange" BorderThickness="2">
            <wpf:ChromiumWebBrowser x:Name="Browser" Loaded="Browser_OnLoaded"/>
        </Border>
        <Border Grid.Row="2" Margin="35" BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal" Height="35">
                <TextBlock Text="右侧按钮是WPF按钮" VerticalAlignment="Center" Margin="53"/>
                <Button Content="调用JS方法" Click="CallJSFunc_Click" Height="30" Padding="102"/>
                <Button Content="C#传递Json对象到网页" Click="SendJsonToWeb_Click" Height="30" Padding="102"/>
            </StackPanel>
        </Border>
    </Grid>
</Window>

四、常见问题解答（FAQs）

Q1: 如何在CefSharp中启用JavaScript绑定？

A1: 要在CefSharp中启用JavaScript绑定，需要在初始化时设置LegacyJavascriptBindingEnabled属性为true。

Browser.JavascriptObjectRepository.Settings.LegacyJavascriptBindingEnabled = true;

**Q2: C#如何调用JavaScript函数并传递参数？

A2: 可以使用ExecuteScriptAsync或EvaluateScriptAsync方法来调用JavaScript函数，如果需要传递参数，可以直接在JavaScript代码中拼接参数。

Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("myFunction('param1', 'param2')");

对于复杂的JSON对象，可以先序列化为JSON字符串再传递给JavaScript。

var json = JsonConvert.SerializeObject(new { Key = "Value" });
Browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync($"myFunction({json})");
CefSharpJavaScript参数传递使用方法
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/362549.html
0

相关文章

随机文章