获取一个由JavaScript派生的DOM树元素。

3
我的目标是获取一个元素<div id="calender">及其所有内容在浏览器中显示。问题在于普通的get-html-source无法做到这一点。我要查找的元素在php函数file_get_contents的html输出中不存在。
我尝试使用php和xpath来获取源代码,借助http://us3.php.net/manual/en/class.domxpath.php提供的工具可以获取html页面中任何标签中的内容。但是问题可能在于该元素(一个日历)是由JavaScript形成的,无法被服务器端的php捕获。那么,有没有办法通过JavaScript来捕获这样的元素(div)呢?
有针对此类问题的JavaScript脚本示例(如果我理解正确的话),但目前我无法使简单的JavaScript代码起作用。下面的示例显示了我如何构建代码。这里的$ajax只是我尝试解决问题的其中一种方法,但不知道如何使用它。我无法弄清楚为什么简单的JavaScript函数不起作用(只是测试目的)。
 <!doctype html>
    <html lang="fi">
    <head>
    <meta charset="utf-8">
    <title>load demo</title>
    <style>
    body {
    font-size: 12px;
        font-family: Arial;
    }
    </style>

    <script type="text/javascript">
        function ok {
        alert "OK";
        }
    function get_html (my_html){
        alert "OK";
        var l = document.getElementById('my_link').value;
        alert l;
        alert my_html;
        var url = my_html;
        $.ajax({
        url: url,
        dataType: 'html'
        success: function(data){
                //do something with data, which is the page 1.html
            var f = fs.open("testi_kalenteri.html", "w");
            f.write(data);
            f.close();
            alert "data saved";
            }

        });
    }
    </script>

    </head>
    <body>
    <p id ='my_link' onclick='get_html("lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192")'>html-link</p>
    <p id ='ok' onclick='ok()'>show ok</p>
    </body>
    </html>

简而言之,我有一个链接指向一个网页,在该网页上显示了一个(预订)日历,但是在“正常”的源代码中却缺少了这个日历,使用file_get_contents(php)无法获取。如果我使用Chrome工具(F12)浏览HTML源代码,我可以在那里找到日历。我希望通过JavaScript或PHP等方式获得该信息。

你能分享一下你试图获取日历的网站吗? - tenor528
当然,这是我所说的页面的链接示例 www.lomarengas.fi/mokit/kuusamo-rukasaukko-9192 - user2857221
同样的内容,语言更加通俗易懂:http://www.lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192 - user2857221
2个回答

2
如果你阅读所指页面的源代码(http://www.yllaksenonkalot.fi/booking/varaukset_akas.php),你会发现日历是通过一个iframe加载的。
而该iframe指向以下位置:

http://www.nettimokki.com/bookingCalendar.php?id_cottage=3629&utm_source=widget&utm_medium=widget&utm_campaign=widget

“事实上,这才是日历的真正来源......”
根据您对此答案的评论进行编辑:
考虑到真实链接:http://www.lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192 如果日历不是生成的HTML的一部分,那么它肯定是异步生成的(在javascript中,客户端)。
基于这个假设,我重新检查了源代码。在我的浏览器开发者工具中,在网络部分,您可以监视加载的文件,我寻找了调用服务器的呼叫(除了资源调用之外:图像、样式表...)。
然后,我注意到调用多个网址的json文件扩展名,如http://www.lomarengas.fi/api-ib/search/availability_data.json?serviceNumber=9192&currentMonthFirstDate=&duration=7
我感觉我走在了正确的轨道上(使用异步JavaScript调用生成带有JSON数据的HTML),我寻找的JavaScript代码或文件不是通常的库文件(如jQuery、Bootstrap等)。
我偶然发现了这个文件:http://www.lomarengas.fi/resources_responsive/js/destination.js。它包含了异步生成日历的代码。
简而言之,日历确实是异步生成的。
你无法通过curlfile_get_content在PHP中获取完整的HTML,也无法通过AJAX代码访问它(由于同源策略)。
顺便说一下,你应该联系网站,看看是否可以得到他们的同意通过PHP访问他们的API。
希望这能帮助你理解整个过程...

抱歉,我用所有的信息把你搞糊涂了,但是 iframe 的参考并不是问题。它只是为了测试我的 JavaScript。有问题的网站链接是 www.lomarengas.fi/en/cottages/kuusamo-rukasaukko-9192。 - user2857221
没问题,但你应该更新你的问题,指向正确的页面。那样我的回答才会有意义,... - Lex Lustor
令人印象深刻的搜索工作,谢谢!虽然结果不完全是我所希望的...但显然除了联系该网站外,没有其他更多的事情可做。 - user2857221
我认为我仍然有一个使用JSON文件扩展名获得所需内容的想法。但是让我们看看它如何进一步表现。 - user2857221

1
要获取 <div id="calender">,您可以使用下面的代码(jquery):
<div id="calender"></div>
<script>
$("#calendar").click(function(){
alert('calendar was clicked');
});
</script>

如果我理解你的意思正确的话,我觉得你需要在php文件中返回适当的响应,并附上一些正确的代码:

// json_handler.php
<?php


if (is_ajax()) {

    $return = $_POST;

    $return["ok"]="ok";

    $return["json"] = json_encode($return);
    echo json_encode($return);

}


function is_ajax()
{
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

这是嵌入在HTML中的脚本:

    <html>
    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>
    <a id="click">click</a>
    <script>
$("document").ready(function(){
    $("#click").click(function(){
        var data = {
            "request": "request"
        };
        data=$.param(data);
       // alert(data);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "json_handler.php",
            data: data,
            success: function(data) {
            // here you will see echo respond from your php json_handler.php
            // also you can add here more javascript (jquery code) to change your page after respond
            alert();
            }
        });
        return false;
    });
});
    </script>
    <body>
    <html>

http://www.w3schools.com/jquery/jquery_ajax_intro.asp


据我所见,使用ajax的主要目的是引用ajax源代码。还有一些其他修复措施。谢谢,我会尝试的!这是我第一次尝试使用ajax。但即使这解决了一个关于ajax代码的技术问题,我仍然不知道我如何解决我的主要问题(关于HTML源代码)。 - user2857221
是的。最佳实践是使用 alert('some alert text'); 而不是 alert "some alert text"; - Yevhenii Shashkov
我仍然不确定这是否有效,因为在加载时.calendar div会填充一个脚本。 AJAX只会获取html文件,这就是该div的外观:`
`
- tenor528
如果您想使用id选择器选择div,则可以使用以下代码:$("#calendar").click(function(event){ alert(); }) 如果您想使用类名选择div,则可以使用另一个jquery选择器:$(".calendar") - Yevhenii Shashkov

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接