[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视窗的更多相关文章

  1. Swift显示alert和promp confirmation

    Swift 显示alert func Alert(title:String, msg:String)->Void{ let alert = UIAlertController(title: ti ...

  2. Cordova 3.0 + Eclipse 开发流程

    cd d:\cordova\projectscordova create HelloWorld com.example.helloworld HelloWorldcd HelloWorldcordov ...

  3. Appium环境搭建+cordova

    1.安装JDK 配置JAVA_HOME(变量值为jdk的安装目录)以及Path path值如下: 验证是否生效 2.安装node.js 选择适合自己的版本官网直接下载https://nodejs.or ...

  4. Cordova - 使用Cordova开发iOS应用实战1（配置、开发第一个应用）

    Cordova - 使用Cordova开发iOS应用实战1(配置.开发第一个应用) 现在比较流行使用 html5 开发移动应用,毕竟只要写一套html页面就可以适配各种移动设备,大大节省了跨平台应用的 ...

  5. Easyui弹出窗体在iframe的父级页面显示

    今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我 ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. Alert()与Redirect()同时使用失效的问题

    例如以下代码: echo "<script>alert('跳转到博客园');</script>"; redirect(“www.cnblogs.com”); ...

  8. windows下用cordova构建android app

    最近用到cordova打包apk,总结了下,写下来给大家分享. 一.前期准备工作: 1.安装node   6.2.0 *64 下载地址:链接:http://pan.baidu.com/s/1eS7Ts ...

  9. Cordova入门系列（一）创建项目 转发 https://www.cnblogs.com/lishuxue/p/6008678.html

    版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...

随机推荐

  1. 【WP 8.1开发】如何把自定义字体塞进应用里

    或许,系统自带的字体不足以体现应用程序的魅力,对于表现极强的汉字来说,更是如此.这时候,我们就会想,要是能把网上下载的艺术字体塞到应用包中,那岂不美哉?那么,这可以实现吗?答案是Yes的. 接下来,阿 ...

  2. struts2获取web元素(request、session、application)

    一.Action中获取 第一种方式: 通过ActionContext,这种方式取到的对象是Map类型 import java.util.Map; import com.opensymphony.xwo ...

  3. CSS裁剪clip

    × 目录 [1]定义 [2]RECT [3]应用 前面的话 CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了.本文将介绍关于clip属性的相关知识 定义 一个绝 ...

  4. Androd开发之广告栏设计

    对于做Android开发的工程师对于这个效果的实现一定不陌生,本篇我将带领大家先简单实现这个效果,再为大家介绍一下其中的原理,方便新手学习,老手复习,内容简单易懂,没有基础一样学习,不扯没用的了,下面 ...

  5. Android基于mAppWidget实现手绘地图（十一）–移动地图到某个坐标

    你可以使用以下几个方法: MapWidget.scrollMapTo(android.location.Location location); MapWidget.scrollMapTo(androi ...

  6. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  7. Apache+MySQL+PHP开发环境的搭建（二）

    通过自主选择相应的apache,mysql,php等软件,根据自己的应用开发需求进行安装.此方法搭建的环境自主性较强,搭建过程较为复杂,繁琐. 1.所需软件: Apache: http-2.2.22- ...

  8. SQLServer学习笔记系列5

    一.写在前面的话 转眼又是一年清明节,话说“清明时节雨纷纷”,武汉的天气伴随着这个清明节下了一场暴雨,整个城市如海一样,朋友圈渗透着清明节武汉看海的节奏.今年又没有回老家祭祖,但是心里依然是怀念着那些 ...

  9. Struts2 源码分析——核心机制

    MVC和三层的看法 通过上一章我们明白我们要学习的知识点和目标.所以这章我将从使用者来讲struts2的机制原理.我们都清楚的知道struts2的核心思想是MVC思想.MVC全名是Model View ...

  10. .NET平台下IIS7.5+无后缀名伪静态实现办法

    首先新建一个应用程序池,名称任意,比如:nettest,托管管道模式先暂时设置为集成模式,等下面的一系列设置完成之后再设置成经典模式: 部署好站点,并将此站点的应用程序池设置为nettest; 选中站 ...