通过 Xamarin.Forms 中 WebView 中的 Javascript onClick 事件调用 C# 函数答案

【问题标题】：Calling a C# function through Javascript onClick event in WebView in Xamarin.Forms通过 Xamarin.Forms 中 WebView 中的 Javascript onClick 事件调用 C# 函数
【发布时间】：2020-08-10 18:30:08
【问题描述】：

我有一个帖子类型WebView，我设法将其与服务响应绑定为字符串，但我有一些链接，如相关帖子，它们有其 id。单击这些链接时，我希望用户转到该文章。我尝试了很多解决方案，但它看起来像 JavaScript 不会在点击时调用，它会在加载时调用，因为我的完整 WebView 被视为字符串，如果我连接它，它绝对不是脚本。

这是我完整的 WebView 代码，所附屏幕截图是在 WebView 中制作的链接。

我设法通过连接字符串中的整个响应来使其工作。下面是帮助我实现这一目标的代码

String getHtml()
{
    var bodyStyle = "<!DOCTYPE html><html><head><style>body{height: 100%;}p{text-align:left;color:#191919;}filter{background-color:#191919;}a:link"
        + "{color:#2588B0; background-color:transparent}a:visited {color:#0099CC; background-color:transparent}"
        + "a:hover{color:#0099CC; background-color:transparent}a:ative{color:#0099CC; background-color:transparent}span{background-color: yellow;color: black}customRight{float: right}</style></head><body>";}

    var refs = bodyStyle;

    refs = refs + "<center><h4>" + response.Title + "<h4></center>";

    if (response.Pc.Count > 0)
    {
        refs = refs + "<center><u>" + Pc +
            "</a></u></center><br>";
    }

    if (string.IsNullOrWhiteSpace(response.Cn))
    {
        refs = refs + "<center>" + response.Cn + "</center><br>";

    }

    if (response.Judges.Count() > 0)
    {
        refs = refs + "<center> <strong>Coram:</strong> " + JudgesN + "</center><br>";
    }

    if (string.IsNullOrWhiteSpace(response.JGD.ToString()))
    {
        refs = refs + "<center> <strong>Decided On:</strong> " + response.JGD + "</center><br>";
    }

    if(string.IsNullOrWhiteSpace(response.AppealType) )
    {
        refs = refs + "<center> <strong>Appeal Type: </strong>" + response.AppealType + "</center><br>";
    }

    if (response.Appellants != null)
    {
        refs = refs + "<left><b>" + apeal + "</b></left>";
        refs = refs + "<customRight>apeal</customRight><br>";

    }
    refs = refs + "<center>VERSUS</center>";

    if (response.Respondants != null)
    {
        refs = refs + "<left><b>" + resp + "</b></left>";
        refs = refs + "<customRight>resps</customRight><br><br>";
    }

    if (string.IsNullOrWhiteSpace(response.FinalVr))
    {
        refs = refs + "<center> <strong>Final:</strong> " + response.FinalVr + "</center><br>";
    }

    if (string.IsNullOrWhiteSpace(response.note))
    {
        refs = refs + "<p> <strong>Note:</strong><br/> " + response.Headnote.ToLowerInvariant() + "</p><br>";
    }

    if(response.Refs != null)
    {
        refs = refs + "<left><b>Refered Jdgmts: </b></left><br>";
        foreach(var obj in response.Refs) 
            {
            if(obj.Jid == null) {
                refs = refs + "<p style='font-size:13px;'>"
                    + obj.Title
                    +"</p>";
            }
            else
            {
                refs = refs + "<p style='font-size:13px;'>" + "<a href=\""
                    + obj.Jid
                         + "\" target=\"_blank\" onClick=\"(function(e){alert('e is here'); "+ loadJt(obj.Jid);+"return false;})(); return false;\">"
                         + obj.Title
                    + "</a>"
                    + "</p>";
            }

    jdgmt = jdgmt.Replace("^^^", "<br/><br/>");
    jdgmt = jdgmt.Replace("<SPARA>", "<p>");
    jdgmt = jdgmt.Replace("</SPARA>", "</p>");

    refs = refs + jdgmt;
    refs = refs + "</body></html>";

    return refs;
}

data.Source = new HtmlWebViewSource { Html = getHtml(), BaseUrl="http://url.com/", BindingContext = response };

这是我的 LoadJt 函数

string loadJt(string jjid)
{
    loadJmt(jid);// invokes the constructor and updates my VM too.
    return jid;
}

链接的显示方式如下

【问题讨论】：

标签： c# webview xamarin.forms hybrid-mobile-app

【解决方案1】：

不幸的是，当我们谈论移动设备上的 WebView 时。通过 JavaScript 调用 C# 函数是一种不好的方法。由于 webview，这样做非常有限，而且您可能在每个平台上也会遇到很多问题

所以我们在这里找到一个适合我的解决方案，我经常使用它

1)您无需在 xamarin.forms 和 HTML 上实现 CustomRenderer

2)这个解决方案可以调用相机，以原生方式下载文件，以及任何你想要的，只需拦截导航事件

3) 在您的 HTML 标签中实现

 "<a href=></a>"

类似这样的：

"<a href='..MyOnclickMethod?objId="+obj.Jid+"'>"
+ obj.Title+ "</a>"

4) 在您的 Xamarin WebView 上

...
webview.Navigating+=WebView_Navigating
...


private void WebView_Navigating(object sender, WebNavigatingEventArgs evt)
{
      string url = evt.Url;

      if (url.Contains("..MyOnclickMethod"))
      {
         //do your code here...
            evt.Cancel = true;
      }
}

确保您调用 evt.Cancel = true; 防止webview继续进程申请

如果 id 还没有出现：您安装的字符串可能不正确如果您确定这一点并且它还没有工作，请尝试传递

"<a href>"

一个带有您的 ID 的有效 URL，例如

"<a href='www.google.com/?objId='"+obj.Jid+">"

希望对你有帮助

【讨论】：

感谢安德烈，它确实帮助了我。但我遇到了新问题。该 url 不包含我连接到我的 webview 的 href 部分的 Id。它如下所示：这就是我连接的方式。引用 = 引用 + "
" + "" 这是我得到的网址："..TheLaws.iOS.app/http:/the-laws.com/..MyOnclickMethod?objId= + obj.Title + "" + "
"; 你能请指导我做错了什么？
确保调用 evt.Cancel = true;为了防止 webview 继续处理请求如果 id 还没有出现：您安装的字符串可能不正确如果您确定这一点并且它还没有工作，请尝试使用您的 id 传入“”一个有效的 URL像 ""