我认为使用这个polyfill的最好办法是创建一个表单指令,并在链接函数内调用$.webshims.polyfill(‘forms’).
指令
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'
},...
priority: ['angular']
}
}
}
事实是,即使垫片加载,甚至调用正确的功能,垫片似乎不起作用,因为IE9仍然存在HTML5 Form属性(占位符,表单属性等)的问题,
我在这里缺少什么？
解决方法
但是首先：将webshims的polyfiller文件寄存器作为名为amd模块的“polyfiller”.将您的网页重命名为polyfiller将是一件好事
define(['angular','polyfiller'],function(angular)
和：
polyfiller: '../public/components/webshim/src/polyfiller',
在定义函数的内部,您还应该在调用polyfill方法之前正确设置basePath：
webshims.setOptions({
waitReady: false,basePath: '../public/components/webshim/src/shims/'
});
IE10中还支持自动对焦和占位符,但即使在IE11中,form属性也不支持.所以你应该删除Modernizr测试.
所以我们来看看你目前的问题是什么.
您可以在IE9的控制台中运行以下代码webshims.isReady(‘forms’)？
如果属实：
如果表单准备好,请运行IE9的控制台$(‘body’)updatePolyfill()中的以下代码.
这有帮助吗
如果假：
在您的IE9的控制台中运行以下代码：webshims.modules [“form-core”]
它是否返回true或undefined / false.
如果它返回undefined / false：
确保a)webshims.polyfill(‘forms’);真的叫做b)没有网络错误 – >该文件加载没有404也可以看到上面的basePath配置.
关于webshims加载和执行的东西：
通常你应该在应用初始化时加载一次webshims.然后每次您的视图更改时,您应该调用更改的dom元素上的.updatePolyfill.
一些框架有特殊的事件.例如,jQuery mobile使用pageinit事件.
在这种情况下(jQM)你会写：
$(document).on('pageinit',function(e){
$(e.target).updatePolyfill();
});
在一些框架中,您需要使用setTimeout：
render: function(target){
setTimeout(function(){
$(target).updatePolyfill();
},0);
}
