Javascript 和 Jquery 代码未加载到 Safari 9 或更低版本答案

【问题标题】：Javascript and Jquery code is not loaded to Safari 9 or lowerJavascript 和 Jquery 代码未加载到 Safari 9 或更低版本
【发布时间】：2018-05-07 12:16:34
【问题描述】：

伙计们，这快把我逼疯了。我不知道为什么，但我的 JS 和 Jquery 脚本没有在 Safari 9、Safari 8 及更低版本上加载。我真的不明白为什么。

我正在所有浏览器上测试我的 codepen，但我一直遇到这个问题。

这里是我的 JS/Jquery 代码：

// Gradient buttons news    

    $('.news-btn-div').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('.news-btn-div').removeClass('current');
        $(this).addClass('current');
    })


// News

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

function req2() {
  fetch('https://jsonplaceholder.typicode.com/posts/2')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}

function req3() {
  fetch('https://jsonplaceholder.typicode.com/posts/3')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}

function req4() {
  fetch('https://jsonplaceholder.typicode.com/posts/4')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}

function req5() {
  fetch('https://jsonplaceholder.typicode.com/posts/5')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}



// Subrscription confirmation without Ajax

$('#newsletter-cf').submit(function () {
  var email = document.getElementById("contact-email").value;
  if(email)
  {

    $("#newsletter-cf").slideUp("slow");
    $("#message-sent").slideDown("slow");

  }

  return false;
});

这是我为了使用 Jquery 而在头部添加的：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

现阶段我不知道该检查什么

这是我在控制台 (Safari 9) 中遇到的错误

有什么宝贵的建议吗？

JS 部分的错误似乎与这段代码有关：

.then(response => response.json())
.then(json => {

正如我在这个问题中看到的那样：

JavaScript Safari - SyntaxError: Unexpected token '>'

我不应该在旧浏览器中使用 =>，我知道如何更改它以使其也适用于旧浏览器吗？

【问题讨论】：

标签： javascript safari cross-browser

【解决方案1】：

现在您已经在帖子中添加了更多信息，问题就更清楚了。

在以下代码中，您使用的是箭头函数=>

.then(response => response.json())

从版本 10 开始，它们在 safari 中受支持。它在版本 9 中无法工作。您必须将它们重写为经典函数：

.then(function(response){
    return response.json(); 
});

请注意，箭头函数的特殊性是保留this 的值，因此真正的等价物是：

var self = this;
.then(function(response){
    //use self instead of this inside
    return response.json();
});

一旦解决了这些错误，您就可以知道 jQuery 是否有效（并且知道您是否需要检测 Safari 版本以便加载另一个 jQuery 版本）。

【讨论】：