aardio中使用加载WEB的几种方式

发表于 | 分类于
aardio中使用加载WEB的几种方式

前言

aardio构建界面有四种方式

  • winform
  • web.form
  • web.kit/web.blink
  • htmlayout

其中有三个是能加载网页的

  • web.form
  • web.kit
  • web.blink

web.blink(miniblink)使用新版chromium内核，并且精简了体积，兼容WKE( WebKit ）组件的接口。
aardio中提供了基于WKE( WebKit ）的web.kit 扩展库，也提供了基于miniblink的web.blink扩展库。
这两个扩展库基本的用法是一样的（ 因为接口基本一样 ）。

但是这两个库都是精简过的，都不支持视频的加载。

只考虑加载视频的话可以考虑用Flash组件

要是要实现WebRTC等的话就不要使用这个技术了，推荐使用Electron。

web.form是直接调用系统的IE，所以不存在精简的问题。

几种方式对比

web.form

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import win.ui;
/*DSG{{*/
var winform = win.form(text="web.form";right=1123;bottom=570)
/*}}*/

import web.form;
var mb = web.form.ie11(winform);

//使用浏览器打开网页
mb.go("https://www.psvmc.cn")

//显示窗口
winform.show();

//启动界面线程消息循环
win.loopMessage();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import win.ui;
/*DSG{{*/
var winform = win.form(text="web.blink";right=1123;bottom=570)
/*}}*/

//导入miniblink扩展库
import web.blink.form;  

//创建miniblink控件
var mb = web.blink.form(winform);

//使用浏览器打开网页
mb.go("https://www.psvmc.cn")

//打开网页调试工具( 在网页右键菜单里点击“检查”切换节点 )
mb.showDevTools()

//显示窗口
winform.show();

//启动界面线程消息循环
win.loopMessage();

相应的库也会大一点

web.kit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import win.ui;
/*DSG{{*/
var winform = win.form(text="web.kit";right=1123;bottom=570)
/*}}*/

import web.kit.form;  
var mb = web.kit.form(winform);

//使用浏览器打开网页
mb.go("https://www.psvmc.cn")

//显示窗口
winform.show();

//启动界面线程消息循环
win.loopMessage();

这个就不支持调试工具

AARDIO和JS互调

判断是否安装Flash

三个方式页面和代码之间的互相调用也是通用的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
wb.waitDoc();

wb.external = {
    //可以通过javascript脚本访问external接口的所有成员
	 flashISInstall = function( arg ){
		 io.print("Flash是否可用:",arg);
		 if(!arg){
		 	var result = winform.msgboxTest("Flash未安装是否安装","Flash检测");
		 	if(result){
		 		process.execute_waitInput("https://www.flash.cn/cdm/latest/flashplayerax_install_cn.exe")
		 	}	
		 }
	 }
}

var js = /*
function hasUsableFlash(){
	try{
		var flashObj;
		if(typeof window.ActiveXObject != "undefined"){
    		flashObj= new  ActiveXObject("ShockwaveFlash.ShockwaveFlash");
		}else{
    		flashObj= navigator.plugins['Shockwave Flash'];
		}
		return flashObj? true : false;
	}
	catch(e){
		return false; 
	}	
}
external.flashISInstall(hasUsableFlash());
*/
    
wb.document.getScript().execScript(js);

注意要调用页面的方法，要等待页面加载完毕

1
wb.waitDoc();

获取Title

方式1

1
2
wb.waitDoc();
winform.text = wb.document.title;

方式2

1
2
3
4
5
6
7
8
9
wb.waitDoc();
// 获取title
var titleTags = wb.document.getElementsByTagName("title")
for i, title in com.each(titleTags) {
    if (i == 1) {
        winform.text = title.innerHTML;
        break;
    }
}

方式3

有这么一种情况 页面在加载后,并没有Title，Title是后来才更改的，这样我们通过上面的方式是获取不到的，所以这里使用定时任务获取。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
wb.external = {
    titleCb = function(title){
        winform.text = title;
    }
}

var mJS = /*	
		window.myInter = setInterval(
				function(){
					if(document.title){
						external.titleCb(document.title);
						clearInterval(window.myInter);
					}	
				},
				200
			);
			*/;

wb.waitDoc();
wb.document.getScript().execScript(mJS);

修改原事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
mb.external = {	
	tologin = function(){
	 	mb.go(homepage);
	}
}


// 内部跳转
mb.NavigateComplete2 = function(pDisp, url){
	if(url != homepage){
		var js2 = /*
		function exitAction(){
			var info = document.querySelector(".info");
			if(info){
				var a_arr = info.querySelectorAll("a");
				if(a_arr.length>0){
					let exitDom = a_arr[a_arr.length-1];
					if(exitDom.innerHTML=="注销"){
							exitDom.onclick = function () {
        					external.tologin();
    					}
					}	
				}
			}
			
		}
		
		window.onload=function(){
    		exitAction();
		}
		*/
    		
		mb.document.getScript().execScript(js2);
	}
}

文件下载

有的前端是这样写的文件下载

1
2
3
4
5
6
7
var fileurl = "https://www.flash.cn/cdm/latest/flashplayerax_install_cn.exe";
var btn2 = document.querySelector(".btn2");
btn2.onclick = function () {
  try {
    window.open(fileurl, "_blank");
  } catch (error) {}
};

也就是说文件的下载是在新标签中打开的

这种情况浏览器会自动打开新标签 弹出下载框后自动关闭标签

我们该怎么实现呢

我们要在弹出的窗口中添加如下代码

aardio

1
2
3
4
wb.NavigateError=function(pDisp,url,target,statusCode,cancel){
  winform.close();
  return url,target,statusCode,false
}

但是我们关闭窗口如果window.open(fileurl, "_blank");不做异常捕获，会弹出一个JS报错，所以一定要做异常捕获。