标签: polyfills

我在寻找,像Modernizr的(任何JavaScript库实际上没有)能够实现Flexbox为"旧的浏览器"(一个填充工具).

是的,我知道这是一个非常新的功能(事实上"没有"是一个有效的答案),但我希望这样的事情,我总是很难有水平+垂直居中,这将真正有所帮助和缩短工作.

我的意思是这个flexbox:http://weblog.bocoup.com/dive-into-flexbox/ (最新的)

我想在网页上使用一些新的HTML5表单属性和输入类型.有些浏览器已经支持它们,有些浏览器不支持它们.这就是为什么我想使用Modernizr - 这就是我的麻烦开始.

据我所知,Modernizr本身并不是一个polyfill,而是一个可以测试浏览器是否能够使用某些新的HTML5/CSS3的脚本.如有必要,可以加载polyfill,"模拟"这些功能,以便它们可以在非支持/旧版浏览器中使用.这是正确的我猜？

关于测试/装载:使用Modernizr加载polyfill的正确或最佳方法是什么？
在文档中我发现了这个:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

但是有些页面也是这样的:

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

另外,我如何才能真正了解如何检测这些功能？Modernizr.geolocation对于每个特征检测,肯定存在某些东西吗？

在Modernizr GitHub存储库中,还有许多用户贡献的功能检测.如何在我的Modernizr版本中实现这些？或者只是使用他们的建设者是最好的？

在Safari中,HTML5表单验证有效,但没有用于显示错误消息的UI.基本上,该功能只实现了一半.这就是为什么Modernizr在Safari中给出​​了误报,就像在这里已经提到的那样:https ://github.com/Modernizr/Modernizr/issues/266 显然有人用这样的自定义测试来解决这个问题,但我仍然不明白如何使用它.1

我试图使用这个pollyfill:https://github.com/jonstipe/number-polyfill

但它在IE10中没有任何作用.也没有脚本错误.除了包含JS和CSS文件之外还有什么吗？

我将更进一步,并指出polyfill的官方演示甚至不能在Windows 8上的IE10中工作:http://jonstipe.github.io/number-polyfill/demo.html

我想在调查框架中启用图像(和音频和视频)上传.为此,输入文件几乎足以满足我的需要.

在某些移动浏览器<input type="file" accept="image/*;capture=camera">上,让用户选择上传现有图片或拍摄新图片是一种非常简单的方法.当然,也提供了用于在图片中查看和选择的UI.

