목차
RAD Studio 10.4.1의 TEdgeBrowser 및 자바 스크립트 상호 작용 -Chromium 기반 Edge 브라우저 제어 사용 2
1.1. 부트 스트랩 반응 형 H5 페이지를 원활하게 탐색
1.2 다양한 비율로 페이지 사진을 캡처하는 데 한 문장 만 필요합니다.
1.1. HTML 페이지 코드 작성 및 페이지 요소의 클릭 이벤트 추가
마음에 들면 아래에서 '좋아요'및 '즐겨 찾기'를 클릭하면 다음 공유를 볼 수 있습니다.
RAD Studio 10.4.1의 TEdgeBrowser 및 자바 스크립트 상호 작용 -Chromium 기반 Edge 브라우저 제어 사용 2
이제 delphi는 서버에 TEdgeBrowser가 있으므로 Chromium 기반 Microsoft Edge 브라우저 덕분에 자바 스크립트와 쉽게 통신 할 수 있습니다.뿐만 아니라 Delphi의 데스크톱 c / s 다중 계층 분산 애플리케이션 클라이언트 인 TEdgeBrowser도 사용할 수 있습니다. Edge 브라우저가 Bootstrap 반응 형 H5 페이지에 매우 원활하게 액세스 할 수 있으며 모양이 변경되지 않습니다.
먼저 코드 실행의 효과를 살펴 보겠습니다.
1.1. 부트 스트랩 반응 형 H5 페이지를 원활하게 탐색
1.2 다양한 비율로 페이지 사진을 캡처하는 데 한 문장 만 필요합니다.
1.3 자바 스크립트 실행은 한 문장입니다.
둘째, Delphi 코드를 얻는 방법
1.1. HTML 페이지 코드 작성 및 페이지 요소의 클릭 이벤트 추가
예 : <p> 태그 페이지 요소, 해당 id = "mytestclick", "test you click me"로 인라인 표시, 아래 그림에 표시된 부분 인 οnclick = "handleclick ()의 클릭 이벤트를 작성하고 나머지는 < webview> 및 해당 외부 js 파일 참조 "webview2.js"가 작성하여 무시할 수 있습니다.
코드 쇼 :
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我是mytest.html的网页标题</title>
</head>
<body>
<webview style="width:100%;height:100%;" id="webview" >
<p onclick="handleclick()" id="mytestclick">测试你点我</p>
<script type="text/javascript">
function handleclick() {
try{
window.chrome.webview.postMessage(
{ data: 'Message from Edge Chromium', url: window.document.url }
);
}catch(error){
console.log("postMessage error: " + error);
}
console.log("测试这个点击事件执行了");
}
</script>
</webview>
<script src="js_lib/webview2.js" type="text/javascript"></script>
</body>
</html>
1.2, 델파이 이벤트 코드 작성
쓰기 버튼 [call js] 클릭 이벤트 :
- 알아야 할 사항은 다음과 같습니다.
1.2.1. TEdgeBrowser.ExecuteScript는 Intraweb과 약간 다른 방식으로 js 문자열을 실행합니다. <script> </ script> 태그를 추가 할 수 없습니다. 그렇지 않으면 실행되지 않으며 js 코드를 삽입하기 만하면됩니다. 외부 .js 파일을 가져 오는 것처럼 추가하기 만하면됩니다.
1.2.2 js 함수에 반환 값이있는 경우 html 인터페이스 요소와 연결해야하는 경우 값을 인라인으로 연결하고 할당하십시오. 예 : document.getElementById ( "mytestclick"). innerHTML = "변경하겠습니다. ! 누가 나를 클릭 (이길)하라고 했습니까! ";
1.2.3, 스레드를 사용하는 습관을 개발하십시오. b / s 클라이언트 : "브라우저"는 c / s 클라이언트 앱과 동일합니다. 그렇지 않으면 "브라우저"UI도 "약간 멈춘 것처럼 보입니다"라는 잘못된 UE 경험을 갖게됩니다.
procedure TForm_EdgeBrowser01.BitBtn_HandlePostmessageClick(Sender: TObject);
var LJs:string;
begin
LJs:=
//'<script type="text/javascript">'//:千万不能加,加了就不执行了:跟外部js文件类似,可从外部导入
//'return 12;'+//:一旦返回:就不弹出了:
'window.alert("既然你让我弹出，那你一点’‘确定’‘我就：");'
(*'webview.contentWindow.postMessage.postMessage('
+'{ data: "既然你让我弹出，那你一点’‘确定’‘我就：", , "*" }'
+');'//*)
+'document.getElementById("mytestclick").innerHTML = "我就把它改了！谁让你点（打）我呢！";'
+'console.log("delphi按钮：【调用js】执行了其中的js代码事件");'
//+'return 12;'//:一旦返回:就不弹出了
//+'</script>'//:千万不能加,加了就不执行了:跟外部js文件类似,可从外部导入
;
TThread.CreateAnonymousThread(
procedure begin
TThread.Synchronize( TThread.Current,
procedure begin
Memo1.Lines.Add('TEdgeBrowser控件开始让页面元素执行javascript事件代码......');
EdgeBrowser1.ExecuteScript(LJs);
end);
end).Start;
end;콜백 이벤트 작성 :
procedure TForm_EdgeBrowser01.EdgeBrowser1ExecuteScript(
Sender: TCustomEdgeBrowser; AResult: HRESULT;
const AResultObjectAsJson: string);
begin
//:回调:TCustomEdgeBrowser.ExecuteScript(const JavaScript: string);
//:AResult:结果错误码; AResultObjectAsJson:结果对象的Json
TThread.CreateAnonymousThread(
procedure begin
while AResult<>S_OK do sleep(0);
TThread.Synchronize( nil,
procedure begin
Memo1.Lines.Add('EdgeBrowser1执行脚本是否成功（0代表成功）：'+IntToStr(AResult));
Memo1.Lines.Add('EdgeBrowser1执行脚本后返回的Json数值（怪了不回调返回null，bug？！）：'+AResultObjectAsJson);
Memo1.Lines.Add('其实不是的：是因为你的【调用js】中的js没有function返回Json数据！');
end);
end).Start;
end;- 콜백의 본질 :
1.2.4 、 TCustomEdgeBrowser.ExecuteScript // Vcl.Edge 사용;
// uses Vcl.Edge;
procedure TCustomEdgeBrowser.ExecuteScript(const JavaScript: string);
begin
if FWebView <> nil then
FWebView.ExecuteScript(PChar(JavaScript),
Callback<HResult, PChar>.CreateAs<ICoreWebView2ExecuteScriptCompletedHandler>(
function(ErrorCode: HResult; ResultObjectAsJson: PWideChar): HResult stdcall
begin
Result := S_OK;
if Assigned(FOnExecuteScript) then
FOnExecuteScript(Self, ErrorCode, string(ResultObjectAsJson));
end));
end;1.2.5 위와 같이 ExecuteScript 메서드의 콜백은 ResultObjectAsJson의 반환 결과가 OnExecuteScript에서 AResultObjectAsJson에 할당되기를 기다리고 있으며 오류 코드 ErrorCode는 AResult : HRESULT에 할당되므로 본질적으로 스레드 동기화 이벤트이며 대기 시간이 필요합니다.
1.2.6 따라서 Thread Synchronize를 수행하기 위해서는 새로운 Thread에 넣어야합니다. 어떤 학생들은 현재 Thread에서 TThread.Current를 습관적으로 사용한다는 점에 유의해야합니다. nil을 사용하는 것이 가장 좋습니다. 쓰레드 환경에서 하나의 쓰레드는 문제가 있고 다른 쓰레드는 모두 중단됩니다. 델파이 쓰레드 라이브러리에 제공하여 운영 체제 커널 쓰레드와의 컨텍스트 및 인터페이스를 균일하게 예약합니다.
셋째, 모든 Delphi 소스 코드를 붙여 넣습니다.
1.1. 인터페이스에 대한 자세한 내용은 이전 기사 "RAD Studio 10.4.1 새로운 Chromium 기반 Microsoft Edge 브라우저 TEdgeBrowser 컨트롤 사용"을 참조하십시오.
1.2. 코드는 다음과 같습니다.
unit uEdgeBrowser01;
interface
uses
Winapi.Windows, Winapi.Messages,
System.SysUtils, System.Variants, System.Classes,
Vcl.Graphics,
Vcl.Controls, Vcl.Forms, Vcl.Dialogs,
Winapi.ActiveX,
WebView2, //:Edge的Web视图DLL的静态类型库WebView2.tlb及其关联库的调用：WebView2
Vcl.Edge, //:Edge的VCL控件的定义:是对 WebView2.pas 的进一步封装
Vcl.StdCtrls, Vcl.Buttons, Vcl.ExtCtrls
//, Winapi.ShLwApi :Edge的底层字符串及路由定义
;
type
TForm_EdgeBrowser01 = class(TForm)
EdgeBrowser1: TEdgeBrowser;
Panel1: TPanel;
BitBtn_Navigate: TBitBtn;
Panel2: TPanel;
Memo1: TMemo;
BitBtn_CapturePreview: TBitBtn;
BitBtn_HandlePostmessage: TBitBtn;
procedure BitBtn_NavigateClick(Sender: TObject);
procedure EdgeBrowser1NavigationStarting(Sender: TCustomEdgeBrowser;
Args: TNavigationStartingEventArgs);
procedure EdgeBrowser1ContentLoading(Sender: TCustomEdgeBrowser;
IsErrorPage: Boolean; NavigationID: TUInt64);
procedure EdgeBrowser1CreateWebViewCompleted(Sender: TCustomEdgeBrowser;
AResult: HRESULT);
procedure EdgeBrowser1CapturePreviewCompleted(Sender: TCustomEdgeBrowser;
AResult: HRESULT);
procedure BitBtn_CapturePreviewClick(Sender: TObject);
procedure FormCreate(Sender: TObject);
procedure FormShow(Sender: TObject);
procedure EdgeBrowser1ExecuteScript(Sender: TCustomEdgeBrowser;
AResult: HRESULT; const AResultObjectAsJson: string);
procedure EdgeBrowser1WebMessageReceived(Sender: TCustomEdgeBrowser;
Args: TWebMessageReceivedEventArgs);
procedure EdgeBrowser1WebResourceRequested(Sender: TCustomEdgeBrowser;
Args: TWebResourceRequestedEventArgs);
procedure BitBtn_HandlePostmessageClick(Sender: TObject);
procedure EdgeBrowser1SourceChanged(Sender: TCustomEdgeBrowser;
IsNewDocument: Boolean);
private
{ Private declarations }
public
{ Public declarations }
Fif_SSL:Boolean;
end;
var
Form_EdgeBrowser01: TForm_EdgeBrowser01;
implementation
{$R *.dfm}
procedure TForm_EdgeBrowser01.FormCreate(Sender: TObject);
var LICoreWebView2:ICoreWebView2;
begin
Memo1.Lines.Add('默认开始初始化(UI设计时的)EdgeBrowser1或初始化动态产生的TEdgeBrowser');
GetInterface( StringToGUID('{189B8AAF-0426-4748-B9AD-243F537EB46B}'),LICoreWebView2);
if LICoreWebView2 = EdgeBrowser1.DefaultInterface then
Memo1.Lines.Add('LICoreWebView2接口TGUID:'+'{189B8AAF-0426-4748-B9AD-243F537EB46B}' );
//GUIDToString StringToGUID
end;
procedure TForm_EdgeBrowser01.FormShow(Sender: TObject);
begin
self.Top:=0; self.Height:=960;
Memo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用>0的,否则访问的是其基础进程ID(0):'
+EdgeBrowser1.BrowserProcessID.ToString );
end;
procedure TForm_EdgeBrowser01.BitBtn_NavigateClick(Sender: TObject);
var LHResult_PostWebMessage:HResult;
begin
if EdgeBrowser1.WebViewCreated then//:必须的,否则接口调用报错:
begin
Memo1.Lines.Add('必须EdgeBrowser1.WebViewCreated,否则接口调用报错!'+sLineBreak
+'有这样一些接口:'+sLineBreak
+'DefaultInterface: ICoreWebView2'+sLineBreak
+'ControllerInterface: ICoreWebView2Controller'+sLineBreak
+'EnvironmentInterface: ICoreWebView2Environment'+sLineBreak
+'SettingsInterface: ICoreWebView2Settings'+sLineBreak
);
Memo1.Lines.Add('TEdgeBrowser:支持异步产生WebView控件：'+sLineBreak
+'有这样一些方法:'+sLineBreak
+'TEdgeBrowser.CreateWebView'+sLineBreak
+'TEdgeBrowser.CloseWebView'+sLineBreak
+'TEdgeBrowser.CloseBrowserProcess'+sLineBreak
);
Memo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用:'
+EdgeBrowser1.BrowserProcessID.ToString +sLineBreak );
Memo1.Lines.Add('TEdgeBrowser需要初始化一些参数,以使一些方法或接口生效:' +sLineBreak
+'EdgeBrowser1.BuiltInErrorPageEnabled :=true;' +sLineBreak
+'EdgeBrowser1.DefaultContextMenusEnabled :=true;' +sLineBreak
+'EdgeBrowser1.ZoomControlEnabled :=true;' +sLineBreak
+'EdgeBrowser1.StatusBarEnabled :=true;' +sLineBreak
+'EdgeBrowser1.DevToolsEnabled :=true;' +sLineBreak
+'EdgeBrowser1.DefaultScriptDialogsEnabled :=true;' +sLineBreak
+'EdgeBrowser1.ScriptEnabled :=true;' +sLineBreak
+'EdgeBrowser1.WebMessageEnabled :=true;' +sLineBreak
);
EdgeBrowser1.BuiltInErrorPageEnabled :=true; //:替代了浏览器内部错误提示
EdgeBrowser1.ZoomControlEnabled :=true; //:控制用户是否可以影响WebView的缩放
EdgeBrowser1.DevToolsEnabled :=true; //:控制用户是否能够使用上下文菜单或键盘快捷键打开DevTools窗口
EdgeBrowser1.StatusBarEnabled :=false;//:控制是否显示状态栏
EdgeBrowser1.DefaultContextMenusEnabled :=true;//:控制是否在WebView中向用户显示默认上下文菜单
//:若false:则网页代码中所有涉及Menu的事件将被屏蔽
{
EdgeBrowser1.DefaultScriptDialogsEnabled :=true;//:控制在显示JavaScript对话框时是否启动OnScriptDialogOpening
EdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行
//:特别注意:这两个属性:只要引用无论false或true,
//,网页下载的原生js将不在生效:由代码控制
//:ScriptEnabled :并不影响执行方法ExecuteScript(const JavaScript: string);
//}
EdgeBrowser1.WebMessageEnabled :=true;//:必须的,否则接口PostWebMessageAsString调用报错:
//(*
LHResult_PostWebMessage
:=EdgeBrowser1.DefaultInterface.PostWebMessageAsString(
PWideChar('{ICoreWebView2:true}') ) ;//:0接口函数执行成功 -1失败
if LHResult_PostWebMessage> -1 then
Memo1.Lines.Add('开始访问TEdgeBrowser的接口对象'
+IntToStr(LHResult_PostWebMessage) +sLineBreak
+'调用JavaScript也是类似的方式ExecuteScript()' +sLineBreak
);
//:开始访问TEdgeBrowser的接口对象
//*)
TThread.CreateAnonymousThread(
procedure
begin
TThread.Synchronize( nil,
procedure //var AHTMLContent: string;
begin //EdgeBrowser1.NavigateToString(AHTMLContent);
if EdgeBrowser1.Navigate(//:如果返回了错误码:=true,否则:=false
'https://www.cpuofbs.com/index.html' )=false then
//if EdgeBrowser1.Navigate(ExtractFilePath(ParamStr(0))+ 'mytest.html')=false then
Memo1.Lines.Add('开始请求浏览网页！' +sLineBreak );
end);
end
).Start;//}
end;
//EdgeBrowser1.Navigate('https://www.cpuofbs.com/index.html' );
//:养成使用线程的习惯:b/s的客户端:"浏览器"和我们的c/s客户端App一样
//:否则"浏览器"的UI也会出现“好像有点卡嘛”的不良UE体验
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1ContentLoading(
Sender: TCustomEdgeBrowser; IsErrorPage: Boolean; NavigationID: TUInt64);
begin
Memo1.Lines.Add('TEdgeBrowser组件NavigationID:'+IntToStr(NavigationID)
+',SizeRatio'+EdgeBrowser1.SizeRatio.ToString +sLineBreak
+':正在调取页面内容'+EdgeBrowser1.LocationURL +sLineBreak);
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1CreateWebViewCompleted(
Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
//
end;
procedure TForm_EdgeBrowser01.BitBtn_CapturePreviewClick(Sender: TObject);
begin
if EdgeBrowser1.WebViewCreated then
begin
EdgeBrowser1.ZoomFactor:=100/100;
EdgeBrowser1.CapturePreview(
System.SysUtils.ExtractFilePath(
System.ParamStr(0))+'CapturePreview01.png',PNG);
end;
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1CapturePreviewCompleted(
Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
Memo1.Lines.Add('TEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult='+IntToStr(AResult)+sLineBreak );
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1NavigationStarting(
Sender: TCustomEdgeBrowser; Args: TNavigationStartingEventArgs);
var Lname,Lvalue : PWideChar;
LHeaders: ICoreWebView2HttpRequestHeaders;
Literator: ICoreWebView2HttpHeadersCollectionIterator;
LhasNext, LhasCurrent: Integer;
Luri: PWideChar;
Lnavigation_id: Largeuint;
begin
Memo1.Lines.Add('TEdgeBrowser组件在执行Navigate时,触发NavigationStarting准备开始浏览网页！'+sLineBreak );
Args.ArgsInterface.Get_uri(Luri);//:获取当前浏览的网页的uri
Fif_SSL:= string(Luri).Contains('https');
if Fif_SSL=true then
begin
Memo1.Lines.Add('您当前浏览的网页是https安全链接！'+sLineBreak );
// Args.ArgsInterface.Set_Cancel(0);
// ShowMessage('您当前浏览的网页是https安全链接,请放心使用！');
end else
begin
Memo1.Lines.Add('您当前浏览的网页不是https安全链接！'+sLineBreak );
// Args.ArgsInterface.Set_Cancel(-1);
// ShowMessage('您当前浏览的网页不是https安全链接,本程序禁止运行！');
end;
Args.ArgsInterface.Get_RequestHeaders(LHeaders);
LHeaders.GetIterator(Literator);
Memo1.Lines.BeginUpdate;
Literator.MoveNext(LhasNext);
while LhasNext<>0 do
begin
Literator.Get_HasCurrentHeader(LhasCurrent);
Literator.GetCurrentHeader(Lname,Lvalue);
Memo1.Lines.AddPair('头信息LhasNext:'+LhasNext.ToString+',LhasCurrent:'+LhasCurrent.ToString+',名称:'+Lname,',值:'+Lvalue);
Literator.MoveNext(LhasNext);
end;
Memo1.Lines.Add('请求的uri:'+Luri);
Memo1.Lines.Add('navigation_id:'+Lnavigation_id.ToString);
Memo1.Lines.Add(sLineBreak);
Memo1.Lines.EndUpdate;
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1SourceChanged(
Sender: TCustomEdgeBrowser; IsNewDocument: Boolean);
begin
if IsNewDocument then Memo1.Lines.Add('您打开的新的文档进行浏览！');
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1WebResourceRequested(
Sender: TCustomEdgeBrowser;
Args: TWebResourceRequestedEventArgs);
//:交互式的事件,除非页面元素的事件的javascript代码触发了它:
var
LRequest: ICoreWebView2WebResourceRequest;
LMethod: PWideChar;
LResponse: ICoreWebView2WebResourceResponse;
begin
Args.ArgsInterface.Get_Request(LRequest);//:拿到请求接口
LRequest.Get_Method(LMethod);
Memo1.Lines.Add('请求的Method:'+LMethod);
Args.ArgsInterface.Get_Response(LResponse);//:拿到响应接口
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1WebMessageReceived(
Sender: TCustomEdgeBrowser;
Args: TWebMessageReceivedEventArgs);
//:交互式的事件,除非页面元素的事件的javascript代码postMessage触发了它:
(*//:比如:
<!DOCTYPE html>
<html>
<body>
<p onclick="handleClick()">发送消息</p>
<script>
function handleClick() {
window.chrome.webview.postMessage({ data: 'Message from Edge Chromium', url: window.document.URL });
}
</script>
</body>
</html>
*)
var
LSource: PWideChar;
LwebMessageAsJson: PWideChar;
LwebMessageAsString: PWideChar;
begin
Args.ArgsInterface.Get_Source(LSource);
Memo1.Lines.Add('接收到的Web消息-资源:'+LSource);
Args.ArgsInterface.TryGetWebMessageAsString(LwebMessageAsString);
Memo1.Lines.Add('尝试接收的Web消息-字符串:'+LwebMessageAsString);
Args.ArgsInterface.Get_webMessageAsJson(LwebMessageAsJson);
Memo1.Lines.Add('接收到的Web消息-Json数据:'+LwebMessageAsJson);
MessageBox(Handle, LwebMessageAsJson, PChar('牵引软件-提醒您：'), MB_OK);
//:window.chrome.webview.postMessage的url请求资源的路径Rest要正确否则不回调:...
//AddScriptToExecuteOnDocumentCreated
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1ExecuteScript(
Sender: TCustomEdgeBrowser; AResult: HRESULT;
const AResultObjectAsJson: string);
begin
//:回调:TCustomEdgeBrowser.ExecuteScript(const JavaScript: string);
//:AResult:结果错误码; AResultObjectAsJson:结果对象的Json
TThread.CreateAnonymousThread(
procedure begin
while AResult<>S_OK do sleep(0);
TThread.Synchronize( nil,
procedure begin
Memo1.Lines.Add('EdgeBrowser1执行脚本是否成功（0代表成功）：'+IntToStr(AResult));
Memo1.Lines.Add('EdgeBrowser1执行脚本后返回的Json数值（怪了不回调返回null，bug？！）：'+AResultObjectAsJson);
Memo1.Lines.Add('其实不是的：是因为你的【调用js】中的js没有function返回Json数据！');
end);
end).Start;
end;
procedure TForm_EdgeBrowser01.BitBtn_HandlePostmessageClick(Sender: TObject);
var LJs:string;
begin
LJs:=
//'<script type="text/javascript">'//:千万不能加,加了就不执行了:跟外部js文件类似,可从外部导入
//'return 12;'+//:一旦返回:就不弹出了:
'window.alert("既然你让我弹出，那你一点’‘确定’‘我就：");'
(*'webview.contentWindow.postMessage.postMessage('
+'{ data: "既然你让我弹出，那你一点’‘确定’‘我就：", , "*" }'
+');'//*)
+'document.getElementById("mytestclick").innerHTML = "我就把它改了！谁让你点（打）我呢！";'
+'console.log("delphi按钮：【调用js】执行了其中的js代码事件");'
//+'return 12;'//:一旦返回:就不弹出了
//+'</script>'//:千万不能加,加了就不执行了:跟外部js文件类似,可从外部导入
;
TThread.CreateAnonymousThread(
procedure begin
TThread.Synchronize( TThread.Current,
procedure begin
Memo1.Lines.Add('TEdgeBrowser控件开始让页面元素执行javascript事件代码......');
EdgeBrowser1.ExecuteScript(LJs);
end);
end).Start;
end;
end.첨부 :이 블로그의 관련 블로그 게시물 :
1. "RAD Studio 10.4.1 새로운 Chromium 기반 Microsoft Edge 브라우저 TEdgeBrowser 제어 사용"
2. "클라이언트 JavaScript와 미들웨어 서버 간의 Delphi Restful 상호 작용"