从 C# webbrowser 控件调用 TypeScript 函数答案

【问题标题】：Call TypeScript function from C# webbrowser control从 C# webbrowser 控件调用 TypeScript 函数
【发布时间】：2016-12-21 14:06:20
【问题描述】：

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

webBrowser1.Document.InvokeScript("method", new object[] {"123", "453")});

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

另外，请注意我可以从我拥有的 HTML 页面调用的打字稿功能（点击按钮）

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

谢谢，

【问题讨论】：

据我所知，typescript 方法会在您构建应用程序时编译为 javascript 方法，因此要调用它们，这样您就可以像调用任何其他 javascript 方法一样调用已编译的方法。
正确，我有同样的理解，但不知何故它不起作用。我也没有看到任何调试选项。 O 应该在这里尝试任何其他选项吗？
可能你试图调用的方法是一个对象的方法，你不能直接调用它。您应该首先创建该对象的一个实例（使用 javascript 编译代码），然后调用该对象的方法。
谢谢。您有任何示例如何使用 javascript 编译代码创建该对象的实例吗？
是的，我添加了一个例子。

标签： c# html angularjs winforms webbrowser-control

【解决方案1】：

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

示例

在示例中，我假设您有一个包含此类的app.ts：

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 });

【讨论】：

感谢这种方法对我有用。 2 个问题 1. 有没有更好的方法？这看起来与我的 Angular 代码紧密结合。构造函数的任何更改都会影响这一点。 2. 如果我在构造函数中有更多参数，如 $Scope、$State、$windo、$timeout 等，该怎么办？是否真的可以使用这些类型的参数从我的 C# 代码创建一个对象，或者我应该每次都创建默认构造函数作为解决方法？我是 Angular 的新手，所以不太确定在应用程序之外创建构造函数时传入的参数 $Scope、$State、$windo、$timeout。感谢您的帮助。
不客气 :) - 不幸的是，我不熟悉 angular，我不知道使用这些参数的最佳方式，但你可以编写任何你需要的 javascript 代码并使用webBrowser1.Document.InvokeScript("eval", new object[] { javascript });，您可以运行代码并获得结果。要在浏览器控件和 Windows 窗体应用程序之间进行通信，请查看 this post。要在 WebBrowser 控件中显示现代内容，请查看 this post。

【解决方案2】：

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

在 Angular 2+ 项目的 index.html 的 head 部分中，我添加了一个 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>

然后在我想要的组件的构造函数中，响应方法

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", new object[] {"用户名,密码"});

希望对您有所帮助。

【讨论】：