webkit

WKWebview cookie issue?

由 試著忘記壹切 提交于 2020-08-10 19:22:30
问题 Background: I'm upgrading my app to use WKWebview from UIWebview as it will no longer be accepted by App Store The App Store will no longer accept new apps using UIWebView as of April 2020 and app updates using UIWebView as of December 2020. Issue: What happen is, I'm getting cookie return from Webview (WKWebview) after logged in. I will retrieve a token I need for API firing, however I'm constantly hitting HTTP 401 status for all the API(s) fired. If I revert back to UIWebview , and repeat

创建第一个AMP页面【英译AMP】

由 假装没事ソ 提交于 2020-08-10 16:27:38
想创建您的第一个AMP页面又不知道如何开始?在本教程中，您将学习如何创建一个基本的AMP HTML页面，如何对其进行设置并验证它是否与AMP兼容，以及如何为发布和分发做好准备。 Create your first AMP page Not sure how to get started? In this tutorial, you’ll learn how to create a basic AMP HTML page, how to stage it and validate that it’s AMP compliant, and finally how to get it ready for publication and distribution. 下面的代码是一个不错的amp样板，可以做为学习的开始。复制并将其保存到扩展名为.html的文件中。 <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="https://amp.dev/documentation

dom渲染流程（cssdom和dom）

由 萝らか妹 提交于 2020-08-10 07:37:41
渲染引擎——webkit和Gecko Firefox使用Geoko——Mozilla自主研发的渲染引擎 Safari和Chrome都使用webkit，Webkit是一款开源渲染引擎 dom渲染流程： 　　 1、浏览器解析html源码，然后创建一个DOM树。 在DOM树中，每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement，对应的是html标签。 　　 2、浏览器解析CSS代码，计算出最终的样式数据。 对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置，用户设置，外联样式，内联样式，html中的style(嵌在标签中的行间样式)。 　　3、创建完DOM树并得到最终的样式数据之后，构建一个渲染树。 渲染树和DOM树有点像，但是有区别。DOM树完全和html标签一一对应，而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。 　　4、当渲染树创建完成之后，浏览器就可以根据渲染树直接把页面绘制到屏幕上。 渲染树和Dom树的关系 　　渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外

CSS 的 :is()和 :where() 即将在浏览器中和大家见面

由 孤者浪人 提交于 2020-08-10 07:23:50
现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的CSS :is() 和 :where() 伪类。 Chrome的实施仍然落后。 使用 :is() 减少重复 你可以使用 :is() 伪类来删除选择器列表中的重复项。 /* BEFORE */ .embed .save-button:hover, .attachment .save-button:hover { opacity : 1 ; } ​ /* AFTER */ :is(.embed, .attachment) .save-button:hover { opacity : 1 ; } 此功能主要在未处理的标准CSS代码中有用。如果使用Sass或类似的CSS预处理程序，则可能更喜欢嵌套。 注意 ：浏览器还支持非标准的 :-webkit-any() 和 :-moz-any() 伪类，它们与 :is() 相似，但限制更多。WebKit在2015年弃用了 :-webkit-any() ，Mozilla已将Firefox的用户代理样式表更新为使用 :is() 而不是 :-moz-any() 。 使用 :where() 来保持低特殊性 :where() 伪类与 :is() 具有相同的语法和功能。它们之间的唯一区别是 :where() 不会增加整体选择器的特殊性（即某条CSS规则特殊性越高

html5视频文件上传前，预览video

由 你说的曾经没有我的故事 提交于 2020-08-10 05:37:04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <video style="height:auto;" src="" id="video0" controls="controls"></video> <input class="form-control" type="file" style="height:auto;" id="video" name="video"/> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript"> $("#video").change(function(){ var objUrl = getObjectURL(this.files[0]) ; console.log("objUrl = "+objUrl) ; if (objUrl) { $("#video0").attr("src", objUrl) ; } }) ; //建立一个可存取到该file的url function getObjectURL(file) { var

input type=button在iso中显示和android的效果不同

由 大兔子大兔子 提交于 2020-08-09 14:22:06
HTML 上面的用的是input的type="button"的按钮，发现在iso中的效果是 就是这样的一个效果，很丑（原因：是因为iso在圆角和颜色属性上有默认的按钮渲染方式） 解决：在全局样式或者在局部样式中加上 -webkit-appearance:none 即可解决 效果变成这样 但是感觉还是有点圆角（回头再看下自己的项目） -webkit-appearance:none 说明： 改变按钮和其他控件的外观，使其类似于原生控件。 1.-webkit-appearance:none是一个不规范的属性，它没有出现在css规范草案中。 2.此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。 语法： -webkit-appearance:none | button | button-bevel .. .. .. . 默认值：none 兼容性： 对应的firefox可以使用-moz-appearance属性ios 2.0及更高版本的safari 浏览器可用Android尚不明确。 来源： oschina 链接： https://my.oschina.net/u/4375351/blog/4298102

