[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. 优化与扩展Mybatis的SqlMapper解析

    接上一篇博文,这一篇来讲述怎么实现SchemaSqlMapperParserDelegate——解析SqlMapper配置文件. 要想实现SqlMapper文件的解析,还需要仔细分析一下mybatis ...

  2. 解析大型.NET ERP系统 窗体、查询、报表二次开发

    详细介绍Enterprise Solution 二次开发的流程步骤,主要包括数据输入窗体(Entry Form),查询(Query/Enquiry),报表(Report)三个重要的二次开发项目. 数据 ...

  3. SQL Server 2012 T-SQL 新特性

    序列 Sequence SQL Server 现在将序列当成一个对象来实现,创建一个序列的例子语法如下: CREATE SEQUENCE DemoSequence START WITH 1 INCRE ...

  4. Netty中的坑(下篇)

    其实这篇应该叫Netty实践,但是为了与前一篇名字保持一致,所以还是用一下坑这个名字吧. Netty是高性能Java NIO网络框架,在很多开源系统里都有她的身影,而在绝大多数互联网公司所实施的服务化 ...

  5. Android Junit测试框架

    对应用进行单元测试: 使用Junit测试框架,是正规Android开发的必用技术.在Junit中可以得到组件,可以模拟发送事件和检测程序处理的正确性. 1.配置指令集和函数库: (1)配置指令集,指定 ...

  6. Furatto – 轻量，友好的响应式前端开发框架

    Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...

  7. Windows Azure Web Site (16) Azure Web Site HTTPS

    <Windows Azure Platform 系列文章目录> 我们在使用微软云Azure Web App的时候,会使用微软的二级域名:http://xxx.chinacloudsites ...

  8. Windows Azure Active Directory (2) Windows Azure AD基础

    <Windows Azure Platform 系列文章目录> Windows Azure AD (WAAD)是Windows Azure提供的一个REST风格的服务,为您的云服务提供了身 ...

  9. 索引深入浅出(3/10)：聚集索引的B树结构

    在SQL Server里,有2种表是以存储为基础的.有聚集索引的表叫聚集表,没有聚集索引的表叫堆表.在上一篇文章,我们讨论了堆表的特性和存储结构.在这篇文章里,我们来看下聚集表. 有聚集索引的表叫聚集 ...

  10. 功能齐全并且比较时髦的Jquery通用开源框架之【ejq.js】

    简介 ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎语法和angularjs相近减少学习成本 2 ...