我的javascript可以在firebox上运行但不能在chrome上运行?

hrirmatl  于 2023-01-24  发布在  Java
关注(0)|答案(1)|浏览(130)

我有下面的代码

//followers list
document.getElementById('followers').onchange = function(evt) {
  try {
    let files = evt.target.files;
    if (!files.length) {
      alert('No file selected!');
      return;
    }
    let file = files[0];
    let reader = new FileReader();
    const self = this;
    reader.onload = (event) => {
      obj = JSON.parse(event.target.result);
      followers_data = Object.keys(obj).map(key => {
        return obj[key];
      });
      followers = followers_data.flat(1);

      follower_array = [];
      for (i = 0; i < followers.length; i++) {
        follower_array.push(followers[i].string_list_data[0].href);
      }
      document.getElementById('followers_result').value = follower_array.join("\n");
      followers = document.getElementById('followers_result').value;
    };
    reader.readAsText(file);
  } catch (err) {
    console.error(err);
  }
}

//following list
document.getElementById('following').onchange = function(evt) {
  try {
    let files = evt.target.files;
    if (!files.length) {
      alert('No file selected!');
      return;
    }
    let file = files[0];
    let reader = new FileReader();
    const self = this;
    reader.onload = (event) => {
      obj = JSON.parse(event.target.result);
      followers_data = Object.keys(obj).map(key => {
        return obj[key];
      });
      followers = followers_data.flat(1);

      follower_array = [];
      for (i = 0; i < followers.length; i++) {
        follower_array.push(followers[i].string_list_data[0].href);
      }
      document.getElementById('following_result').value = follower_array.join("\n");
      // console.log(document.getElementById('followers_result').value);
      following = document.getElementById('followers_result').value;

    };
    reader.readAsText(file);
  } catch (err) {
    console.error(err);
  }
}

following = document.getElementById('following_result').value;
console.log(following);
followingj = JSON.stringify(following);
spfollowing = JSON.parse(followingj);
finalfollowing = spfollowing.split('\n');
console.log(finalfollowing);

followers = document.getElementById('followers_result').value;
console.log(followers);
followersj = JSON.stringify(followers);
spfollowers = JSON.parse(followersj);
finalfollowers = spfollowers.split('\n');
console.log(finalfollowers);

finalfollowing = finalfollowing.filter(val => !finalfollowers.includes(val));
users = [];
finalfollowing.forEach(function(item) {
  user = item.split('https://www.instagram.com/');
  users.push(user[1]);
})

console.log(users);
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Followers and Following List Comparison</title>
  <!-- <link rel="stylesheet" type="text/css" href="../styles.css" />  -->

</head>

<body>
  <div class="follows">
    <div class="followers">
      <h2>Upload Followers List</h2>
      <input id="followers" type="file" accept="application/json" />
      <textarea id="followers_result" rows=25 cols=50></textarea>
    </div>

    <div class="following">
      <h2>Upload Following List</h2>
      <input id="following" type="file" accept="application/json" />
      <textarea id="following_result" rows=25 cols=50></textarea>
    </div>

    <div class="result">
      <h2>People who are not following you</h2>
      <textarea id="result" rows=25 cols=50></textarea>
    </div>
  </div>
</body>

</html>

我上传了json文件,并比较了那些没有跟随我的文件。当我在firefox上使用它时,刷新页面会在textarea中填充结果,但当我在chrome上使用它时,它不工作。我还尝试创建一个函数(onchange)其中当文件被上载时,它会做一些事情,因为我认为这是一个问题的文本不显示公元前,它没有上传第一,但没有工作。任何帮助将不胜感激。

7y4bm7vi

7y4bm7vi1#

这是Firefox的标准行为-如果你像Netscape那样刷新页面,它会恢复表单元素的内容。其他浏览器从来没有复制过这种行为,不管是出于法律的原因还是其他未知原因,所以刷新页面会让表单元素留空。
如果您想强制Firefox像其他浏览器一样工作,

  • SHIFT的同时点击重新加载按钮,或者同时按CTRL SHIFT R而不是CTRL R来执行重新加载。这在MDN上的location.reload文章中的参数部分有所记录。或者
  • autocomplete="off"属性添加到form或HTML中的表单元素。

在HTML标准中,重新加载页面时会考虑到它的文档状态,包括会话历史条目,还可以包括持久化用户状态的数据,这是实现定义的。我对这一点的理解是Firefox和其他浏览器的行为都符合标准。
在其他浏览器中实现Firefox的行为可能需要在重载时将元素数据保存在会话存储中,沿着使用代码来检查已存储的数据以及重载文档中是否缺少这些数据。如果这在 * 开发 * 过程中很重要,请使用Firefox作为您的Go to浏览器。

相关问题