离子 - 没有互联网连接互联网、离子

2023-09-07 17:44:13 作者：时光偷走初心

我们正在建设使用离子（+科尔多瓦）一个Android应用程序。

在我的浏览器的所有作品，但是当我建立并运行的apk文件出现这种情况：

外部图像不会出现，内嵌谷歌地图仍然是空的。下面code在我们的index.html：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
    ＆LT;元字符集=utf-8＆GT;
    ＆LT; META NAME =视CONTENT =初始规模= 1，最大规模= 1，用户可扩展=没有，宽=设备宽度＆GT;
    ＆LT;冠军＆GT;＆LT; /标题＆GT;
    ＆LT;链接HREF =LIB /离子/ CSS / ionic.css相对=样式＆GT;
    ＆LT;链接HREF =CSS / style.css的相对=样式＆GT;

    ＆LT;！ - 如果使用萨斯（运行一饮而尽SASS第一），取消注释下面然后，取下CSS包括上述
    ＆LT;链接HREF =CSS / ionic.app.css相对=样式＆GT;
     - ＆GT;

    ＆LT;！ - 离子/ angularjs JS  - ＆GT;
    ＆LT;脚本SRC =LIB /离子/ JS / ionic.bundle.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / NG-cordova.min.js＆GT;＆LT; / SCRIPT＆GT;

    ＆所述;！ - 科尔多瓦脚本（这将是一个404发育过程中） - ＆GT;
    ＆所述;脚本的src =cordova.js＆GT;＆所述; /脚本＆GT;

    ＆LT;！ - 您的应用程序的JS  - ＆GT;
    ＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体NG-应用程序=启动器＆GT;

    ＆LT;离子面板＆GT;
          ＆LT;离子头杆类=扎稳＆GT;

          ＆LT; /离子头吧＆GT;
          ＆LT;离子含量＆GT;
            ＆LT; DIV CLASS =主的角色=主＆GT;

                ＆其中，P的id =地理位置＆GT;查找地理位置...＆所述; / P＆GT;
                ＆LT; IMG SRC =http://placehold.it/350x150.pngALT =无图像/＆GT;

                ＆LT; IFRAME src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" WIDTH =600HEIGHT =450FRAMEBORDER =0的风格=边界：0＆GT;＆LT; / IFRAME＆GT;
            ＆LT; / DIV＆GT;
          ＆LT; /离子含量＆GT;
    ＆LT; /离子面板＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

在config.xml中，我们已经创建了以下行刚结束的结束标记：

 ＆LT;允许导航HREF =*/＆GT;
＆所述;允许意图的href =*/＆GT;

解决方案

检查清单，让您的应用程序使用互联网。

 ＆LT;使用-权限的Android：名称=android.permission.INTERNET对/＆GT;

如果您使用的是科尔多瓦5（Android平台的版本4.0.0），那么你应该包括白名单的插件，也是新的 meta标签的内容安全策略，以允许谷歌地图API来加载像这样（在你的HTML文件的顶端，其余的meta标签）：

 ＆LT; META HTTP-当量=内容安全性政策的内容=默认-SRC *;
 风格-SRC'自我''不安全的内联'http://fonts.googleapis.com/;
脚本的src'自我''不安全的内联'不安全-EVALHTTP：//*.googleapis.com
 http://maps.gstatic.com;＆GT;

编辑：还要检查你的config.xml你给什么样的访问：

 ＆LT;获得原产地=*/＆GT;

例如，允许所有连接

如果它不能正常工作，请检查您的日志和张贴任何错误。

We are building a android application using Ionic (+Cordova).

It all works in my browser, but when I build it and run the .apk this happens:

External images won't appear, and embeded google maps remain empty. The following code at our index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">

    <ion-pane>
          <ion-header-bar class="bar-stable">

          </ion-header-bar>
          <ion-content>
            <div class="main" role="main">

                <p id="geolocation">Finding geolocation...</p>
                <img src="http://placehold.it/350x150.png" alt="no image" />

                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div>
          </ion-content>
    </ion-pane>
</body>
</html>

In the config.xml we've created the following lines just after the closing tag of :

<allow-navigation href="*" />
<allow-intent href="*" />

解决方案

Check your manifest to allow your app to use internet.

<uses-permission android:name="android.permission.INTERNET" />

If you are using cordova 5 (Android platform version 4.0.0) then you should include the whitelist plugin and also the new content security policy meta tag to allow google maps api to load like this (on the top of your html file along with the rest meta tags):

<meta http-equiv="Content-Security-Policy" content="default-src *;
 style-src 'self' 'unsafe-inline' http://fonts.googleapis.com/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.googleapis.com
 http://maps.gstatic.com;">

EDIT: Check also your config.xml what access you give: