[Cordova] 无法显示Alert视窗
[Cordova] 无法显示Alert视窗
问题情景
今天开了一个Cordova专案做范例，将预设的index.html页面修改为下列内容。按下执行却发现，这样一个简单的范例无法正常执行。点击页面上的Click Me按钮，没有办法显示Alert视窗。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<title>BlankCordovaApp1</title>
<script>
function test() {
alert("Clark")
}
</script>
</head>
<body>
<p>您好，您的应用程式已准备好!</p>
<button onclick="test()">Click Me</button>
</body>
</html>
解决方案
经过排查程式码后发现，在预设的状态下Cordova会为HTML加上「Content-Security-Policy」这个安全性设定，并且预设不启用内嵌JavaScript。 (其实预设页面的注解就有写了...)
预设页面注解
<!--
视需要在下方的中继标签中自订内容安全性原则。将'unsafe-inline' 加入default-src 以启用内嵌JavaScript。
如需详细资料，请参阅http://go.microsoft.com/fwlink/?LinkID=617521
-->
知道了问题之后，只需要将「'unsafe-inline'」加入Content-Security-Policy里的default-src区块，就可以让Alert视窗正常的执行并显示。
Before
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
After
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' ' unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *">
[Cordova] 无法显示Alert视窗的更多相关文章
- Swift显示alert和promp confirmation
Swift 显示alert func Alert(title:String, msg:String)->Void{ let alert = UIAlertController(title: ti ...
- Cordova 3.0 + Eclipse 开发流程
cd d:\cordova\projectscordova create HelloWorld com.example.helloworld HelloWorldcd HelloWorldcordov ...
- Appium环境搭建+cordova
1.安装JDK 配置JAVA_HOME(变量值为jdk的安装目录)以及Path path值如下: 验证是否生效 2.安装node.js 选择适合自己的版本官网直接下载https://nodejs.or ...
- Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）
Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的 ...
- Easyui弹出窗体在iframe的父级页面显示
今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- Alert()与Redirect()同时使用失效的问题
例如以下代码: echo "<script>alert('跳转到博客园');</script>"; redirect(“www.cnblogs.com”); ...
- windows下用cordova构建android app
最近用到cordova打包apk,总结了下,写下来给大家分享. 一.前期准备工作: 1.安装node 6.2.0 *64 下载地址:链接:http://pan.baidu.com/s/1eS7Ts ...
- Cordova入门系列（一）创建项目 转发 https://www.cnblogs.com/lishuxue/p/6008678.html
版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...
随机推荐
- Spring配置汇总
现在主流的JavaWeb应用几乎都会用到Spring,以下是Spring的配置,以及结合Web的SpringMVC配置的汇总. jar包的引入 与Web项目集成 Spring配置文件 SpringMV ...
- .NET面试题解析(05)-常量、字段、属性、特性与委托
系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 弱小和无知不是生存的障碍,傲慢才是!——<三体> 常见面试题目: 1. const和reado ...
- Win7搭建NodeJs开发环境以及HelloWorld展示—图解
Windows 7系统下搭建NodeJs开发环境(NodeJs+WebStrom)以及Hello World!展示,大体思路如下:第一步:安装NodeJs运行环境.第二步:安装WebStrom开发工具 ...
- [OpenCV] Samples 09: image
根据需求,转化为不同的颜色格式,split后处理各自通道. plImage <==> Mat 格式转换 Mat --> plImage 简单写法: IplImage copy = m ...
- Sybase 数据库bcp out备份重要表数据
bcp相当于逻辑备份,bcp out导出的文件,bcp in可以导回去. 环境:RHEL 5.5 + Sybase客户端软件 需求:在客户端(Linux)备份服务端(HP-UX)重要配置表数据 1.b ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- jQuery.Deferred 源码分析
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 1 引子 观察者模式是我们日常开发中经常用的模式.这个模式由两个主要部分组成:发布者和观察者.通过观察者模式, ...
- CentOS7 Tomcat安装
CentOS7 Tomcat安装 CentOS7 Tomcat安装 Download 从Tomcat下载apache-tomcat-8.0.18.tar.gz Install 安装 上传RPM文件到/ ...
- CentOS7 Java安装
CentOS7 Java安装 CentOS7 Java安装 Download 从Oracle下载jdk-8u31-linux-x64.rpm Install 御载 执行如下命令 java -versi ...
- JAVA 设计模式 模板方法模式
定义 模板方法模式 (Template Method) 定义了一个操作中的算法的骨架,而将部分步骤的实现在子类中完成. 模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模 ...