小程序底部划入滑出效果

由 拜拜、爱过 提交于 2020-08-09 09:21:17
直接复制就能用 wxml < view bindtap ="showModal" > 点这里 </ view > < view class ="wrap" > < view class ="modal modal-bottom-dialog" hidden ="{{hideFlag}}" > < view class ="modal-cancel" bindtap ="hideModal" ></ view > < view class ="bottom-dialog-body bottom-positon" animation ="{{animationData}}" > <!-- 滑块儿区 --> < view class ='huakuai' ></ view > </ view > </ view > </ view > wxss /*模态框*/ .modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;} .modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);} .bottom-dialog-body{width:100%;

AppEmit是应用程序（尤其是浏览器）与本地程序间互相通信的易扩展的轻量级中间件

由 こ雲淡風輕ζ 提交于 2020-08-09 08:49:57
AppEmit v0.3.8 文档 概述 AppEmit是应用程序（尤其是浏览器）与本地程序间互相通信的易扩展的轻量级中间件。 AppEmit is an extensible lightweight middleware for communication between applications (especially browsers) and local programs. 主要采用了HTML5国际标准的Web Socket进行通话，默认为异步， JSON格式传递参数。 主要实现功能： 在浏览器播放含有flash的网页或Flash文件，包括swf交互动画、flv影视等 在浏览器打开、操作本地文件，比如办公软件 开发本地硬件DLL驱动模块的封装插件，实现在网页中操作控制本地的读卡器、打印机、扫描仪、高拍仪、U盾等各种硬件设备 各个应用程序之间通信 在Chrome里嵌入IE内核网页 解决问题 国际市场份额68%以上的chrome浏览器（数据来源Netmarketshare；中国内25%以上）在2020年12月后不再支持 NPAPI ，而微软的 edge 也不支持 ActiveX 。 客户习惯使用浏览器来处理各种业务。 游戏商、银行、医院、硬件等企业客户使用dll或者flash文件的场景需要。 相关链接 程序名称 AppEmit.exe 网址 http://www.appemit

angular浏览器兼容性问题解决方案

由 荒凉一梦 提交于 2020-08-08 23:58:44
问题 ：edge浏览器下，固定列的边框消失 原因 ：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky !important; position: sticky !important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核，对css3的属性支持较好，也支持sticky属性，可以使用，可以固定表格列，但边框会消失。 解决方案 ： 目前可行的解决方案有如下几种： 不使用固定列，若产品没有明确要求使用固定列，可以放弃使用nzLeft及nzRight来固定表格。从而使各个浏览器下的展示效果一致。 针对Edge浏览器降级处理，与IE浏览器效果一致，无固定列，整体可横向滚动。 自定义实现固定列，不使用组件的固定列实现，通过使用 position: absolute; 这种方式来实现表格的固定列。 第二个方案的详细过程如下： 使用div包裹表格，当表格宽度超过div宽度时，开启滚动： .scroll-table { width: 100%; overflow-x: scroll; } 针对表格，我们可以指定宽度

QQ音乐Android客户端Web页面通用性能优化实践

由 亡梦爱人 提交于 2020-08-08 21:24:06
QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级，然而页面的打开耗时与 Native 页面相距甚远，需要系统性优化。本文将介绍 QQ 音乐 Android 客户端在进行 Web 页面通用性能优化过程中的问题、思路、方案和效果，并尝试对跨端场景的常见瓶颈和对策进行归纳。文章作者：关岳，QQ音乐客户端开发工程师。 一、问题与目标 作为一款注重于内容运营的应用程序，QQ 音乐 Android 客户端的 Web 页面日均 PV 达到千万量级，评论页、MV 页等核心页面均有 Web 页面参与，或完全由 Web 实现。 客户端内 Web 页面的打开耗时与 Native 页面相距甚远，需要系统性优化。然而，现有的前端和跨端优化方案，存在一定局限性。 1. 前端优化的局限 针对 Web 页面的耗时优化，在优化思路、方案、服务、工具链等方面都已经建设得非常详细。然而，在客户端内 Web 页面这一场景，纯前端优化存在以下两个局限： 无法规避 WebView 初始化耗时 受限于 WebView 生命周期范围 从客户端角度，除了思考优化 WebView 初始化耗时之外，还可以从 “扩展前端生命周期” 的角度出发，思考优化方案。 2. 跨端优化的局限 现有跨端优化方案，包括离线包、VasSonic 等，为了达到最好的优化效果，均需要前端终端共同参与改造。这导致存量页面的逻辑改造增加
订阅 webkit