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

标签 javascript

我遇到的问题似乎有一个简单的答案。我想让我的网站执行从网页中抓取一段文本的简单任务。

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

var str = TextFromWebPage;

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

如果您在页面上查看(尝试使用 Control 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");

目的: 基本上在学校我总是检查时间。因此,我没有做数学运算,而是编写了一个快速的小程序来查看当前时间与当前类(class)结束时间的对比。然而,在我的学校,我们有不同的“字母日”,这意味着不同日子的类(class)长度不同。信日是基于 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-day = 1-7, B-Day = 1-4, C-day = 1-7, D-day = 5-7

最佳答案

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

我得出结论的原因是,当执行 XMLHttpRequest (XHR) 时,浏览器被设计为不访问另一个网站。即使是这样,从技术上讲,他们的网络服务器应该拒绝从另一个域通过 XHR 进行访问,这被称为跨域请求,并且在 javascript 中本身是不可能的。

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

使用插件从来都不是做某事的正确方法,总有更好更简单的方法。

现在介绍从另一个网站执行此操作的 HTML5 好东西

如果您对远程主机发送的 header 有发言权,您可以让他们发送“Access-Control-Allow-Credentials: true” header ,这将允许处理 XMLHttpRequest2 aka CORS 请求,您可以查看更多信息有关此主题的以下网址:http://www.html5rocks.com/en/tutorials/cors/

不幸的是,我没有任何 CORS 经验,所以我没有任何有用的操作方法或其他任何东西,它与典型的 ajax 请求非常相似,只要远程方允许,它只支持跨域( Control-Allow-Credentials: True) 并且系统格式正确,当然这不会真正给您带来很多帮助,但希望能为您提供信息以研究如何制作正确的系统。

如果您在同一个网站上执行此操作(比如同一网站/域的不同页面dasd-sharepoint.dasd.org),那么有一些简单的方法可以获取此信息。通过解析网页上的所有信息在开始时可能是一个困难的过程,但它不应该是可怕的。我将在今天晚些时候写更多关于这个主题的文章,因为我必须开始。

关于javascript - 如何使用 Javascript 从网页导入简单数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16465358/

相关文章:

javascript - ajax 调用期间的回发

javascript - 使用客户端 JavaScript 将文件附加到 PDF?

javascript - 使用 Javascript 搜索 JSON

javascript - Google Places API 地点类型问题

javascript - 如何使用一个提交按钮更新 2 个表单

javascript - Jquery - 无法删除动态创建的元素

javascript - Node.js Express 4.0 中 res.render 回调参数的用途是什么?

javascript - 来自 span 的 Jquery 搜索字符串无法正常工作

javascript - FullCalendar 未显示在 Asp.Net Core Razor View 中

javascript - 'variable1/variable2 = NaN' 其中两个变量都是数字 2