Question

我有两个HTML文件，一个名为index.html，另一个名为index1.html，如下所示：

的index.html

＆＃13;

function updateData() {
  var Old_Data = document.getElementById("Old_Data").value;
  var New_Data = load('index1.html');

  if (Old_Data == New_Data) {
    window.alert(Old_Data)
  }
}

＆＃13;

<html>

<head>
  <title>
    My HTML file
  </title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
</head>

<body onload="javascript: setInterval(updateData, 5000)">
  <div id='Old_Data'>abcd 100</div>
</body>

</html>

＆＃13;

index1.html

abcd 1000

目标基本上是，我的JS必须比较那些2个html文件中的选定值，并在Window中显示一些消息。

但是，上面的代码显然无效。

有人可以指出我做错的地方。

感谢您的输入

基于PSK建议的新index.html

我的新index.html如下所示：

<html>
<head>
    <title>
    My HTML file
    </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
    <script>
        function updateData() {
          var Old_Data = document.getElementById("Old_Data").innerHTML;                    
          var xhr= new XMLHttpRequest();
          xhr.open('GET', 'index1.html', true);
          xhr.onreadystatechange= function() {
                 if (Old_Data != this.responseText) {
                      window.alert(Old_Data)
                  }
            };

       }
    </script>

</head>


<body onload="javascript: setInterval(updateData, 1000)">
    <div id = 'Old_Data'>abcd 100</div>
</body>
</html>

我在我的本地服务器上尝试过，但仍然没有显示弹出窗口。

Answer 1

我不确定你想要达到什么目标，但你实施的目标有缺陷。

您的代码问题：

1 - 要获取DIV的内容，您需要使用innerHTML而不是value。

2- load('index1.html');不是函数，要获取html的数据，您需要使用XMLHttpRequest来获取文件内容。

您的代码应如下所示。

function updateData() {
          var Old_Data = document.getElementById("Old_Data").innerHTML;                    
          var xhr= new XMLHttpRequest();
          xhr.open('GET', 'index1.html', true);
          xhr.onreadystatechange= function() {
                 if (Old_Data == this.responseText) {
                      window.alert(Old_Data)
                  }
            };
       }

Answer 2

您的脚本中未定义

load()函数。您需要先定义它。 注意：jquery load（）函数需要一个容器div来加载内容。

<html>

    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>


      <title>
        My HTML file
      </title>
       <script>
            function updateData() {
                  var Old_Data = document.getElementById("Old_Data").value;
                  var New_Data = $("#container").load('index1.html');
                  if (Old_Data == New_Data) {
                      window.alert(Old_Data)
                   }     
            }
        </script>
    </head>

    <body onload="javascript: setInterval(updateData, 5000)">
      <div id='Old_Data'>abcd 100</div>
      <div id="container"></div>


    </body>

    </html>

另请注意：这不会在您的浏览器本地工作，因为XMLHttpRequest无法加载 - 这并不意味着它不起作用。您必须使用服务器/域来调试它。 希望有所帮助..

使用JavaScript比较来自两个不同HTML文件的值

2 个答案: