javascript - Text field display bug in cordova -
something's wrong display of app when tried build in cordova. here's code:
<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> when built it, text field displayed ended displaying this: http://imgur.com/reoa9vk
i hope can me out on one, thanks!
i put code in fresh cordova application (cli version 5.1.1; visual studio 2015) , got security errors in output console, because referencing http://code.jquery.com. anyway provided screenshot looks like, styles loaded somehow, giving strange results. in case got folowing errors in javascript console in visual studio:
refused load stylesheet 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css' because violates following content security policy directive: "style-src 'self' 'unsafe-inline'". index.html (15,0) refused load script 'http://code.jquery.com/jquery-1.11.1.min.js' because violates following content security policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". note 'script-src' not explicitly set, 'default-src' used fallback. index.html (0,0) refused load script 'http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js' because violates following content security policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". note 'script-src' not explicitly set, 'default-src' used fallback. index.html (0,0) to avoid these errors, changed meta tag content-security-policy , added 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 *"> with these changes looks fine in ripple:
the above solution won't work directly on platforms ios, windows 8.1/10 , android because of security policies.
there 2 solutions think:
- i recommend download scripts , style sheets , access them localy under www folder.
- another way allow access external resources. need whitelist plugin: https://github.com/apache/cordova-plugin-whitelist ... , have edit config.xml under common->domain access->uri , add http://code.jquery.com
this produce xml entry in file:
<!-- allow images, xhrs, etc. http://code.jquery.com --> <access origin="http://code.jquery.com" /> after looks fine under windows 10 example: 
hope helps!
Comments
Post a Comment