我正在尝试在角度应用程序中使用webshims polyfill,它也使用requirejs进行依赖项管理.我试图form在表单字段中填充缺少属性,例如input和button,它告诉浏览器形成特定按钮或输入属于哪个.IE9缺乏此功能.
我认为使用此polyfill的最佳方法是创建一个form指令,并调用$.webshims.polyfill('forms')link函数内部.
define(['angular', 'webshims'], function(angular) {
return angular.module('myApp').directive('form', ['$window', function($window) {
return {
restrict: 'E',
scope: false,
link: function($scope, iElement, iAttrs) {
if (!(window.Modernizr.input.placeholder || window.Modernizr.input.autofocus)) {
$.webshims.setOptions({
waitReady: false
});
$.webshims.polyfill('forms');
}
}
};
}
]);
以下是我现在正在加载webshims polyfill的方法:
我的Requirejs配置app: {
options: {
baseUrl: 'src/apps',
stubModules: ['cs'],
paths: {
jquery: '../public/components/jquery/jquery',
....
angular: '../public/components/angular/angular',
....
webshims: '../public/components/webshim/src/polyfiller',
},
shim: {
angular: {
deps: ['jquery'],
exports: 'angular'
}, …这里发布的是一个答案,指示错过旧window.showModalDialogJavaScript函数的人使用
<dialog>
元素而不是.我已经将它与IE和FF所需的polyfill一起使用,并且它可以工作.但是,使用我希望避免使用Chrome的polyfill时会出现明显的延迟(更不用说在浏览器支持时不会使用polyfill的警告).如何检测对话框元素是否受支持,以便省略polyfill处理？特别是这些线:
var dialog = document.getElementById('<element id>');
dialogPolyfill.registerDialog(dialog);
这是我使用的标记:
<input type="text" form="myform" name="inp1" />
<form id="myform" name="myform">
...
</form>
现在我意识到它不适用于旧IE,因此我正在搜索HTML 5 polyfill.
任何人都知道某个覆盖HTML5功能的polyfill？
我在Twitter上提到,我是从移动es6-shim到babel.其他人提到:
即使有了巴贝尔,仍然需要垫片.他们修复破碎的内置物,巴贝尔的输出使用.
所以:
babel需要es6-shim还是类似？
如果确实如此,为什么不把require这些东西当作依赖呢？
引用的答案优先于'是/否',没有支持参数!
我正在使用Angular 2和angular-cli,我想添加srcdoc polyfill来支持Microsoft Edge.所以:
我添加到package.json https://github.com/jugglinmike/srcdoc-polyfill
我import 'srcdoc-polyfill/srcdoc-polyfill.min';在polyfills.ts中导入.
我用它像:
<iframe class="ticket-frame" [srcdoc]="ticket.html | htmlSafe"
tlIframeAutoHeight>
</iframe>
如果你问我iframeAutoHeight指令,这是代码:
@Directive({
selector: '[tlIframeAutoHeight]'
})
export class IframeAutoHeightDirective {
constructor(element: ElementRef, renderer: Renderer) {
renderer.listen(element.nativeElement, 'load', () => {
renderer.setElementStyle(
element.nativeElement,
'height',
element.nativeElement.contentWindow.document.body.clientHeight + 'px'
);
});
}
}
Microsoft Edge 35忽略了srcdoc属性,任何有关问题的想法是什么？
我也接受变通办法.
在Chrome中,一切正常,但在Firefox中,绑定永远不会更新.
这个问题似乎core-js和/或有关zone.js:
这些问题是固定的,但我是最新版本的angular(v2.4.9),它不起作用.
我导入polyfill.ts,这是:
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/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
在main.ts.我尝试在zone.js导入之前按照core-js其中一个Github门票建议导入,但它不起作用.
我需要包含或链接的另一个polyfill index.html吗？
看起来它在Firefox中的实际工作时间占50%.如果我刷新页面,它将每隔一段时间正确呈现页面.当它不起作用时,绝对没有绑定工作; 不执行事件回调,{{ ... }}不呈现绑定等.
这个错误实际上是由我在index.html中链接的Polymer的platform.js(Polymer的 polyfills)引起的.如果我将其删除,绑定将再次开始工作.我在我的应用程序中实现了这个Midi合成器,它使用了Polymer,这需要platform.js.所以似乎Firefoxplatform.js和Angular2 之间存在冲突.有没有办法解决这个冲突？
我正在尝试填充数组方法 includes() 以与 IE8 一起使用，我需要支持一个项目并且我不想使用 indexOf()。
我知道有一个 polyfill，所以我去了：
并将其包含在我的脚本顶部。
IE8 对 Object.defineProperty() 的支持有限，所以我也对它进行了 polyfill：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties#Polyfill
最后，我需要 polyfill Object.keys()：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys#Polyfill
放在一起，我的 polyfills 是：
if (!Object.keys) {
Object.keys = (function() {
'use strict';
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function(obj) {
if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) {
throw new …我不确定我在这里做错了什么。我有 VueJs 3 和 Vuetify。适用于 Chrome 和 Firefox，但无法在 IE 和 Edge 中加载。我正在尝试使用 Babel 加载 polyfills 并强制 Vue CLI 为 Vuetify 转换依赖项。
包.json
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
]
}
vue.config.js
module.exports: {
transpileDependencies: ['vuetify']
}
主文件
import 'core-js/es6';
import 'regenerator-runtime/runtime';
导入包含在我的 main.ts 文件的顶部。我一直在使用官方文档来设置它。
我在这里缺少什么？
我正在为第三方网站构建一个小部件，使用影子DOM来防止其CSS干扰我们的CSS。我正在使用ShadyDOM和ShadyCSS polyfills使它在Edge和IE中工作，但是它并没有像我期望的那样为阴影DOM转换CSS。
例：
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM test</title>
</head>
<body>
<div id="container">container is here</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
<script>
const shadow = document.getElementById("container").attachShadow({ mode: "open" });
const style = document.createElement("style");
style.innerHTML = `
:host .stuff {
background: #ff00ff;
}
`;
shadow.appendChild(style);
const div = document.createElement("div");
div.classList.add("stuff");
div.innerHTML = "stuff inside shadow dom";
shadow.appendChild(div);
</script>
</body>
</html>In Chrome (which supports shadow DOM natively), the stuff div has a pink background, as I would expect. But in …
在我的 Vite 项目中，我依赖于一个process在其功能之一中使用 Node 全局的模块。我没有从我的代码中调用这个函数，但是当我导入模块时，Vite 开发服务器仍然给我这个错误：
Uncaught ReferenceError: process is not defined
有趣的是，当我创建生产版本时，我没有看到此错误。
如何process使用 no-op 进行 polyfill 以使 Vite 开发服务器停止失败？