WebView.Eval 不在我的 HTML 中调用 javascript 函数 - Xamarin Forms答案

【问题标题】：WebView.Eval not call javascript function inside my HTML - Xamarin FormsWebView.Eval 不在我的 HTML 中调用 javascript 函数 - Xamarin Forms
【发布时间】：2017-02-20 23:15:48
【问题描述】：

我正在尝试使用 WebView 控件的 Eval 函数在我的 WebView 中运行 javascript 函数。 WebView 使用 Javascript 函数正确加载了我的 HTML，但是当我使用 WebView.Eval(javascript_function) 时，什么也没有发生，也没有调用该函数。这是我的 CS 代码：

var _Script = string.Format("enableBeacon(\"{0}\") ", id);
        _WebViewMap.Eval(_Script);

这是我的 Xaml：

<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<WebView x:Name="WebViewMap" WidthRequest="1000" HeightRequest="1000" Source="{Binding HtmlSource.HtmlUrlSource}"/> 
</StackLayout>

这是我的 Javascript 函数：

function enableBeacon(id)
{
 var myBeacon = document.getElementById(id);
 myBeacon.style.display = "";
alert("I am an alert box!");
}

提前致谢

【问题讨论】：

这一切看起来都是正确的。但是不确定WebView.Eval() 方法对空白有多么挑剔。您的示例代码在右括号后显示了一个额外的空格。你有"enableBeacon(\"{0}\") "，所以也许试试"enableBeacon(\"{0}\")"，注意右括号后不要有多余的空格。
我试图从我的函数“enableBeacon”中删除空格，但 WebView 仍然没有调用里面的 Javascript..

标签： javascript html xamarin webview xamarin.forms

【解决方案1】：

请试试这个：

webView.Navigated += (o, s) => {
 webView.Eval("alert('text')");
 };

【讨论】：

添加一些解释，说明此答案如何帮助 OP 解决当前问题

【解决方案2】：

我相信卡米尔是正确的。

网页必须完成加载，然后才能使用 WebView.Eval 调用 Javascript。

这是我要演示的代码：

public partial class WebViewPage : ContentPage
{
    public WebViewPage ()
    {
        InitializeComponent ();
        BindingContext = new WebViewPageViewModel();
        this.Title = App.CurrentProfileHeader;

        MyWebView.Navigated += MyWebView_Navigated;

    }

    private void MyWebView_Navigated(object sender, WebNavigatedEventArgs e)
    {
        string token = "Hello from the C# World! 2";
        MyWebView.Eval("displayToken('" + token + "')");
    }

    protected override void OnAppearing()
    {
        base.OnAppearing();

        string token = "Hello from the C# World!";
        MyWebView.Eval("displayToken('" + token + "')");

    }
}


<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body onload="myFunction()">
    <p>Hello Cruel World!</p>
    <script type="text/javascript">
        function displayToken(token)
        {
            alert(token);
        }
        function myFunction() {
            alert("Page has loaded");
        }

    </script>
</body>
</html>

使用此代码，您应该会看到“onappearing”在 html 页面 onload 事件之前触发。然而，导航事件在 html 页面完全加载后触发。

【讨论】：