getComputedStyle width and Height在真实Android设备上的chromium webv
getComputedStyle width and height not working in chromium webview on real Android devices
我有这个javascript函数:
function onFontLoad(cb,font,size,table,interval)
{
var div=document.createElement("div");
div.style.fontFamily=font;
div.style.fontSize=size;
div.style.position="absolute";
div.style.top="-100px"
div.style.left="-100px"
document.body.appendChild(div);
var checkInterval=setInterval(function()
{
for(character in table)
{
div.textContent=character;
var t=table[character];
var s=getComputedStyle(div);
if(parseInt(s.width)!=t[0]||parseInt(s.height)!=t[1]) return;
}
div.parentNode.removeChild(div);
clearTimeout(checkInterval);
cb();
},interval||200);
它之所以有效,是因为Android中的webview是基于webkit的。由于WebView更改为chromium,即使在Chromium浏览器中,我的功能也停止工作。我建议使用带有舍入的Math.ceil,并避免使用parseInt。
现在我有这个功能:
function onFontLoad(cb, font, size, table, interval) {
var div = document.createElement("div");
div.style.fontFamily = font;
div.style.fontSize = size;
div.style.position = "absolute";
document.body.appendChild(div);
var getRawPixels = function (cssUnit) {
// Round up to the highest unit.
var re = /(['d.]+)(px)/; // css measure units.
var results = cssUnit.replace(re, "$1");
return Math.ceil((results * 10) / 10) ;
};
var checkInterval = setInterval(function () {
for (var character in table) {
div.textContent = character;
var t = table[character];
var s = getComputedStyle(div);
if (getRawPixels(s.width) != t[0] || getRawPixels(s.height) != t[1]) return;
}
div.parentNode.removeChild(div);
clearTimeout(checkInterval);
cb();
}, interval || 200);
并且功能现在在 Chromium 浏览器或 Android(从 4.4 到 6 个模拟器开始)中按预期工作,我对模拟器中的 webview 渲染没有问题。但它在一些真实设备上是空白的,即使没有webview硬件加速。(主要是安卓5.x设备)但是我很漂亮,画布渲染没有问题,因为如果我评论或删除此字符串:
if (getRawPixels(s.width) != t[0] || getRawPixels(s.height) != t[1]) return;
即使使用我测试应用程序的真实 android 设备,Webview 也会再次按预期开始渲染,但不应用来自 onFontLoad 函数的样式。
我在此过程中发现的另一件事是,Chrome 开发人员工具中损坏的 Web 视图会在div 之后添加<i>
。但是在模拟器中运行的相同代码很好地显示画布,并且在div 之后没有任何<i>
。但是,如果我删除带有div 位置的字符串,我可以破坏模拟器中的画布。在这个厄运操作之后,我也会在div 之后的页面源代码中看到<i>
。
另外,我发现Chromium过去在getComputedStyle方面也存在一些问题。但我认为getComputedStyle工作正常。
这是div 隐藏的东西。我刚刚删除了隐藏,因为在隐藏div 后,在画布上的应用程序中摧毁了自己。简单真的是那里的关键。
function onFontLoad(cb, font, size, table, interval) {
var div = document.createElement("div");
div.style.fontFamily = font;
div.style.fontSize = size;
//div.style.position = "relative";
document.body.appendChild(div);
var checkInterval = setInterval(function () {
for (var character in table) {
div.textContent = character;
var t = table[character];
var s = getComputedStyle(div);
}
clearTimeout(checkInterval);
cb();
}, interval || 200);
}
相关文章:
- fetch() 函数未在 Ubuntu Chromium 浏览器上定义
- FF和Chromium中CSS样式按钮的外观差异
- Chromium内联样式不允许正确的视图
- 如何修复Chromium Portable中的跨来源请求共享问题
- Delphi Chromium,Javascript按钮按下
- 如何重新创建Chromium/Chrome新选项卡主页
- Cordova/phonegap 插件兼容性问题 - org.chromium.socket / org.chromiu
- 如何在 chromium 中安装用户脚本
- getComputedStyle width and Height在真实Android设备上的chromium webv
- 理论上是否有可能使用 chromium 的可安装网络应用程序 API 构建纯 JS bittorrent
- (Chromium) CSS 和 javascript 中的 alpha 颜色值(以 rgba 为单位)
- 删除 localStorage,Chrome/Chromium 中选项卡的数据库存储
- canvas.toBlob() 仍然无法在 chromium 上运行.解决方法
- 将信息从 Chromium Embedded (Javascript) 发送到包含C++的应用程序
- 如何从嵌入式 Chromium 控件中执行 JavaScript 来获得结果
- Delphi Chromium Embedded(TChromium)-获取脚本输出
- 为什么sort()JavaScript函数在Firefox中有效,而在Chromium中无效
- onClick窗口.位置在Chromium(谷歌Chrome的Linux版本)中不起作用
- HTML5拖放图像在Chromium(和Opera)中获得水平偏移
- 如何从Chromium控制台定义javascript函数