Android Cordova 开发 - Cordova 解读初始化项目（index.html meta、Cordova.js、config.xml）

于 2025-04-23 18:21:28 发布
阅读量1.2k 收藏 13
点赞数 26
分类专栏： Android - 简化库编程 文章标签： android html javascript 安卓 android-studio android studio 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52173250/article/details/147460551
版权

一、index.html meta

1、Content-Security-Policy
（1）基本介绍
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

  • 网页安全策略（CSP）的实质就是白名单，开发者明确告诉客户端，哪些外部资源可以加载和执行，哪些不可以

  • CSP 的主要目的是减少和报告 XSS 攻击，大大增加网页的安全性，攻击者即使发现了漏洞，也没法注入脚本

  • 有两种方法可以启动 CSP

  1. 通过 HTTP 头信息的 Content-Security-Policy 字段

  2. 通过网页的 meta 标签

（2）参数
参数名说明
default-src限制全局
script-src限制外部脚本
style-src限制样式表
img-src限制图像
media-src限制媒体文件（音视频）
font-src限制字体文件
object-src限制插件（如 Flash）
child-src限制框架
frame-ancestors限制嵌入的外部资源（如 frame、iframe、embed、applet 标签）
connect-src限制 HTTP 连接（通过 XHR、WebSockets、EventSource 等）
worker-src限制 worker 脚本
manifest-src限制 manifest 文件
参数值示例说明
*img-src *允许任意地址的 URL，但不包括 blob、filesystem、schemes
‘none’object-src ‘none’所有地址的资源都不允许加载
‘self’script-src ‘self’同源策略，即允许同域名同端口下，同协议下的请求
data:img-src ‘self’ data:允许通过 data 来请求资源（如用 Base64 编码过的图片）
domain.example.comimg-src domain.example.com允许特定的域名请求资源
*.example.comimg-src *.example.com允许从 example.com 下的任意子域名加载资源
https://cdn.comimg-src https://cdn.com仅仅允许通过 HTTPS 协议来从指定域名下加载资源
https:img-src https:只允许通过 HTTPS 协议加载资源
‘unsafe-inline’script-src ‘unsafe-inline’允许行内代码执行
‘unsafe-eval’script-src ‘unsafe-eval’允许不安全的动态代码执行（如 JavaScript 的 eval 方法）
mediastream:media-src mediastream:允许媒体流 URI 作为内容来源
  • 注：多个选项值也可以并列，使用空格隔开
（3）实例
  • 这里举例引入 twitter-bootstrap 样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">

        <!-- 注意的 style-src -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline' cdn.bootcdn.net; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">

        <!-- 引入 twitter-bootstrap 样式-->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Hello World</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>

                <!-- 使用 twitter-bootstrap 样式定义一个按钮-->
                <Button class="btn btn-success">成功样式的按钮</Button>
            </div>
        </div>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>
  • 注：如果同时设置某个单项设置（如 style-src）和 default-src，前者会覆盖后者，即样式表会采用 style-src 的值，其他资源则依然采用 default-src 的值
2、format-detection
（1）基本介绍
<meta name="format-detection" content="telephone=no">
  • 格式检测
（2）参数
参数说明
telephone设置是否自动将数字转换为拨号链接
telephone=no：禁止把数字转化为拨号链接
telephone=yes：允许把数字转化为拨号链接，默认开启
email告诉设备不识别邮箱，点击之后不自动发送
email=no：禁止作为邮箱地址
email=yes：把文字默认为邮箱地址，默认开启
adressadress=no：禁止跳转至地图
adress=yes：开启点击地址直接跳转至地图的功能，默认开启
3、msapplication-tap-highlight
（1）基本介绍
<meta name="msapplication-tap-highlight" content="no">
  • Windows 上的触碰高亮
4、viewport
（1）基本介绍
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
  • 视口，是用户网页的可视区域
设备浏览器默认视口大小
iPhone980
iPad980
Android Samsung980
Android HTC980
Chrome980
Opera Presto980
BlackBerry1024
IE1024
（2）参数
参数说明
initial-scale初始缩放比例，即当页面第一次加载时的缩放比例
width控制视口大小，一般为了自适应设置为 device-width（设备宽度）
maximum-scale允许最大的缩放程度，是一个浮点值
minimum-scale允许最小的缩放程度，是一个浮点值
user-scalable是否允许用户进行缩放，值为 yes 或 no
viewport-fit=cover解决 iPhoneX tabbar 底部遮挡问题（使页面充满整个屏幕）
5、color-scheme
（1）基本介绍
<meta name="color-scheme" content="light dark">
  • 使网页支持多种模式（高亮模式、暗黑模式），当用户的系统主题更改后，网页演示随之更改
（2）源码解析
  • index.css，针对不同模式，可以写不同样式
body {
    
    /* 默认高亮模式 */
    background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
}

@media screen and (prefers-color-scheme: dark) {
    body {
        background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
    }
}

二、Cordova.js

<script src="cordova.js"></script>

  • 在【项目目录】/www/index.html 中引入的 cordova.js 不是在当前目录下的，而是在构建之后的目录下的

  • 以 Browser 平台为例，观察 【项目目录】/platform/browser/www 目录，该目录中有 cordova.js

  • 注：不同平台下的 cordova.js 不同

三、config.xml

  • 项目目录下的 config.xml 是 Cordova 项目的主配置文件

  • 进行项目构建后，该文件会被复制到对应平台的子目录下

