Articles of JavaScript

在Android上强制使用正确的CSS3转换百分比解释

医生 在Android Chrome和默认浏览器中,获取以下链接中显示的机制以performanceGPU加速。 更新2 (2014-01-13 13:25:30Z):根据下面的bref.it的评论,报告的行为是固定的Android 4.4 KitKat – 但我下面描述的修复现在打破了! 草地的法律。 UPDATE 1 (2012-11-01 17:54:09Z):马车行为是可以从变换matrix推导出来的,这是由变换元素的计算样式报告的,它返回一个像素值。 我会试着写一个Modernizrtesting来为任何可能的解决scheme铺平道路。 我已经开发了一个滑动容器的机制,以显示全宽,水平排列的子部分。 滑动标签,基本上。 因为有很多性能密集型的东西,所以精心制作的Javascript会继续下去,所以我希望将JS降到最低,并尽可能地在CSS中完成纯粹的风格。 我觉得我做得很好,考虑到 – JS只是改变了包装的一个属性: (左) http://jsfiddle.net/barney/VPJuq/ (移动设备可以附加/显示/这些小提琴URL自己看结果) 关于这是如何工作的一个词:将标签视为inline-block允许我指定white-space: nowrap (在最后几条规则中的其余代码基本上折叠了标签之间的空白),并允许它们水平堆叠没有清理/返回,一直保持其父母的全部宽度。 从那里,为包装设置一个负的左偏移量就是魔法。 很酷,嗯? 现在,我正在开发的接口是在本地移动应用程序中运行 – 应用程序的核心function依赖于尖端的移动专用技术(不要求 – NDA) – 通过UIWebView,唯一的目前支持该技术的平台是Android。 在这里,我的问题是双重的: transform: translate比left或margin-left过渡更加平滑( translate3d ),到一个真正真正可取的点,边界线至关重要 – 特别是在Android上,看起来是非翻译的在最新的操作系统的最新手机上,过渡仍然是冰冷的。 考虑到这一点,问题的症结在于Android在translate方面似乎以不同的方式推断盒子模型。 为了演示,这是一个基于transform的版本,它和前一个小提琴完全一样,并且支持所有支持translate3d的浏览器。 (带翻译) http://jsfiddle.net/barney/EJ7ve 如果您在iPhone上检查(再次通过追加/show ),您会注意到iPhone上的帧速率有所改善。 对于在Android上运行的Firefox也是如此,可以说Chrome和Android上的默认浏览器也是如此,除了这里的-100%的translateX偏移量指的是所有三个标签所占用的空间,所以包装滑动就足够了没有任何选项卡可见。 这很奇怪,因为转换百分比被指定为与正被转换的元素的全框模型相关 – 并且计算样式明确地将包装宽度描述为与其父项相同(不是如结果所暗示的那样,被拉伸3倍容纳标签)。 我们可以形容这是一个错误? […]

WebView Javascript从本地HTML文件跨域

我加载一个本地html文件(从资产文件夹)到应用程序WebView。 在HTML中,我运行了一个jQuery.getJSON(url)。 该url是一个远程服务器。 这个动作失败了,我猜是因为一个不同的起源问题(跨域)。 我在chrome上运行相同的文件,在那里特别说明了这一点。 有没有办法让Android中的WebView从本地加载的HTML文件中的远程服务器加载数据?

在Android上使用Chrome获取物理屏幕尺寸/ dpi /像素密度

题 有没有一种安全的方式来获得实际正确的屏幕物理尺寸在Chrome上,在Android上? 如果有必要的话,Chrome和Android的旧版本可能会被排除在范围之外。 之前的研究 关于从javascript(或css)中获取设备的实际物理屏幕尺寸的stackoverflow有许多死胡同的问题。 似乎html api标准化和实际的浏览器实现之间没有收敛,更不用说浏览器实现依赖于OS api,而后者依靠硬件提供正确的信息。 顺便提一下,一些先前的答案是奥秘(2011年等)在假设当时盛行的某个像素密度,因此是无用的。 其他与webkit有关,但Chrome浏览器在Chrome(?)中眨眼取代了Webkit。 我想通过在Android上仅限于Chrome来探索简单解决scheme的存在。 注意 这是关于浏览器内部的javascript(或css)解决scheme,而不是本地应用程序的解决scheme。

Cordova – 拒绝执行内联事件处理程序,因为它违反了以下内容安全策略

我正在为cordova应用程序开发进行培训,并解决了内容安全策略方面的问题。 我的应用程序正在运行与Android模拟器,但是当我必须执行一个JavaScript我在NetBeans(输出窗口)中收到消息。 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://ssl.gstatic.com". (22:35:56:126 | error, security) at www/index.html:58 我的代码如下。 这是我的index.html。 我试图理解CSP是如何工作的,我想我理解这个概念,但在这种情况下,我不明白这个问题。 第58行是评论。 <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' * data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self'; script-src 'self' https://ssl.gstatic.com; media-src *"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta […]

socket.io – ReferenceError:io没有定义

