jQuery Mobile ne fonctionne pas dans WebView lors du chargement à partir d'actifs locaux

J'essaie de rendre dans mon application Android une page créée à l'aide de jQueryMobile, mais j'ai besoin de le faire dans une webView, dans un état hors ligne.

À cette fin, j'ai commencé à copier les index.html de ma page et à prendre tous les moyens nécessaires directement à la mémoire interne de mon appareil. J'ai ensuite chargé jusqu'en tapant file:///sdcard/index.html à la fois le navigateur interne de mon appareil et le Chrome app et le site web a montré tout simplement beau, avec jQuery styles et de toutes les.

Puis-je entrer dans mon app, où j'ai une webView, et c'est là que j'ai réellement besoin de rendre la page mentionnée précédemment. Je charge la page à l'aide de loadDataWithBaseURL() (parce que c'est ce que j'ai finalement besoin de faire) comme ceci:

loadDataWithBaseURL("file:///android_asset/web/", html, "text/html", "UTF-8", null);

Je garde tous mes biens dans le répertoire web de mon dossier assets.

Le problème est que si je charge la page, sans les actifs de référence (juste normalement appel loadUrl), il se charge, mais évidemment sans style ou de la fonctionnalité. Quand j'ai mis les actifs de référence de l'appel de loadDataWithBaseURL c'EST en effet la lecture de l'actif de référence correctement, mais le rendu est coincé avec jqueryMobile du rouet et de la page, jamais fait charge. C'est ce que je vois:

jQuery Mobile ne fonctionne pas dans WebView lors du chargement à partir d'actifs locaux

Donc pour résumer:

  • J'ai créé un site web à l'aide de jQuery Mobile. C'est juste une simple html
    page avec jQuery style.

  • J'ai préparé pour le mode hors connexion de chargement. J'ai emballé les actifs nécessaires
    dans un dossier et dans le index.html je référence de ces actifs relativement (par exemple href="web/styles.css").

  • Si je charge cette page dans mon navigateur de bureau, sans connectivité, il
    œuvres    .

  • Si je charge cette page dans mon navigateur mobile (Chrome ou interne

    l'un), il fonctionne.

  • Si je charge cette page sans les actifs références dans mon webview,
    il fonctionne (sans style ou des images, etc.)

  • Si je charge cette page avec l'actif de référence dans mon webview, il

    ne fonctionne pas, il est coincé avec la roue qui tourne. La connectivité n'affecte pas la question.

  • Si je supprime la ligne qui fait référence à la jQM feuille de style, puis la page est
    chargé sans style, mais les images sont chargées correctement (donc le
    la référence à l'actif est correct)

Noter que la roue ne devrait même pas apparaitre en premier lieu, depuis j'ai complètement désactivé AJAX dans jQM à l'aide de:

<script>
$.mobile.ajaxEnabled = false;
</script>

La chose étrange est que, autant que je sache, l'interne navigateur web d'Android et webviews partagent le même moteur de rendu, donc je suis perdu quant à ce qui pourrait se passer ici, et depuis il fonctionne bien avec régulièrement des navigateurs, j'ai peut corriger ce qui se passe.

Pour la référence, c'est la façon dont je définis mon webView:

    mWebView = (WebView) findViewById(R.id.webView);
    WebSettings s = mWebView.getSettings();
    s.setJavaScriptEnabled(true);

J'avais un tas d'autres paramètres, mais pour des raisons de simplification du problème, je l'ai enlevé et le problème persiste.

Des suggestions?

PD. Comme demandé, affichage de la index.html fichier. C'est l'exemple le plus simple, juste un index vide. Le problème persiste:

<!doctype html>
<html lang=es>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<head>
<title>
    My title
</title>

<script>
$.mobile.ajaxEnabled = false;
</script>

<script src="script/jquery/jquery-1.9.1.min.js"></script>
<script src="script/jquery/jquery.mobile-1.3.2.min.js"></script>
<link href="css/jquery.mobile-1.3.2.min.css" rel="stylesheet" media="screen" type="text/css"  />


</head>

<body>

</body>
</html>
  • Veuillez afficher le code de index.html
  • vient de publier une version réduite, où le problème existe toujours
  • Je viens de découvrir qu'en commentant la jQM css ligne rend le chargement de la page (mais sans le style, évidemment), de sorte qu'il semble que ce soit un problème lié au css
InformationsquelleAutor Gabriel Sanmartin | 2013-10-15
  1. 28

    Résolu moi-même. S'avère de JellyBean, la webView paramètres incluent une propriété de désactiver le chargement à partir d'un fichier de ressources, et il est désactivé par défaut.

    L'exécution de mon application à partir d'un pré-Jelly appareil fonctionne très bien, mais les deux appareils que j'utilisais pour le développement ont été à la fois 4.3 fonction.

    Je l'ai résolu en utilisant le code suivant, si quelqu'un est intéressé:

        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
        s.setAllowUniversalAccessFromFileURLs(true);
        s.setAllowFileAccessFromFileURLs(true);
    }
    • Je ne trouve pas cette aide de l'API de 12 à exécuter sur JellyBean... comment avez-vous fait ce travail sur la pré-Jelly à l'aide de pré Jelly API? Merci.
    • Dans mon cas: stackoverflow.com/questions/8390985/...
    • Il fonctionne parfaitement. J'étais seul s.setAllowUniversalAccessFromFileUrls(vrai), et il fonctionne jusqu'à ce que Android 5.1. J'ai été prise en démocratie. Cette s.setAllowFileAccessFromFileURLs(vrai) sauvé ma vie! Merci
    InformationsquelleAutor Gabriel Sanmartin
  2. 0

    Éviter d'utiliser WebView.pauseTimers().

    Ou essayer WebView.resumeTimers() lorsque l'Activité qui contient la WebView appels onResume().

    • merci mais le problème était différent
    InformationsquelleAutor haitong
  3. 0

    Un grand merci à Gabriel Sanmartin. J'ai eu une situation similaire, mais j'ai été en utilisant la régulière jQuery, pas de mobile, et en appelant le .fonction load() pour charger un local partielle fichier html dans un div, comme suit:

    var divNew = document.createElement('div');
var $divNew = $(divNew);
var sFilePath = sSubfolder + '/' + 'Index.html';
$divNew.load(sFilePath, function (response, status, xhr) {
    if (status == "error") {

    }
});

    J'ai passé presque une demi-journée en passant par & débogage du code JS jusqu'à ce que je suis venu sur ce fil. À la recherche de ces deux paramètres a été fantastique. Il a fait toute la différence. Mon code C# est ci-dessous:

    if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)
{
      wbView.Settings.AllowUniversalAccessFromFileURLs = true;
      wbView.Settings.AllowFileAccessFromFileURLs = true;
}

    Fyi:
    Android.OS.BuildVersionCodes.JellyBean a été recommandé comme Android.OS.Construire.VERSION_CODES.JellyBean est obsolète et sera supprimée dans une future version.

    InformationsquelleAutor ncruz