搜索
查看: 17875|回复: 10

[web] CEF3(Chromium内核)网页控件

[复制链接]

188

主题

2543

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14168
发表于 2018-3-31 17:07:14 | 显示全部楼层 |阅读模式
时易势移,现在我们强烈推荐大家使用 aardio 标准库里的 web.view,也就是微软的 WebView2 控件 ,
WebView2不但使用最新的Chromium内核,并且保持自动更新,当然比下面CEF3使用的内核还要新,而且 WebView2 更稳定,接口更简洁,更重要的是 WebView2 Runtime 是所有程序共享的,即使没有安装,web.view 也可以自动安装,而且WebView2 Runtime 的下载速度非常快,可以达到数MB每秒,瞬间可以安装好,体验非常好,最重要的是 WebView2 是完全免费的

大家也可以使用标准库里的 chrome.app 调用开源免费的 CEF3 组件,这也是免费的。

web.cef3 扩展库源码、以及范例工程下载地址链接:
下载链接:https://pan.baidu.com/s/1pOGsZ-te2sz1zvk6ziFukA
提取码:cef3

cef3.jpg

cef32.png

这是一个使用WebKitX(CEF3)实现的浏览器控件,特点:
1、体积大,功能多,可以使用CEF3丰富的功能,HTML5跑分520,非常高
2、不支持XP,至少要求win7 sp1以上操作系统,这一点现在已经不算什么问题了,XP基本已在市场消失,WIN7现在都很少了。
3、这个库比原版CEF3的接口更强大一些,提供了丰富的COM接口,而且 aardio 又对这个组件进行了扩展增强,CEF3 虽然是编程很麻烦的多进程模式,但是这个扩展库已经虚拟了DOM节点对象,可以类似单进程那样访问网页元素,调用其函数方法,很方便。
4、提供 web.cefx.app,实现类似electron.app,chrome.app的效果,支持external对象,支持通用版 aardio.js。
5、要预装VC2017运行库( 此扩展库检测到未安装时会自动安装 )
6、已自带并支持flash插件,aardio 提供的扩展库已修复了 CEF3 无法启用Flash,显示黑框,提示版本过旧等问题。
7、可生成独立EXE文件,当然体积有点大,至少 50MB以上,而且还是已经用 7z 压缩过的。
8、新版扩展库已完美支持高分小屏 DPI 自动缩放。
9、WebKitX是一个商业控件试用版组件,没有任何功能上限制,试用版唯一的问题就是不定时显示试用提示弹框(为了方便测试,已经添加API钩子移除了这个试用弹框, 正式使用请自觉去掉API钩子并购买正版控件,否则后果自负与本人无关)。


极简用法:
import win.ui;
/*DSG{{*/
var winform = win.form(text="cef3 极简用法";right=1315;bottom=795)
/*}}*/

import web.cefx;
var cef3 = web.cefx(winform)
winform.show();

//这是最简单的用法
cef3.go("http://www.so.com/")
cef3.waitQuerySelector(
"#input").value = "aardio cef3";
cef3.getEle(
"search-button").click();

win.loopMessage();

这个库的源码使用了一些有意思的小技巧,大家可以当范例玩玩
import win.ui;
/*DSG{{*/
var winform = win.form(text="cef3";right=1315;bottom=795)
winform.add()
/*}}*/

import web.cefx.portable;//生成独立EXE
import web.cefx;
var cef3 = web.cefx(winform)

/*
浏览器控件初始化以前触发此事件。
调用 winform.show() 或 cef3.create()创建浏览器控件触发此事件,
可以设置的参数请打开官网 https://www.webkitx.com/
在主页上查找 "interface ISettings" 查看cefSettings参数的详细定义。
aardio默认已经设置了部分参数,请参考web.cefx源码。
*/

cef3.onCreate2 =
function(cefSettings,commandLineSwitches){
   
//可选修改user_agent,
    cefSettings.user_agent = "Mozilla/5.0 (aardio) Chrome/64.0.3282.0"
   
   
//允许内容过滤
    cefSettings.filter_response = true
    cefSettings.access_control_allow_origin =
"*"
    cefSettings.remove_response_headers =
"x-webkit-csp,content-security-policy,x-content-security-policy";
}

/*
已初始化安成,已创建CEF进程,进程间IPC通信已准备就绪,
*/

cef3.onBrowserReady =
function(){
   
//允许下载脚本(编辑模式下默认是禁止下载的)
    cef3.downloadScripts = true;
}

/*
网址完全下载完成触发这个事件,
在这里可以切换编辑、浏览模式,也可以注册元素事件
*/

cef3.onLoadEnd =
function(){

    cef3.Preview();
//切换到浏览模式
   
   
//设置允许 cef3.onEvent 回调函数接收的事件
    cef3.Events = 0x1000/*_DOM_EVENT_SELECTSTART*/
                    | 0x100000
/*_DOM_EVENT_DOMSUBTREEMODIFIED*/
                    | 0x4000
/*_DOM_EVENT_DOMFOCUSIN*/
                    | 1
/*_DOM_EVENT_CLICK*/
                    | 0x400000
/*_DOM_EVENT_EDITABLE_ELEMENT_CHANGED*/
                    ;
   
}

/*
请在设置好其他参数、回调事件以后,
再调用cef3.create()函数,或者调用 winform.show()函数以实际的创建浏览器控件。
*/

winform.show();

//打开网页
cef3.go("http://www.so.com/");

win.loopMessage();

JS与aardio交互的例子
import win.ui;
/*DSG{{*/
var winform = win.form(text="cef3 - js与aardio交互";right=1315;bottom=795)
winform.add()
/*}}*/

import web.cefx;
var cef3 = web.cefx(winform)
winform.show();

cef3.html =
/**
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    html,body{ height:100%; margin:0; }
    </style>
    <script type="text/javascript">
   
    function callback(a,b){
        
        // 对aardio代码发送消息
        window.postComMessage(123,456,"你好");
        return a+b
    }
   
    //注册允许aardio调用的函数
    window.register("test", callback)
   
    </script>
</head>
<body></body>
</html>
**/


cef3.wait();

// 响应js消息
import web.json;
cef3.onComPostMessage =
function(params){
   cef3.querySelector(
"body").innerHTML = "<pre>" + web.json.stringify(params) + "</pre>"
   
}

// 调用JS函数
var c  = cef3.xcall("test",12,2);
winform.msgbox(c,
"JS的返回值");

// 也可以这样直接调用JS函数
cef3.script.alert("也可以这样直接调用JS函数");

win.loopMessage();

自定义命令行参数非常简单,可以直接在web.cef3构造参数中添加一个或多个启动参数,例如:
var cef3 = web.cefx(winform,,"--disable-gpu")

至于flash,webkitx官方提供的方法不管用,总是需要在网页上右键点一下手动运行flash插件才能播放flash,经过反复测试,发现默认加上下面的启动参数就可以了:
//webkitx提供的方法有bug,必须增加下面的参数才能真正启用flash插件
commandLineSwitches = commandLineSwitches + ` --disable-bundled-ppapi-flash --ppapi-flash-version=99.0.0.0 --register-pepper-plugins="pepflashplayer.dll;application/x-shockwave-flash"`;
cefSettings.flash_player_dll_path =
"pepflashplayer.dll";

因为adobe已经禁止分发flash插件,示例中自动的flash插件仅供测试,下载后请自觉删除,否则后果自负。










回复

使用道具 举报

39

主题

174

帖子

1080

积分

荣誉会员

htmlayout.cn 我的学习笔记

Rank: 8Rank: 8

积分
1080
发表于 2018-3-31 18:09:19 | 显示全部楼层
谢谢, 学习下,Jacen辛苦了
! www.HtmLayout.Cn 我的学习笔记
回复

使用道具 举报

9

主题

39

帖子

239

积分

二级会员

Rank: 3Rank: 3

积分
239
发表于 2018-3-31 18:25:22 | 显示全部楼层
下载下来看看      新玩具
回复

使用道具 举报

5

主题

128

帖子

1495

积分

四级会员

Rank: 6Rank: 6

积分
1495
发表于 2018-3-31 19:40:01 | 显示全部楼层
            辛苦了,  Jacen,  总是不断出新作!
回复

使用道具 举报

12

主题

677

帖子

4033

积分

荣誉会员

子非魚、安知魚之樂

Rank: 8Rank: 8

积分
4033
发表于 2018-3-31 20:22:56 | 显示全部楼层
辛苦了,下载学习一下!
回复

使用道具 举报

12

主题

38

帖子

336

积分

二级会员

Rank: 3Rank: 3

积分
336
发表于 2018-4-3 16:09:21 | 显示全部楼层
可能是习惯问题,没有提供external 接口,我是不敢轻易使用的,因为不知道有不有坑。
回复

使用道具 举报

6

主题

18

帖子

124

积分

荣誉会员

Rank: 8Rank: 8

积分
124
发表于 2018-4-4 15:20:09 | 显示全部楼层
太牛了,这个最期待了,HTML5速度快
回复

使用道具 举报

188

主题

2543

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14168
 楼主| 发表于 2018-5-10 18:13:33 | 显示全部楼层
bjtv 发表于 2018-4-3 16:09
可能是习惯问题,没有提供external 接口,我是不敢轻易使用的,因为不知道有不有坑。
虽然这个组件本身没有提供external,
但是我刚才使用aardio扩展出了这个接口,上面的范例已更新。
回复

使用道具 举报

0

主题

2

帖子

13

积分

新手入门

Rank: 1

积分
13
发表于 2018-5-14 21:09:03 | 显示全部楼层
打开网站后, 想下载里面的东西下载不了,能下载么 ?
回复

使用道具 举报

2

主题

5

帖子

37

积分

新手入门

Rank: 1

积分
37
发表于 2018-5-15 18:07:28 | 显示全部楼层
这个external要在页面上用<script src="/aardio.js">,一旦url指向了一个外部的连接,总是提示找不到http://server/aardio.js,cef总是把这个虚拟的js文件当成真实文件,导致这套external机制失效了,js无法调用arridio定义的函数
回复

使用道具 举报

188

主题

2543

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14168
 楼主| 发表于 2018-5-20 00:18:16 | 显示全部楼层
wxh101 发表于 2018-5-15 18:07
这个external要在页面上用,一旦url指向了一个外部的连接,总是提示找不到http://server/aardio.js,cef总 ...
可以先看一下范例、文档,
在文档里已有说明,这个功能不是用在外部链接上,只有自己写本地的网页界面才需要用到 external 。
如果你访问的是外部链接,没必要用到external,而且远程网页可以访问本地接口也非常不安全。

external的作用是让JS可以调用aardio,如果你的网页不是在aardio中运行,你要external 干啥呢?


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2021-4-22 05:16 , Processed in 0.062500 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表