CEF浏览器网页交互实例讲解

作者:创世魂

 

● 帮助说明

CEF浏览器位于“WEB浏览器”模块中,添加此模块才能使用CEF浏览器。

学习本教程需要您稍微了解一些JavaScript和HTML网页相关知识。

不了解网页知识也没关系,通过本教程的学习依然可以实现一些简单的网页交互效果。

 

 

一、网页操作窗口组件

 

● 说明

 

通过学习本篇教程可实现通过操作网页元素来操作视窗的窗口组件。

 

● 准备如下界面

 

打开界面设计器后,在窗口中放入“编辑框”“CEF浏览器”两个组件

 

准备如下所示的HTML代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
</head>
<body>
<a onclick="action('BianJi')">操作编辑框</a>
<a onclick="action('XiXinKuang')">弹出火山信息框</a>
</body>
</html>

 

将准备好的HTML代码保存成后缀名为html的文件,在视窗代码使用“@视窗.附属文件”引入此文件。

 

代码编写如下图:

 

运行效果如下图:

最终可以看到,当网页被点击后将会操作火山组件。

 

 

二、窗口组件操作网页

 

● 说明

 

通过学习本篇教程可实现通过操作窗口组件来控制网页元素。

本篇将主要学习:隐藏/显示元素,点击网页元素,网页编辑框元素写文本。

 

● 网页元素ID查找方法

 

1、在浏览器中寻找百度输入框元素ID。

以微软edge浏览器为例,右键点击“检查”可以进入开发者模式,如果非edge浏览器可使用快捷键f12进入。

 

点击“鼠标”图标,可以快速定位百度输入框所处html代码。

 

定位输入框后找到id属性,ID属性所对应的值就是网页元素ID,百度输入框的元素ID是“form”

 

● 隐藏/显示网页元素

 

打开界面设计器后,在窗口中放入“按钮”“CEF浏览器”两个组件

 

准备如下所示的javascript代码:

javascript:document.getElementById("元素ID").style.display="none";

上述代码的作用是用于隐藏指定ID的网页元素,将代码中的“none”修改成“block”就可以实现将隐藏后的元素显示出来。

 

根据提供的javascript代码进行简单封装:

调用“CEF浏览器1.取主框架 ().执行JS脚本()”就可以在网页中执行javascript脚本,在使用时需要注意引号转义的问题。

 

 

代码编写如下图:

1、调用“链接地址”属性跳转百度首页。

2、按钮被点击后,判断按钮标题来执行显示或者隐藏百度输入框。

 

运行效果如下图:

最终可以看到,百度输入框可以随意的隐藏和显示。

 

● 网页编辑框写内容

 

打开界面设计器后,在窗口中放入“按钮”“编辑框”“CEF浏览器”三个组件

 

准备如下所示的javascript代码:

javascript:document.getElementById("元素ID").value="要写入的内容";

上述代码的作用可以在指定元素ID的网页编辑框内写入指定文本。

 

代码编写如下图:

1、根据提供的javascript代码进行简单封装。

2、调用“CEF浏览器1.取主框架 ().执行JS脚本()”就可以在网页中执行javascript脚本,在使用时需要注意引号转义的问题。

 

 

运行效果如下图:

按钮点击后编辑框的内容将会出现在网页编辑框中。

 

● 点击网页内容

 

准备如下所示的javascript代码:

javascript:document.getElementById("元素ID").click();

上述代码的作用可以点击指定网页元素。

 

代码编写如下图:

1、根据提供的javascript代码进行简单封装。

2、集合“网页_写文本”方法实现百度一键搜索。

 

 

运行效果如下图:

按钮点击后编辑框的内容将会出现在网页编辑框中。