Twitter bootstrap HTML与XForms的混合_Twitter Bootstrap_Google Chrome_Xamarin_Webview_Xamarin.android

Twitter bootstrap HTML与XForms的混合

twitter-bootstrap google-chrome xamarin webview xamarin.android

Twitter bootstrap HTML与XForms的混合,twitter-bootstrap,google-chrome,xamarin,webview,xamarin.android,Twitter Bootstrap,Google Chrome,Xamarin,Webview,Xamarin.android,我正在开发一个应用程序，我正在尝试加载一个带有HybridWebView（“”）的html页面在我试图加载的html页面上，我有一个引导转盘控件（）。问题是它不可见！除转盘外，所有其他元素均可见。如果我在我的android手机上用chrome浏览器加载html页面，效果会非常好。为什么它在xamarin不起作用？xamarin不支持JQuery吗我的HTML <html> .旋转木马内部{ 身高：100%；背景尺寸：封面；背景位置：中心；背景重复：无重复； }

我正在开发一个应用程序，我正在尝试加载一个带有HybridWebView（“”）的html页面

在我试图加载的html页面上，我有一个引导转盘控件（）。问题是它不可见！除转盘外，所有其他元素均可见。如果我在我的android手机上用chrome浏览器加载html页面，效果会非常好。为什么它在xamarin不起作用？xamarin不支持JQuery吗

我的HTML

<html>


.旋转木马内部{
身高：100%；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}

你好，世界
啜饮！



第一张幻灯片
第二张幻灯片
第三张幻灯片
变量$item=$（'.carousel.item'）；
var$wHeight=$（window.height（）；
$item.eq（0）.addClass（'active'）；
$item.height（$wHeight）；
$item.addClass（“全屏”）；
$（'.carousel img'）。每个（函数（）{
var$src=$（this.attr（'src'）；
var$color=$（this.attr（'data-color'）；
$（this.parent（）.css）({
“背景图像”：“url（+$src+）”，
“背景色”：$color
});
$（this.remove（）；
});
$（窗口）.on（'resize'，函数（）{
$wHeight=$（窗口）.height（）；
$item.height（$wHeight）；
});
$（'.carousel'）.carousel（）
函数日志（str）
{
$（'#result'）.text（$（'#result'）.text（）+“”+str）；
}
函数调用ECSCODE（数据）{
试一试{
日志（“发送数据：”+数据）；
调用操作（数据）；
}
捕捉（错误）{
日志（err）；
}
}

我的Android HybridWebView实现

public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
{
    const string JavaScriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

    protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
    {
        base.OnElementChanged(e);

        if(Control == null)
        {
            var webView = new Android.Webkit.WebView(Forms.Context);
            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.AllowFileAccess = true;
            webView.Settings.AllowFileAccessFromFileURLs = true;
            webView.Settings.AllowContentAccess = true;
            webView.SetWebChromeClient(new WebChromeClient());
            SetNativeControl(webView);
        }
        if(e.OldElement != null)
        {
            Control.RemoveJavascriptInterface("jsBridge");
            var hybridWebView = e.OldElement as HybridWebView;
            hybridWebView.Cleanup();
        }
        if(e.NewElement != null)
        {
            Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
            Control.LoadUrl(string.Format("file:///android_asset/Content/{0}", Element.Uri));
            InjectJS(JavaScriptFunction);
        }
    }

    void InjectJS(string script)
    {
        if (Control != null)
        {
            Control.LoadUrl(string.Format("javascript: {0}", script));
        }
    }
}

公共类HybridWebViewRenderer:ViewRenderer
{
const string JavaScriptFunction=“函数invokeCharpAction（数据）{jsBridge.invokeAction（数据）；}”；
受保护的覆盖无效OnElementChanged（ElementChangedEventArgs e）
{
基础。一个要素发生变化（e）；
if（Control==null）
{
var webView=newandroid.Webkit.webView（Forms.Context）；
webView.Settings.JavaScriptEnabled=true；
webView.Settings.AllowFileAccess=true；
webView.Settings.AllowFileAccessFromFileURLs=true；
webView.Settings.AllowContentAccess=true；
SetWebChromeClient（新的WebChromeClient（））；
SetNativeControl（网络视图）；
}
if（e.OldElement！=null）
{
RemoveJavascriptInterface（“jsBridge”）；
var hybridWebView=e.OldElement作为hybridWebView；
hybridWebView.Cleanup（）；
}
if（例如NewElement！=null）
{
AddJavascriptInterface（新的JSBridge（this），“JSBridge”）；
Control.LoadUrl（string.Format（“file:///android_asset/Content/{0}（Element.Uri））；
InjectJS（JavaScriptFunction）；
}
}
void InjectJS（字符串脚本）
{
if（控件！=null）
{
Control.LoadUrl（string.Format（“javascript:{0}”，脚本））；
}
}
}

我自己就能解决这个问题。我试着将其重写为一个普通的android应用程序，并注意到它只有在WebView元素是顶部节点时才起作用，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

我认为xamarin表单不会自动将viewrender元素放置在层次结构的顶部。因此，我在线检查了xamarin自己的webview实现，发现通过向webview对象添加这行代码“webview.LayoutParameters=new global:：Android.Widget.AbsoluteLayout.LayoutParams（LayoutParams.MatchParent，LayoutParams.MatchParent，0，0）；”可以解决问题。也为我平庸的英语感到抱歉

public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
{
    const string JavaScriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

    protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
    {
        base.OnElementChanged(e);

        if(Control == null)
        {
            var webView = new Android.Webkit.WebView(Forms.Context);
            webView.Settings.JavaScriptEnabled = true;
            webView.Settings.AllowFileAccess = true;
            webView.Settings.AllowFileAccessFromFileURLs = true;
            webView.Settings.AllowContentAccess = true;
            webView.SetWebChromeClient(new WebChromeClient());
            SetNativeControl(webView);
        }
        if(e.OldElement != null)
        {
            Control.RemoveJavascriptInterface("jsBridge");
            var hybridWebView = e.OldElement as HybridWebView;
            hybridWebView.Cleanup();
        }
        if(e.NewElement != null)
        {
            Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
            Control.LoadUrl(string.Format("file:///android_asset/Content/{0}", Element.Uri));
            InjectJS(JavaScriptFunction);
        }
    }

    void InjectJS(string script)
    {
        if (Control != null)
        {
            Control.LoadUrl(string.Format("javascript: {0}", script));
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />