javascript - cordova中的文本字段显示错误

标签 javascript android css cordova meta

当我尝试在 cordova 中构建我的应用程序时,它的显示出现问题。这是代码:

    <html>
    <head>
        <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 *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <title>Swaggity swag swag</title>
    </head>
    <body>

        <form action="res/link2.html">
            <input type="text" placeholder="Name" name="name">
            <input type="text" placeholder="Text" name="comment">
            <button type="submit">Leggo!</button>
        </form>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

当我构建它时,显示的文本字段最终显示如下: http://imgur.com/ReOa9vk

希望你能帮我解决这个问题,谢谢!

最佳答案

我将您的代码放入一个新的 cordova 应用程序(CLI 版本 5.1.1;Visual Studio 2015)中,并在输出控制台中出现一些安全错误,因为您正在引用 http://code.jquery.com .无论如何,您提供的屏幕截图看起来像,样式以某种方式加载,但给出了奇怪的结果。 就我而言,我在 Visual Studio 的 JavaScript 控制台中遇到以下错误:

Refused to load the stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

index.html (15,0)
Refused to load the script 'http://code.jquery.com/jquery-1.11.1.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

index.html (0,0)
Refused to load the script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

index.html (0,0)

为了避免这些错误,我更改了 Content-Security-Policy 的元标记并添加了 http://code.jquery.com :

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com http://code.jquery.com; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *">

有了这些变化,一切看起来都很好:

Code in ripple

由于安全策略,上述解决方案不能直接在 iOS、Windows 8.1/10 和 Android 平台上运行。

我认为有两种解决方案:

  1. 我建议下载脚本和样式表并在 www 文件夹下本地访问它们。
  2. 另一种方法是允许访问外部资源。为此,您需要白名单插件: https://github.com/apache/cordova-plugin-whitelist ...并且您必须在 Common->Domain Access->URI 下编辑 config.xml 并添加 http://code.jquery.com

这将在此文件中生成一个 XML 条目:

<!-- Allow images, xhrs, etc. to http://code.jquery.com -->
<access origin="http://code.jquery.com" />

之后在 Windows 10 下一切看起来都很好,例如: Windows 10 screenshot

希望对您有所帮助!

关于javascript - cordova中的文本字段显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32036451/

相关文章:

HTML、CSS 悬停背景过渡

javascript - 悬停时打开的 Bootstrap 下拉菜单

javascript - 结合 ('click' ) 和 $(this)

java - android 共享可点击的字符串 url 与指示谷歌地图

css - 在响应网格中添加额外边距

javascript - 在尺寸有限的 <div> 中附加内容

javascript - 动态选择框的选择更新功能

javascript - JQuery - 我如何获得 “file.JS” 的变量

android - 自定义对话框需要时间才能显示

java - endAllStagingAnimators 说明