[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开发】电子罗盘

    罗盘,估计也不用我过多介绍,学过初中物理的都知道,不管是指南针,还是指北针,其本质就是用来辨别方向的. 操作电子罗盘伟感器也不复杂,主要就是两个角度: 1.当前方向与磁北的夹角: 2.当前方向与地北的 ...

  2. 手动为php安装memcached扩展模块

    最近公司需要新部署几台服务器,主要就是lnmp平台,这几台服务器需要部署公司的系统,由于本屌刚入职时间不长,加上又是新手,所以对公司的架构一头雾水,前前后后折腾了一个月时间,终于磕磕绊绊的将系统服务器 ...

  3. photoshop学习目录

    前面的话 前端工程师最基本的工作是切图.photoshop用的6不6,对于工作效率有很大的影响.小火柴将前端工程师需要掌握的photoshop的知识和技能进行了梳理和归纳,总结成以下目录 目录 前端工 ...

  4. 关于有默认值的字段在用EF做插入操作时的思考

    今天在用EF做插入操作的时候发现数据库中一个datetime类型的字段(CreateDate)的值居然全部为null.于是赶紧看表结构发现CreateDate字段居然是允许为空的. 虽然为空,但是设置 ...

  5. [OpenCV] Samples 11: image sequence

    一帧一帧地读取视频流. VideoCapture sequence(file_video); sequence >> image. #include <opencv2/core/co ...

  6. [转载]PhotoShop性能优化

    现在随着Photoshop版本越来越高功能也越来越强大,而往往强大的功能需要电脑有好的配置运行,比如HDR.图像合成或者3D和视频等类似的功能,还有处理比较大尺寸的图像时,如果电脑配置不够强往往非常卡 ...

  7. JS兼容所有浏览器的一段加入收藏代码，设置为首页

    <script language="javascript" type="text/javascript"> function addfavorite ...

  8. java类加载器-Tomcat类加载器

    在上文中,已经介绍了系统类加载器以及类加载器的相关机制,还自定制类加载器的方式.接下来就以tomcat6为例看看tomat是如何使用自定制类加载器的.(本介绍是基于tomcat6.0.41,不同版本可 ...

  9. Windows Azure HandBook (9) Azure性能测试(2)

    <Windows Azure Platform 系列文章目录> 在上一节中,笔者介绍了我们在Azure性能测试之前,首先需要提交<渗透性测试表> Windows Azure H ...

  10. [New Portal]Windows Azure Virtual Machine (12) 在本地使用Hyper-V制作虚拟机模板，并上传至Azure (2)

    <Windows Azure Platform 系列文章目录> 本章介绍的内容是将本地Hyper-V的VHD,上传到Azure数据中心,作为自定义的虚拟机模板. 注意:因为在制作VHD的最 ...