Question

我遇到的问题似乎有一个简单的答案。我想让我的网站完成从网页上抓取一段文字的简单任务。

我基本上希望我的代码看起来像......

var str = TextFromWebPage;

我想“抢”的文字在http://dasd-sharepoint.dasd.org/Schools/STEMAcademy/Pages/default.aspx

如果您在页面上查看（尝试控制F并搜索当前日期，例如："May-9-2013:"）以获取接下来五个日期的列表。我想把这个列表用在Javascript中的变量中。

所以我最喜欢的结果是

var str = new Array("May-9-2013: “F” Day", "May-10-2013: “G” Day", "May-13-2013: “H” Day", "May-14-2013: “I” Day", "May-15-2013: “J” Day", "May-16-2013: “K” Day");

目的：基本上对于学校我总是在检查时间。因此，我不是做数学运算，而是制作一个快速的小程序，查看当前时间与当前课程结束的时间。然而，在我的学校，我们有不同的“字母日”，这意味着课程长度在不同的日子有所不同。信件日基于12天的周期，这意味着。星期一到星期五可能是A-E，但这意味着接下来的星期一星期一将是F-J。更不用说是否有下雪天或休息日。所以我没有使用日历，而是想出了一种方法，我可以从该区域网页中获取这些数据，并在代码中使用它来自动检查它是什么字母日。

感谢您的帮助！

这是我正在做的事情的代码......

<!DOCTYPE html>
<html>
     <head>
        //<link rel="stylesheet" type="text/css" href="graphics.css">
        <script>
            //==========|  Data  |==========
            //These array lists contain the times the class periods start, end, and their title
            var Ptest = new Array("starts: 07:25 ends: 15:00 title: Testing", "starts: 07:25 ends: 30:00 title: Testing");
            var P14 = new Array("starts: 07:25 ends: 09:00 title: Pd: 1", "starts: 09:04 ends: 10:34 title: Pd: 2", "starts: 10:38 ends: 11:08 title: Lunch", "starts: 11:12 ends: 12:42 title: Pd: 3", "starts: 12:46 ends: 14:23 title: Pd: 4");
            var P17 = new Array("starts: 07:25 ends: 08:20 title: Pd: 1", "starts: 08:24 ends: 09:14 title: Pd: 2", "starts: 09:18 ends: 10:08 title: Pd: 3", "starts: 10:12 ends: 11:02 title: Pd: 4", "starts: 11:06 ends: 11:36 title: Lunch", "starts: 11:40 ends: 12:30 title: Pd: 5", "starts: 12:34 ends: 13:24 title: Pd: 6", "starts: 13:28 ends: 14:23 title: Pd: 7");
            var P57 = new Array("starts: 07:25 ends: 09:00 title: Pd: 5", "starts: 09:04 ends: 10:34 title: Pd: 6", "starts: 10:38 ends: 11:08 title: Lunch", "starts: 11:12 ends: 12:42 title: Pd: 7", "starts: 12:46 ends: 13:36 title: Advisory", "starts: 13:40 ends: 14:23 title: Seminar");
            //---------------------------------

            //==========|  Variables  |==========
            var input = P17; //What set of data to use
            var currentSlot = 0; //What the current Period is
            var over = false; //If the current school day if over
            //---------------------------------

            //==========|  Actions  |==========
            window.onload=function() {
                setInterval(function() {refresh();}, 1); //Loop
            }

            //---------------------------------


            //==========|  Core Functions  |==========
            function refresh() {
                display();
                updateClock();
            }

            function display() {
                var currentTime = getTime();
                var timeInSec = ((parseInt(currentTime.slice(0,2)))*3600)+((parseInt(currentTime.slice(3,5)))*60)+(parseInt(currentTime.slice(6,8)));

                if (currentSlot >= input.length) {over = true;}
                if (over == false) {
                    var data = input[currentSlot];
                    var nextSlot = input[currentSlot + 1];

                    var PdEndTime = ((parseInt(data.slice(20,23)))*3600)+((parseInt(data.slice(23,25)))*60);

                    var PdStart = data.slice(8,13);
                    var PdEnd = data.slice(20,25);
                    var PdTitle = data.slice(32,data.length);

                    if (nextSlot!==undefined) {
                        var NPdStart = nextSlot.slice(8,13);
                        var NPdEnd = nextSlot.slice(20,25);
                        var NPdTitle = nextSlot.slice(32,nextSlot.length);
                    }

                    var timeLeft = PdEndTime - timeInSec;
                    var hLeft = Math.floor(timeLeft / 3600);
                    var mLeft = Math.floor(timeLeft / 60);
                    var sLeft = Math.floor(timeLeft % 60);

                    if (hLeft > 0) {mLeft = mLeft - (hLeft*60);}

                    hLeft = add0(hLeft);
                    mLeft = add0(mLeft);
                    sLeft = add0(sLeft);

                    if (timeInSec > PdEndTime) {currentSlot++;}

                    document.getElementById("display").innerHTML = PdTitle+" ends at "+PdEnd+", in "+hLeft+":"+mLeft+":"+sLeft;
                }
                else {document.getElementById("display").innerHTML = "School is over!";}
            }

            //---------------------------------

            //==========|  Misc Functions  |==========


            function getTime() {
                var clock = new Date();
                var h = clock.getHours();
                var m = clock.getMinutes();
                var s = clock.getSeconds();

                h = add0(h);
                m = add0(m);
                s = add0(s);

                return h+":"+m+":"+s;
            }

            function updateClock() {
                document.getElementById("clock").innerHTML = getTime();
            }

            function add0(i) {
                if (i < 10) {
                    i  = "0"+i;
                }
                return i;
            }

            function changeInput(newInput) {
                input = newInput;
                currentSlot = 0;
            }
            //---------------------------------
        </script>
     </head>
    <body>
        <p id="clock" class="textCenter"></p>
        <p id="display" class="textCenter"></p>
        <p class="textCenter">
        <input type="button" onClick="changeInput(P14)" value="1-4 Block">
        <input type="button" onClick="changeInput(P17)" value="1-7 Normal">
        <input type="button" onClick="changeInput(P57)" value="5-7 Block">
        </p>
    </body>