桌面浏览器没有走这条路.相反,一些相当不错的东西似乎可以使用getUserMedia().
我没有找到任何将收集的用户媒体上传到服务器的工作示例(例如,我通过这个答案找到了https://github.com/codepo8/interaction-cam/.它显示了视频,但没有捕获到我的Firefox并没有"意识到"它,它在Safari中根本不显示视频).我不确定这有多少是特定于硬件的(我的Macbook Air的相机已经在Chrome中打开/关闭了很长时间).

是否存在某种用于上传捕获图像的polyfill,如果出现故障/访问拒绝,可以回退到简单的文件输入？

我正在尝试评估一个包含 power 的表达式，字符串为**。即eval("(22**3)/12*6+3/2")。问题是 Internet Explorer 11 无法识别这一点并引发语法错误。我应该使用哪种聚酯填充材料来克服这个问题？现在我正在使用Modernizr 2.6.2.

示例方程是，

((1*2)*((3*(4*5)*(1+3)**(4*5))/((1+3)**(4*5)-1)-1)/6)/7
((1*2)*((3*(4*5)*(1+3)**(4*5))/((1+3)**(4*5)-1)-1)/6)/7*58+2*5
(4*5+4-5.5*5.21+14*36**2+69/0.258+2)/(12+65)

如果无法做到这一点，有哪些可能的替代方案？

我正在开发 Angular 6 项目。

我的目标非常具体（Chrome 67），那么是否有任何提示可以排除其他目标浏览器所需的所有可能的polyfill？

• 我可以将 tsconfig 文件中的 target prop 切换为 es6 吗？
• 我可以从我的依赖项中删除 core-js 库吗？

谢谢！

Angular 应用程序在 IE 和 chrome 中运行良好，但在 safari 中它甚至没有显示任何错误也无法正常工作并尝试使用 polyfill

在这里 polyfill.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
 import 'core-js/es6/set';
import 'core-js/client/shim';
import 'intl';
import 'intl/locale-data/jsonp/en';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** …

寻找有关如何使用可在其他浏览器上工作的 Angular Elements 的指南，尤其是 Internet Explore 11。

到目前为止，遵循使用 ngDoBootstrap 来定义自定义元素（Angular Element）的推荐约定。它仅适用于 Chrome，但在 IE 中，元素标签在 DOM 中可见，但在浏览器上不显示任何内容。架构如下：组件、服务、管道……都被分成模块。

然后使用 customElements.define() 定义一个父组件。一旦这在 DOM 中应用，诸如单击事件更改检测之类的操作就可以在 chrome（当前版本：72.0.3626.121）中很好地工作，但在 IE 中没有任何显示。我花了几个小时研究不同的方法让它在 IE 中工作。我查看了这里提供的一些问题和答案，特别是使用 polyfills 但没有成功。

然后，我尝试按照 parent > child 的顺序一次定义一个组件，但再次遇到了不同的问题，其中 IE 开始抛出脚本错误，其中一个特别是与 zone.js 和 vendor.js（但不是在 chrome 中）有关。这样做后，我能够看到该元素，但操作和更改检测不起作用。

我在这里尝试了这种方法，但后来开始遇到依赖注入错误。到目前为止，一个问题会导致另一个问题。

选择使用 AngularElements 的原因是尝试将其与使用不同技术堆栈编写的现有项目集成。

我们正在开发一个现代 JS 库，它大量使用 ES6 语法并且不支持 IE11。

然而，我们有少数用户想要在兼容 IE11 的站点上使用我们的库，我们不想破坏他们在 IE11 上的站点。

问题：有什么方法可以防止我们的库在 IE11 上“爆炸”？（所有的库函数都不能做任何事情，undefined如果检测到 IE11 则返回）

例如，我们尝试基于浏览器检测的以下方法：

function libFunction() {
  if(isIe11()) {
    return;
  }
  // otherwise do some real stuff with ES6-heavy code
}

然而，上面的方法不起作用，因为 IE11 即使在永远不会执行的代码中也会抛出语法错误，我们最终会遇到如下错误：

SCRIPT1002: Syntax error
File: main.db33ab01aedf59e2f70a.hot-update.js, Line: 47, Column: 1

我们考虑的其他方法：

• 如果在请求标头中检测到 IE11 User-Agent，则让我们的服务器返回我们库的假实现。这将部分解决我们的问题，但不会帮助用户，他们通过 NPM/webpack 将我们的库集成到他们的包中，而不是在运行时从我们的服务器获取它。
• 将我们的 ES6 代码转换为 IE11 友好的代码并填充所有 API - 我们不这样做是因为我们不希望现代浏览器用户为臃肿的 ES5 代码和 polyfills 付出代价。
• 覆盖全局错误处理程序以消除错误 - 这将不起作用，因为我们得到的错误是语法错误，错误处理程序不会处理这些错误。

还有其他可能的解决方案吗？

以下是我创建一个示例 Angular 应用程序所采取的步骤：

1. npm i -g @angular/cli （安装 Angular 11.2）
2. ng new foo
3. 选择加入 SASS、Angular Router 和分析
4. cd foo
5. 替换的内容.browserslistrc用last 1 Chrome version。（运行npx browserslist然后只打印chrome 89，正如预期的那样。）
6. ng build --prod

结果如下：

$ ng build --prod
? Browser application bundle generation complete.
? Copying assets complete.
? Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.feaf6a85348d901578d8.js      | main          | 211.52 kB
polyfills.00096ed7d93ed26ee6df.js | polyfills     |  35.98 kB
runtime.7b63b9fd40098a2e8207.js   | runtime       |   1.45 …