新普京网站-澳门新普京 > 前端 > 与JS交互讲解

与JS交互讲解

2019/12/30 00:51

本文由码农网 – 小峰原创翻译,转载请看清文末的转发供给,应接参预大家的付费投稿安插!

C# Winform 嵌入Google浏览器 Chrome 与JS人机联作讲授,

率先要搭建情状

新建winform项目GoogleChromeTest

管理NuGet程序包,搜索cef,安装CefSharp.WinForms

图片 1

此处选的是X86运行条件,所以要增多X86的援引,(就算急需X64开辟,能够筛选X64,后边的引用也要改成X64卡塔尔

图片 2

图片 3

图片 4

加多引用

在等级次序文件夹下有个packages文件

图片 5

累计内部的

packagesCefSharp.WinForms.57.0.0CefSharpx86CefSharp.WinForms.dll

packagesCefSharp.Common.57.0.0CefSharpx86CefSharp.BrowserSubprocess.Core.dll

packagesCefSharp.Common.57.0.0CefSharpx86CefSharp.Core.dll

packagesCefSharp.Common.57.0.0CefSharpx86CefSharp.dll

图片 6

此刻生成一下体系,然后再一次起动VS

那个时候大家早先写代码了

充实五个button,叁个textBox

图片 7

主分界面包车型大巴代码如下

using CefSharp.WinForms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace GoogleChromeTest
{
    public partial class Form1 : Form
    {
        /// 
        /// Chromium浏览器实例
        /// 
        ChromiumWebBrowser WebBrowser;

        public Form1()
        {
            InitializeComponent();
            ///设置
            var setting = new CefSharp.CefSettings();
            setting.Locale = "zh-CN";
            setting.CachePath = "CHBrowser/BrowserCache";//缓存路径
            setting.AcceptLanguageList = "zh-CN,zh;q=0.8";//浏览器引擎的语言
            setting.LocalesDirPath = "CHBrowser/localeDir";//日志
            setting.LogFile = "CHBrowser/LogData";//日志文件
            setting.PersistSessionCookies = true;//
            setting.UserAgent = "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36";//浏览器内核
            setting.UserDataPath = "CHBrowser/userData";//个人数据
            ///初始化
            CefSharp.Cef.Initialize(setting);
            WebBrowser = new ChromiumWebBrowser("https://www.baidu.com"); //初始页面
            WebBrowser.RegisterJsObject("jsObj", new JsEvent(), new CefSharp.BindingOptions() { CamelCaseJavascriptNames = false }); //交互数据                                           
            WebBrowser.Dock = DockStyle.Fill;//铺满                                                                  
            WebBrowser.Dock = DockStyle.Fill;//设置停靠方式
            this.Controls.Add(WebBrowser);//加入窗体
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }

        private void button1_Click(object sender, EventArgs e)
        {
            WebBrowser.Load(textBox1.Text);//浏览网址
        }

        private async void button2_Click(object sender, EventArgs e)
        {
            await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("test_val=" + new Random().Next().ToString("F")); //设置页面上js的test_val变量为随机数
            await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("test()");//运行页面上js的test方法

        }

        private async void button3_Click(object sender, EventArgs e)
        {
            await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("testArg('123','我是NET' )");//运行页面上js的testArg带参数的方法
        }
    }
    public class JsEvent
    {
        public string MessageText { get; set;}

        public void ShowTest()
        {
            MessageBox.Show("this in C#.nr" + MessageText);
        }
        public void ShowTestArg(string ss)
        {
            MessageBox.Show("收到JS带参数调用nr" + ss);
        }
    }
}

form的构造函数里安装浏览器的为主设置,然后铺满窗口

刷新开关访问输入框里的网站

js人机联作开关运维页面上的js程序

jsEvent为页面上JS交互作用的接口

接下去大家写个测量试验的asp页面

新建四个空白ASP项目谷歌TestWeb

图片 8

新建叁个html页面HtmlPage1,代码如下

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta charset="utf-8">




<script src="/uploads/allimg/191230/0051294092-8.jpg"></script>
<script>
    var test_val;
    function test() {
        alert("收到Net程序事件 " + test_val);
    }
    function testArg(d1,d2) {
        alert("收到Net程序事件1 " + d1);
        alert("收到Net程序事件2 " + d2);
    }

    $(function () {
        $('button:eq(0)').on("click", BtnClick);
        $('button:eq(1)').on("click", BtnClickArgs);
    })
    function BtnClick() {
        if (typeof jsObj == "undefined") {
            alert("jsObj参数未初始化")
            return;
        }
        jsObj.MessageText = "我是js";
        jsObj.ShowTest();
    }
    function BtnClickArgs() {
        if (typeof jsObj == "undefined") {
            alert("jsObj参数未初始化")
            return;
        }
        jsObj.ShowTestArg($('textarea:eq(0)').val());
    }
</script>

<button style="margin-top:100px">发送给Net程序</button>
<button>发送给Net程序带参数</button>
<textarea></textarea>

更动项目,那个时候期码已经写完

接下去就是测量试验

在HTML页面里右键,点击 在浏览器中查阅,VS会展开浏览器,进行html页面

图片 9

复制网站 作者那边是 你们的应有会差异

运营早先的winform程序,把网站复制到text博克斯上,然后点击刷新,稍等一下就博览会示页面

图片 10

点击 JS交互 (从winform调用js函数)

图片 11

点击 js人机联作带参数 (从winform调用js带有参数的函数卡塔尔(قطر‎

图片 12

点击 发送给net程序

图片 13

点击 发送给Net程序带参数 (旁边输入参数State of Qatar

图片 14

Winform 嵌入Google浏览器 Chrome 与JS交互作用讲解, 首先要搭建遇到 新建winform项目GoogleChromeTest 管理NuGet程序包,搜索cef,安装CefSharp.WinForms 这里选...

介绍

以前曾试过在app中结合二个可靠又超级快的web浏览器吗?

在本文中,你会学到怎样轻便地将奇妙的CefSharp网页浏览器组件(基于Chromium)集成到您的C# app中。

下一场,你能够运用此web浏览器:

  • 给顾客提供二个并入的浏览体验
  • 用HTML / JavaScript编制程序加多嵌入式分界面
  • 用于web自动化

CefSharp可信,连忙,完全开源,无需其余附加的依赖性就能够安装到末了客户(除VC ++ Runtime 二零一三以外)。

在本指南开中学,大家将接受WinForms项目,但Cef夏普相似可事业于WPF项目。

入门

遵照以下步骤飞速早先CefSharp。

项目

1.用.NET 4.5.2成立多少个Windows窗体应用程序(C#)项目

2.对项目命名(如“CefTest”)

图片 15

DLL文件(NuGet方法)

3A)假设您使用的是NuGet,那么你可以从NuGet代码商旅抓取CefSharp.WinForms,跳过上面包车型大巴手动方法。

3B)若是您曾经选择了NuGet,那么导航SOLUTION > Configuration Manager,并将你的品类设置为x86或x64,因为脚下不扶植AnyCPU。

图片 16

DLL文件(手动方法)

尽管您选取的是NuGet,那么请跳过此章节!

3A)下载CefSharp二进制文件并解压它们。

CefSharp v51 x86(32位app)

CefSharp v51 x64(64位app)

3B)右击你的项目,点击“Add Reference”,然后接收“Browse”。

图片 17

3C)选拔那个DLL文件:

CefSharp.dll

CefSharp.Core.dll

CefSharp.WinForms.dll

图片 18

3D)用ZIP选用具备文件:

图片 19

3E)复制那几个文件到花色的Debug文件夹(在Bin之中)

图片 20

上一篇:每天一个 下一篇:没有了