</html>

我希望它只是自动检查它是什么字母日，所以你不必让用户点击按钮。例如，A日= 1-7，B日= 1-4，C日= 1-7，D日= 5-7

Answer 1

以下代码将获取您需要的信息（如果页面没有更改）。您必须在Firefox中使用forcecors（并激活它），按F12查看记录到控制台的值数组。

[更新] 忘记提到你也必须使用jQuery。将jquery-1.9.0.js放在与html相同的目录中。

<!DOCTYPE html>
<html>
 <head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Example</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
  var url="http://dasd-sharepoint.dasd.org/Schools/STEMAcademy/Pages/default.aspx";
  $.get(url,function(res){
    var p = new DOMParser();
    var doc = p.parseFromString(res, "text/html");
    var anchors=$(doc).find(".dfwp-column")[0].getElementsByTagName("a");
    var arr=[];
    for(var i=0;i<anchors.length;i++){
      arr.push(anchors[i].textContent);
    }
    console.log(arr);
  });

});
</script>
</head>
 <body>
<div class="bigDiv">Big</div>
<div class="smallerDiv">Small</div>
</html>

Answer 2

如果您是从其他网站进行此操作，最好的办法是在您的网站上使用使用PHP或ASP的辅助页面，或任何其他服务器端编程语言来抓取该页面并返回其内容，而您是您可以在该服务器端语言中使用强大的正则表达式，并返回所需内容的JSON对象。这里真正的问题是你不能从 yoursite.com 转到 dasd-sharepoint.dasd.org/Schools/STEMAcademy/Pages/default.aspx 这只是在传统的java脚本环境中不可能。

我的结论是，在执行XMLHttpRequest（XHR）时，浏览器被设计为不访问其他网站。即使它是，从技术上讲，他们的网络服务器应该拒绝通过XHR从另一个域访问，这被称为跨域请求，并且在javascript中本身不可能。

使用辅助页面来获取其中的内容，效率会更高，并且不需要加载项来使用此功能/网站。这使您可以精确控制您的功能并轻松移植到大多数主机。它还允许任何客户端访问此页面并利用其功能。

使用附加组件绝不是一种正确的做法，总有一种更简单的方法。

现在从另一个网站进入HTML5好吃的东西

如果您在远程主机发送的标头中有一些发言权，您可以让它们发送“Access-Control-Allow-Credentials：true”标头，这将允许XMLHttpRequest2又称CORS请求处理，您可以看到更多信息关于此主题，请参阅以下网址：http://www.html5rocks.com/en/tutorials/cors/

不幸的是我对CORS没有任何经验，所以我没有任何有用的操作方法或其他任何东西，它非常类似于典型的ajax请求，它只支持跨域，只要远程方允许它（ Control-Allow-Credentials：True）并且系统正确格式化当然这并没有给你带来很多帮助，但希望能为你提供有关制作一个合适系统的信息。

如果你在同一个网站上这样做（所以说同一个网站/域名的不同页面 dasd-sharepoint.dasd.org 那么有很简单的方法来获取这些信息。解析在开始时网页上的所有信息都是一个困难的过程，但这并不是很糟糕。我今天晚些时候会写更多关于这个主题的内容，因为我必须开始。

如何使用Javascript从网页导入简单数据

2 个答案: