从 C# webbrowser 控件调用 TypeScript 函数

Question

我有带 WebBrowser 控件的 WinForm，我在其中打开 HTML5 + Angular JS (TypeScript) 表单。我想从我的 C# 代码调用打字稿函数，但它不适用于 InvokeScirpt() 方法。

webBrowser1.Document.InvokeScript("method", 新对象[] {"123", "453")});

当我在网络浏览器控件中加载 HTML + Javascript 页面时，我可以使用这种方式调用 Javascript 方法。

此外，请注意我可以从 HTML 页面调用的打字稿功能（单击按钮时）

你能否建议这是从 C# webbrowser 控件调用 typescript 函数的正确方法还是我需要尝试其他方法？

谢谢，

Answer 1

当您构建应用程序时，Typescript 方法将编译为 javascript 方法，因此要调用它们，您可以像调用任何其他 javascript 方法一样调用已编译的方法。

例子

在这个例子中，我想你有一个 app.ts 包含这个 class:

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

而且我想您已经在 index.html 中添加了 app.js 添加此代码：

<html>
<head>
    <script src="app.js"></script>
</head>
<body>
    ...
</body>
</html>

然后在您的 windows 表单应用程序中，您可以这样使用 Greeter：

string javascript = "var greeter = new Greeter('World!'); alert(greeter .greet());";
webBrowser1.Document.InvokeScript("eval", new object[] { javascript });

Answer 2

我遇到了同样的问题。我想从 WebBrowser 控件中加载一个 Angular 2+ 并进行表单自动填充。所以我按照 Follow 做了：

在 Angular 2+ 项目的 index.html 的头部我添加了一个 javascript 函数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <base href="/" />
  <title>Test</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <script type="text/javascript">
    function callAngularFunction(params) {window.angularComponentReference.zone.run(function (){window.angularComponentReference.LoginLogout(params); }); }                                         
  </script>
  </head>
  <body>
    <app-root>Loading...</app-root>  
  </body>
  </html>

然后在我想要所属方法的组件的构造函数中，response

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})

export class LoginComponent implements OnInit{
   constructor(private ngZone: NgZone){} 
   ngOnInit() {
      window['angularComponentReference'] = { component: this, zone: this.ngZone, LoginLogout: (params) => this.AutoLogin(params) };
   }
  
   public AutoLogin(params: any){
     //params could be a string with ',' separator
     //then assign each parameter to proper variable in this component
     //which bind to Html fields 
   }
}

在 C# 中

winWebBrowser.Document.InvokeScript("callAngularFunction", 新对象[] {"username,password"});

希望对您有所帮助。

从 C# webbrowser 控件调用 TypeScript 函数

Call TypeScript function from C# webbrowser control

html

c#

webbrowser-control

winforms

angularjs