Articles of JavaScript

Android浏览器 – JavaScript window.innerWidth返回错误的值

我正在使用Android G1默认的网页浏览器,而且我正在使用JavaScript进行开发 – 当我放大或缩小网页时,无法获得真实的视觉宽度和高度。 看来,我正在从window.innerWidth,当我放大/缩小出错的值。 我想要做的是 – 在视觉固定的位置显示一个元素,即使在缩放和滚动页面时也是如此。 – 所以用户总是可以看到那个元素,不pipe他是在缩放还是在滚动。 我已经尝试使用“固定”的位置没有成功。 视口元标记的使用可能不是一个好的解决scheme,因为我不想限制网页的尺寸,我希望缩放function将被支持。 有没有人有一个解决scheme或想法如何我可以做到这一点?

当OS暂停时恢复Android的webview /在后台的应用程序上运行JavaScript?

首先closures我正在处理一个应用程序,当应用程序不在前台时需要运行JavaScript; 问题似乎是,当应用程序被放入后台/ webview从屏幕上分离时,webview的onPause方法被调用,每个文档执行以下操作:“暂停与此WebView及其关联的DOM相关的额外处理,插件,JavaScript等“ 从我迄今为止发现,我最好的select似乎是使用reflection来调用webview的“onResume”方法,它应该撤销所有这些进程暂停。 用我目前的实现,我得到了一个实例的方法,但是当调用什么都没有发生,因为我的后续JavaScript调用什么都不做(当我打开应用程序并在前台时,请注意,这是有效的)。 其他人看到我的代码问题或有一个解决scheme,当您的应用程序在后台运行JavaScript没有完全启动应用程序? 推送消息来说,JavaScript需要运行,所以意图发送通知在后台运行的服务: Intent intent = new Intent( "some action" ); intent.putExtra( "xtifyJson", xtifyJSON.toString() ); context.sendBroadcast( intent ); 在我的广播接收器的接收器中,居住在后台的服务总是在运行: final String stringArrayExtra = intent.getStringExtra( "xtifyJson" ); if ( !Text.isNull( stringArrayExtra ) ) { new Handler( context.getMainLooper() ).post( new Runnable() { @Override public void run() { try { Log.d( "Hey Dev Guy", […]

在Android 4.4 Webview中使用shadow-dom(Polymer)

实际上,我使用自定义的Polymer元素(基于Web组件和Shadow-dom)构build了一个Web应用程序,但是我遇到了一个严重的问题。 我希望这个应用能够在Android 4.4 WebView上运行,但是在WebView上testing应用时遇到了一些问题,尽pipe它在Chrome(Android和Desktop)上运行得非常好。 当我尝试从CSS(使用:: shadow或/ deep /)或从纯js访问一个shadowRoot元素时,会发生此问题。 这是我的问题的一个简单的例子: <!– custom-elt.html –> <link rel="import" href="../bower_components/polymer/polymer.html"> <polymer-element name="custom-elt"> <template> <div id="elt">some content</div> </template> <script> Polymer('custom-elt',{ getElt: function(){ return this.shadowRoot.getElementById('elt'); } }); </script> </polymer-element> // script.js window.addEventListener('polymer-ready',function(){ var e = document.getElementsByTagName('custom-elt')[0]; alert(e.getElt().innerHTML); }); 在Chrome上完美工作,但不在WebView中。 根据caniuse.com的说法,shadow-dom是由Android 4.4浏览器(它被WebView使用的)支持的,它带有'webkit'前缀( http://caniuse.com/#feat=shadowdom ),但是我没有'find一个使用前缀的方法。 任何解决scheme 谢谢 巴蒂斯特

语音识别API重复在Android上的短语

我发现, 语音识别API在我的Android上复制了结果短语(并且在桌面上不重复)。 对于每个短语说,它返回两个结果。 第一个是 第二个是 正如你看到的,在第二个返回中,短语是重复的,每个副本被标记为final而第二个则超出resultIndex 。 在第一个返回中只有一个副本,它是final ,它超出了resultIndex 。 我只会拿第二个回报,但问题是,它发生在移动的Chrome,但不会发生在桌面的Chrome 。 桌面版Chrome只返回第一个回报。 那么问题是:这是否是devise行为? 那么如何区分所有电脑的单个最终词组? 或者可能是这样的声音回声一些错误,那么问题是如何避免/检查回声? UPDATE Html如下: <input id="recbutton" type="button" value="Recognize"> <div id="output"> <div> Initial text </div> </div> 代码如下: var recognition = null; var recognitionStarted = false; var printcount = 1; var lastPhrase = null; $(function() { attachRecognition(); }); $('#recbutton').click( function() { if( !recognitionStarted […]

Android中的WebView文本缩放问题

我在android中有一个文档阅读器项目。 主要活动包括一个WebView。 文本是从HTML阅读。 在顶部选项菜单中包含一个dynamic增加文本大小的button(文本正在打包)。 到目前为止如此清楚,但按下button时,文本大小有所增加,但所有文本都在屏幕上向下移动,按下button两次,文本大小增加,所有文本再次向下移动。 这种情况真的让读者感到沮丧。 阅读器按下button后,必须返回到停止的位置,以免阅读器丢失阅读位置。 如何解决这个问题呢? 问题: 解决问题的时候: 我的WebView的Html内容: <!DOCTYPE html> <head> <style type="text/css"> p{} p.x1{} p.x2{} p.x3{} p.x4{} h2.x1{} h2.x2{} h2.x3{} h2.x4{} </style> </head> <body> //paragraph-1 <p class="x1">Title-1</p> <p class="x2">Title-2</p> <p class="x3">Title-3</p> <p class="x4">Title-4</p> <p>Text content.</p> //paragraph-2 <h class="x1">Title-1</p> <h class="x2">Title-2</p> <p>Text content.</p> //paragraph-3 <h class="x3">Title-1</p> <h class="x4">Title-2</p> <p class="x3">Title-3</p> <p>Text content.</p> […]

我可以使用socket-io服务工作吗?

我想推送通知到桌面和移动。 为此我遵循这篇文章: https : //developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl = zh_CN 我有两个问题: 可以使用推送通知在所有标签closures后发送通知(Chrome重新启动?) 我可以通过使用socket.io触发通知,例如io.on('message')而不是GCM ?

mediaelement.js自动播放在移动设备上不起作用

我正在使用mediaelement.js来显示video。 我正在使用这个代码: <body> <video id="player1" style="width: 100%; height: 100%;" preload="auto" autoplay="true" src="video.mp4" /> <script> $('video').mediaelementplayer({ features: ['playpause','progress','current','duration','tracks','volume','fullscreen'], }); var player = new MediaElementPlayer('player1'); player.play(); </script> </body> 当页面加载时,我想自动启动video。 这在桌面浏览器中工作正常,但是,在移动浏览器中,video不会自动播放。 我究竟做错了什么?

Firebug就像在Android上进行debugging一样

我曾经看过几篇文章,谈论Android上的JavaScript代码的远程debugging,但是他们都错过了我想要做的事情。 我有一个Nexus 7,我想远离我的桌面时使用它作为远程开发环境。 我创build了一个chrooted的debian发行版来运行apache,php和git(通过ssh)。 这个chroot环境从chroot环境外挂载/ sdcard目录的一个子目录。 虚拟主机的Apache文档根目录指向此目录中的一个目录。 在离开桌面之前,我可以把最新的版本推到平板电脑上。 当我回到git拉可以得到我已经做了什么。 然后,我(当离开家,而不是连接到任何networking)可以编辑代码使用Android编辑器(使用920文本编辑器),但然后运行浏览器来看看我已经开发使用本地主机的Apache虚拟主机挑选并显示它。 我正在开发的应用程序不是为了Android,它最终是桌面。 但是我想能够像在桌面上一样进行debugging。 断点和单步是主要的东西,但我也倾向于在编辑之前使用萤火虫中的html部分来调整我的CSS。 有没有办法让Chrome开发人员工具或firebug添加到Firefox将加载到将在Android中运行的浏览器?

内联VS包括JS和CSS?

在2G移动连接(〜0.1Mbps)至less有500毫秒延迟的环境中,在服务器的大约5-10个文件中向客户端发送大约10kb的css和js的最快和最有效的方式是什么? 我可以想到三个select: 将所有js合并到一个文件,将所有css合并到一个文件 将所有的css和js文件一一链接 内联一切 我知道谷歌使用内联,但这可能只是为了节省服务器套接字。 他们甚至通过在无状态模式下运行来节省内存 – 他们相信客户要记住他们的会话。 服务器能力根本不是问题。 另一方面,Facebook似乎自动生成他们的CSS(他们的名字是base64编码),但超过10个不同的文件发送给用户,他们似乎甚至没有大量优化它; 只有一些空白删除。 我已经通过一个函数来压缩所有文件,所以这些都是可行的。 我不想select第一个select,因为它更容易。 前两个利用caching(第二个比第一个小),但第二个只需要三个请求到服务器,第三个只需要一个来自服务器的请求(忽略我们可能有的几个图像一些页面)。 Android / iOS是否跨浏览器重启cachingjs和css? 如果没有,那么内联听起来更好。 唯一的目标是最小化用户的平均加载时间。 每个用户每天将花费大约100页的网页加载量,每天查看大约40个CSS和js文件。 CSS和JS基本上是静态的内容。 它被设置为caching30天,如果使用/path/to/file.ext?md5-hash-of-file更改文件,则更改url。 另外,一切都尽可能gzipped。 编辑: 我想我应该澄清我find的第二个选项的两个选项。 在整个站点上使用单个文件用于CSS和js是一个好主意吗? 它只会使用两个请求,并删除任何双(或七段)caching,因为一个function是在两个或两个以上不同的组合js文件,但下载高达1MB听起来不太好。 今天,它基本上是每个视图的一个组合的CSS,所以每次你再次查看同一页时,内容被caching。 但是,一些js和css被用在多个页面上。

Phonegap(3.0.0)第一次尝试相机不成功

出于testing目的,我复制了phonegap相机API上find的完整示例,并在onPhotoDataSuccess上放置了一个警报,以testing函数何时被触发。 在拍摄的第一张照片警报不会显示。 但是,第一次尝试后,照片保存后,警报将显示。 有什么build议? 如果事情不清楚,我会很乐意更具体。 我在Android Galaxy S3上testing了下面的代码 <!DOCTYPE html> <html> <head> <title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for device API libraries to load // document.addEventListener("deviceready",onDeviceReady,false); // device APIs are available // function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; […]