RAD Studio 10.4.1的TEdgeBrowser与javascript交互-基于Chromium的Edge浏览器控件用法之二

最新推荐文章于 2025-10-29 13:14:40 发布

原创

最新推荐文章于 2025-10-29 13:14:40 发布 · 置顶 · 6.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#Studio 10.4.1 #TEdgeBrowser #javascript #Edge浏览器 #delphi 10.4.1

本文介绍RADStudio10.4.1中TEdgeBrowser控件如何与JavaScript交互，包括流畅浏览Bootstrap H5页面、捕获页面截图及执行JS代码的方法。

RAD Studio 10.4.1的TEdgeBrowser与javascript交互-基于Chromium的Edge浏览器控件用法之二

一、先看看运行代码的效果吧

1.1、很通畅的浏览Bootstrap响应式H5页面

1.2、可变比例捕获页面图片只需一句话搞定

1.3、执行javascript也是一句话的事情

二、delphi代码如何实现的

1.1、编写html页面代码，在其中加入页面元素的点击事件

1.2、编写delphi事件代码

三、粘上所有delphi源码给你

1.1、界面部分详见上一篇《RAD Studio 10.4.1新的基于Chromium的Microsoft Edge浏览器的TEdgeBrowser控件用法》

1.2、代码如下：

附：本博客相关博文：

喜欢的话，就在下面点个赞、收藏就好了，方便看下次的分享：

RAD Studio 10.4.1的TEdgeBrowser与javascript交互-基于Chromium的Edge浏览器控件用法之二

现在delphi在服务器有了TEdgeBrowser可以很方便的与javascript相互沟通了，这都得益于基于Chromium的Microsoft Edge浏览器不仅如此，delphi的桌面c/s多层分布式应用程序的客户端，TEdgeBrowser也可以让Edge浏览器很通畅的访问Bootstrap响应式H5页面，再也不会走形变样啦。

一、先看看运行代码的效果吧

1.1、很通畅的浏览Bootstrap响应式H5页面

1.2、可变比例捕获页面图片只需一句话搞定

1.3、执行javascript也是一句话的事情

二、delphi代码如何实现的

1.1、编写html页面代码，在其中加入页面元素的点击事件

比如：<p>标签这个页面元素，其id="mytestclick"，内联显示为“测试你点我”，为其编写ο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、编写delphi事件代码

写按钮【调用js】的点击事件：

需要注意的是：

1.2.1、TEdgeBrowser.ExecuteScript执行js字符串与Intraweb等的调用方式稍有不一样，不能加入<script></script>标签，则否是不会执行的，你只需把它其中的js代码加入即可，就跟引入外部.js文件一样的方式；

1.2.2、js函数若有返回值，若需将其和html界面元素关联，请关联赋值，以内联的方式，比如：document.getElementById("mytestclick").innerHTML = "我就把它改了！谁让你点（打）我呢！"；

1.2.3、养成使用线程的习惯。b/s的客户端:"浏览器"和我们的c/s客户端App一样，否则"浏览器"的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文件类似,可从外部导入
    ;
  TTh