UWP - WebView - Angular JS 注入答案

【问题标题】：UWP - WebView - Angular JS InjectionUWP - WebView - Angular JS 注入
【发布时间】：2019-02-02 07:42:47
【问题描述】：

我目前正在开发在 Windows 10 上开发的 UWP 应用程序。我正在使用 WebView 控件来显示第 3 方 HTML 页面。 HTML 是使用 Angular JS 开发的。

问题：网页有函数ng-click = c.open();

我想通过我的 C# 代码使用 javascript/angular 注入 覆盖此函数并附加 window.external.notify() 以便当在网页上单击按钮时，UWP 网络视图会通过 @987654323 得到通知@。

我是 javascript 和 Angular 的新手，任何指针和指导都会非常有帮助。

 WebView.InvokeScriptAsync("eval", new[]
                                           {
                                                   @"(function(){
                                                       var hyperlinks = document.getElementsByClassName('btn');                                        
                                                        for(var i = 0; i < hyperlinks.length; i++)
                                                        {                                                           
                                                            **//What should i place here to override the btn ng-click fucntion??**
                                                        }
                                                    })()"

                                           });

【问题讨论】：

那么，你遇到了什么问题？
我无法通过 C# 代码使用 javascript 覆盖 ng-click 函数。附上我试图在问题陈述中使用的代码

标签： javascript angularjs uwp

【解决方案1】：

WebView 控件显示第 3 方 HTML 页面。

根据您的要求，您可以使用InvokeScriptAsync 注入 eval 函数，也可以覆盖 btn onclick 事件处理程序。但是您无法在 eval 函数中处理角度 $scope，因为它在 javaScript 中被阻止。即使您可以获取按钮对象并添加新的偶数处理程序，ng-click 仍然存在于按钮功能列表中。下面讲述了如何注入 eval 并获取带有 id 的 html 元素。

await MyWeb.InvokeScriptAsync("eval", new[]
{
       @"(function(){                                          
         document.getElementById('btn').onclick = function () {
                    this.innerHTML = 'hello'                   
                }
        })()"

});

您可以在上述方法中附加window.external.notify()，但不能用于返回$scope 值。

【讨论】：