我正在编写Android 2.3.5(也将与iOS兼容)的应用程序。 我希望将数据从应用程序的HTML / Javascript传输到服务器上的Python程序(使用Twisted引擎检索数据)。 我已经尝试了很多东西,看了各种论坛,答案,教程和网页 – 包括这里的大多数 – 并且找不到答案。 以下是我的index.html文件中的相关Javascript: <script src="socket-lib/socket.io.js"></script> <script type="text/javascript" charset="utf-8"> function sendData() { try { var socket = io.connect('http://mywebsite.com:12345'); socket.on('connect', function(data) { socket.send('Hello.'); socket.on('message', function (msg) { socket.send('This is where I send data?'); }); }); } catch(err) { alert('ERROR: socket.io encountered a problem:\n\n' + err); } } // end […]

在Android网页上禁用缩放input焦点

这里是困境,我有一个网页(仅适用于Android设备),并在该页面中有一个input框(一个文本框专门),当它获得焦点的浏览器放大。我不希望它放大 – 声音容易,对吗? 这里是它获得乐趣的地方:我必须能够放大一般,所以不要说 <meta name='viewport' content='user-scalable=0'> 这对我不起作用。 此外,input框不会收到点击事件。 它出现时另一个button被点击获取焦点编程。 以下是我所尝试过的,迄今为止失败了: jQuery('head meta[name=viewport]').remove(); jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />'); jQuery("#locationLock input").focus(); jQuery('head meta[name=viewport]').remove(); jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />'); 这也失败了: <input type='text' onfocus="return false"> 和这个: jQuery("#locationLock input").focus(function(e){e.preventDefault();}); 有任何想法吗?

Android Web-View:将本地Javascript文件注入到远程网页

之前已经问过很多次了,我浏览过所有东西,还没有明确的答案。 问题简化:是否可以注入本地JavaScript文件(从资产或存储)到Android Web-View加载的远程网页? 我知道可以将这样的文件注入到Web视图中加载的本地网页(Assets HTML)中。 为什么我需要这个工作? :通过避免每次下载较大的文件(如Js和CSS文件)来加快浏览体验。 我想避免Web-Viewcaching。

Android的WebView的Javascript getSelection

我有一些麻烦从Android中的WebView的select。 我可以让WebView进入select模式。 我甚至可以把它复制到剪贴板的文本。 但是我真正想要做的是永久地突出select。 所以这个想法是把WebView放在select模式下。 让用户select文本,然后触发某些内容以突出显示该文本。 我可以通过从剪贴板中获取选定的文本,然后在Javascript中search并突出显示它。 当用户select一个真正的常用词时就会出现问题。 我必须要么突出全部或以某种方式找出select是哪里得到正确的。 我试过这个在iPhone上运行的JavaScript。 Bu getSelection()似乎不适用于Android。 function highlight(colour) { var range, sel; if (window.getSelection) { // Non-IE case sel = window.getSelection(); if (sel.getRangeAt) { range = sel.getRangeAt(0); } document.designMode = "on"; if (range) { sel.removeAllRanges(); sel.addRange(range); } // Use HiliteColor since some browsers apply BackColor to the whole block […]

JavaScript警报在Android WebView中不起作用

在我的应用程序中,我正在使用WebView并使用JavaScript alert( )方法,但它不工作,没有popup窗口。 在我的清单文件中,我已经添加了 <uses-permission android:name="android.permission.INTERNET"></uses-permission> 并在我已经添加的活动文件 mWebView = (WebView) findViewById(R.id.webview); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.loadUrl("file:///android_asset/demo.html"); 在我已经添加的布局xml文件中 <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 任何线索如何在WebView启用完整的JavaScript ? 更新 谢谢马克 在html文件中的alert()方法正在工作:)。 现在在WebView有两个问题: 1:我在使用WebView加载的html文件中使用<textarea> ,并尝试使用印地语语言编写字体,但是当我尝试编写印地文文本时,它显示为符号(矩形符号,如[]) 。 当我在桌面上的Firefox浏览器中做同样的工作正常。 任何线索如何在WebView textarea中支持多语言? 2:当我单击提交并尝试打开另一个Java脚本中的alert()方法中的文本的值时,它不起作用,这是否意味着即使使用WebChromeClient后, WebChromeClient适用于当前加载的HTML页面,而不是从那个页面?

确定并绑定点击或“触摸”事件

我使用下面的代码来绑定“click”或“touchstart”事件(使用jQuery的on(eventType, function() { … }) )。 var what = (navigator.userAgent.match(/iPad/i)) ? 'touchstart' : 'click'; 稍后的: $foo.on(what, function() { … }); …这对iPad和“其他”非常有用,但是我担心上面的代码有“iPad隧道愿景”… 我的问题: 所有其他设备(例如Android平板电脑)是否也有类似的命名为“touchstart”事件? 如果是这样,我怎样才能改善上述代码,以便我可以说明这些事件types? 换句话说,我怎么能在上面的代码(不仅仅是iPad)中考虑更多的触摸设备呢? 编辑#1 你们有什么想法: var foo = ('ontouchstart' in window) ? 'touchstart' : ((window.DocumentTouch && document instanceof DocumentTouch) ? 'tap' : 'click'); 注意:以上大部分逻辑来自Modernizr这里 。 以上似乎适用于Firefox / iPad …我目前没有其他testing。 我喜欢上面的是我不是UA嗅探。 🙂 是否tap所有其他触摸设备的默认设置? 编辑#2 […]