问题描述
以下代码根本不适用于IE.
fetch("{{{LINK TO API}}}",{标头:{"Accept":"application/json","Content-Type":"application/json"}}).then(resp => resp.json()).then(function(json){//设置变量var Seller = json.sellers [Math.floor(Math.random()* Math.floor(json.sellers.length))]];//插入公司徽标companyLogo.src = json.logo_url;//插入卖家个人资料document.querySelectorAll("[数据销售商资料]").forEach(包装=> {var innerHTML =";innerHTML + =< img class ='hbba-profile-img'src ='" + Seller.profile_image +'>";innerHTML + =< div class ='hbba-desc-wrapper'>" ;;innerHTML + =< span class ='hbba-desc-name'>"+ Seller.name +</span>";innerHTML + =< span class ='hbba-desc-title'>"+ Seller.job_title +</span>";innerHTML + =</div>";innerHTML + =< div class ='hbba-is-active'></div>";wrapper.innerHTML = innerHTML;});});
该代码位于Webpack环境中,并与@ babel/preset-env以及@ babel/polyfill一起作为 entry进行输入:["@ babel/polyfill","./src/main.js],
.
已编译的代码: fetch("https://helpbox-by-avense.se/api/company/1/init-info",{标题:{接受:"application/json","Content-类型:" application/json}}).then(function(t){return t.json()}).then(function(t){var n = t.sellers [Math.floor(Math.random()* Math.floor(t.sellers.length))]; u.src = t.logo_url,document.querySelectorAll("[data-seller-profile]").forEach(function(t){var e ="; e + =< img class ='hbba-profile-img'src ='" + n.profile_image +'>",e + =< div class ='hbba-desc-wrapper'>",e +=< span class ='hbba-desc-name'>" + n.name +</span>",e + =&span class ='hbba-desc-title'>" + n.job_title +</span>",e + =</div>",e + =< div class ='hbba-is-active'></div>",t.innerHTML = e})})
要使其在IE上运行,应该进行哪些更改?
您需要额外的 fetch
polyfill,Babel不会为您进行polyfill,也不会进行编译./p>
https://github.com/github/fetch
您也不会在 .babelrc
中定位任何浏览器,因此请将其更改为
{预设":[["@ babel/preset-env",{目标":{浏览器":[最后1个版本","ie> = 11"],"node":"6.10","esmodules":是}}]],插件":["@ babel/plugin-proposal-object-rest-spread"]}
Following code does not work on IE at all.
fetch("{{{LINK TO API}}}", {
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
}
})
.then(resp => resp.json())
.then(function(json) {
// SET VARIABLES
var seller = json.sellers[Math.floor(Math.random() * Math.floor(json.sellers.length))];
// INSERT COMPANY LOGO
companyLogo.src = json.logo_url;
// INSERT SELLER PROFILES
document.querySelectorAll("[data-seller-profile]").forEach(wrapper => {
var innerHTML = "";
innerHTML += "<img class='hbba-profile-img' src='" + seller.profile_image + "'>";
innerHTML += "<div class='hbba-desc-wrapper'>";
innerHTML += "<span class='hbba-desc-name'>" + seller.name + "</span>";
innerHTML += "<span class='hbba-desc-title'>" + seller.job_title + "</span>";
innerHTML += "</div>";
innerHTML += "<div class='hbba-is-active'></div>";
wrapper.innerHTML = innerHTML;
});
});
The code is in a Webpack environment and gets complied with @babel/preset-env, as well as @babel/polyfill as entry: ["@babel/polyfill", "./src/main.js"],
.
Compiled code: fetch("https://helpbox-by-avense.se/api/company/1/init-info",{headers:{Accept:"application/json","Content-Type":"application/json"}}).then(function(t){return t.json()}).then(function(t){var n=t.sellers[Math.floor(Math.random()*Math.floor(t.sellers.length))];u.src=t.logo_url,document.querySelectorAll("[data-seller-profile]").forEach(function(t){var e="";e+="<img class='hbba-profile-img' src='"+n.profile_image+"'>",e+="<div class='hbba-desc-wrapper'>",e+="<span class='hbba-desc-name'>"+n.name+"</span>",e+="<span class='hbba-desc-title'>"+n.job_title+"</span>",e+="</div>",e+="<div class='hbba-is-active'></div>",t.innerHTML=e})})
What should be change in order for it to work on IE?
You need an additional fetch
polyfill, Babel won't polyfill this for you, and it won't transpile it either.
https://github.com/github/fetch
Also you don't target any browser in your .babelrc
, so change it to
{
"presets": [
[ "@babel/preset-env", {
"targets": {
"browsers": [ "last 1 version", "ie >= 11" ],
"node": "6.10",
"esmodules": true
}
}]
],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}
这篇关于在Internet Explorer中提取?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!