平台对应 config.xml
Androidapp/platform/android/res/xml/config.xml
iOSapp/platform/ios/AppName/config.xml
Browserapp/platform/browser/config.xml
Android:Cordova,JavaScript操作设备功能
偶是不器的博客
02-11 1457
Android:Cordova使用实例，Cordova自定义插件
cordova跨平台移动应用开发——环境安装-2024年cordova新版
晓夏IT笔记
03-18 1万+
Apache Cordova是Apache基金会支持的一套开源移动APP的开发工具，其前身是phonegap。phonegap被收购后，开发者将其核心代码部分捐给Apache，并取名Cordova。它允许移动APP开发者使用HTML+CSS+JavaScript来访问本地设备的功能，“one code base"完成多终端平台的移动应用开发。
android cordova 教程,cordova入门教程（一）
weixin_39623671的博客
06-03 274
安装cordova cli1、下载安装node.js(js的运行环境)，安装时勾选npm(js包的管理工具)。2、下载安装git(配置好环境变量)。3、使用npm安装cordova。在os或Linux上$sudonpminstall-gcordova在Windows上C:\>npminstall-gcordova创建App创建cordova项目$cordovacreate...
Android项目里集成Cordova详解
leverage2009的博客
12-27 645
转自：http://blog.csdn.net/u013491677/article/details/51985390 五、AS环境下将CordovaLib作为依赖导入 1. 将CordovaLib作为module导入 2. 添加依赖 六、自定义插件 1.自定义你的java类 1.1 包名，等下会用到 1.2 继承的父类 1.3 重写的方法 1.4 传递的参数 1.5
Content Security Policy
weixin_41584401的博客
02-26 1194
今天做手机Apace Cordova遇到这样一个问题：刚开始看了吓一跳，这是什么鬼，然后，百度了一下，发现是这个网页为了防止其他跨域脚本攻击造成的。解决方案：就是把脚本放在外面即可。不要写在这个页面里。原因详细解剖：    &lt;meta http-equiv="content-security-policy" content="default-src 'self' data: gap: htt...
Windows创建Cordova插件实例
Butingnal的专栏
01-02 1518
Windows创建Cordova插件实例一、环境配置二、创建Cordova插件三、安装和测试Cordova插件四、其它扩充 一、环境配置 1.查看node版本 C:\Users\butin>node -v v10.16.0 2.安装nodejs 如果没有安装，去 https://nodejs.org/en/download/ 下载然后安装。 3.使用npm安装cordova C:\Users...
Cordova调用Android原生方法及界面
qq_26261267的博客
09-18 2604
1.安装Node.js 1.1从官网下载Node.js，下一步一键到底即可。 1.2有需要为Node.js配置淘宝网镜像的，可参考Node.js配置淘宝镜像 2.安装AndroidStudio与Jdk 2.1.从安卓开发者官网下载Studio 2.2从甲骨文官网下载jdk8或更高 2.3Studio与jdk的环境变量请自行百度。 3.正文： 3.1安装cordova使用node.js的npm工具。打开控制台输入 npm install -g cordova 3.2安装plugman，cordova需要用p
MAC OS 配置Sencha Touch +Cordova 开发环境
06-13
然后，编辑 Cordova 项目的 `config.xml` 文件，添加 Sencha Touch 的 CSS 和 JavaScript 引入： ```xml <widget id="com.example.myapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets"> ... ...
cordova_hello_world：Cordova项目
02-10
2. 初始化项目：使用`cordova create`命令创建一个新的项目，例如`cordova create cordova_hello_world com.example.helloworld HelloWorld`，这将在当前目录下创建一个名为“cordova_hello_world”的项目，其ID为...
Android最全Android 6，2024中级Android开发面试解答
2401_84558467的博客
05-08 940
对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，最后，我再重复一次，。。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。为了大家能够顺利进阶中高级、架构师，我特地为大家准备了，保证你学了以后保证薪资上升一个台阶。1.需要用户手动赋予的权限（ Dangerous Permissions）| 所属权限组 | 权限 || — | — |
解决cordova插件出现No Content-Security-Policy meta tag found错误
最新发布
灵壹Eli的博客
09-29 267
解决cordova插件出现No Content-Security-Policy meta tag found错误
Content Security Policy介绍
qdujunjie的专栏
03-03 1641
转自：http://www.2cto.com/Article/201307/230739.html 本文介绍的是W3C的Content Security Policy，简称CSP。顾名思义，这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少XSS的发生。 Chrome扩展已经引入了CSP，通过manifest.json中的content_secur
androidcordova混合开发以及cordova自定义插件
cangahi09025566的博客
11-05 1768
请注明出处:http://blog.csdn.net/qq_23179075/article/details/77104276 Android+Cordova混合开发以及Cordova自定义插件 AndroidCordova混合开发以及Cordova自定义插件 美女镇楼 一AndroidStudio中集成Cordova项目 创建Co...
meta标签添加Content-Security-Policy
weixin_43940592的博客
03-04 3085
const head = document.getElementsByTagName('head'); const meta = document.createElement('meta'); meta.httpEquiv = 'Content-Security-Policy'; meta.content = 'upgrade-insecure-requests'; head[0].appendChild(meta);
Android使用Cordova系列详解-android项目集成Cordova模块
Scott_S的博客
09-17 6043
转载请表明出处：http://write.blog.csdn.net/postedit/23692439 为什么使用Cordova 在客户端app开发的过程中,许多变动的业务需要前端来处理,随着业务的不断变动,前端和客户端需要支持复杂的交互来满足业务的增长.如今大部分的app都有自己的前端和客户端交互框架,大公司都会自己开发搭建JSBridge来满足,也有一些开源的框架如Weex,Cord...
cordova No Content-Security-Policy meta tag found
michael的博客
05-11 3789
"No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.", source: file:///android_asset/www/plugins/cordova-plugin-whitelist/whitelist.js
cordova6.0.0开发过程中遇到的难题
不破小子
04-19 2127
1.谷歌浏览器报错：“No Content-Security-Plolicy meta tag found.please add one when using the cordova-plugin-whitelist plugin” 添加上这个标签 http-equiv="Content-Security-Policy" content="default-src *; style-src
cordova错误之： Refused to connect to XXX -- because it violates the following Content Security Policy..
热门推荐
weixin_43343144的博客
04-11 2万+
Refused to connect to 'http://localhost:8545/' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值