获取一个 javascript 派生的 dom-tree 元素

Get a javascript derived dom-tree element

本文关键字：派生 dom-tree 元素 javascript 一个 获取      更新时间：2023-09-26

我的目标是获取一个元素<div id="calender">以及浏览器中显示的元素中的所有内容。关键是普通的get-html-source不会做这件事。我正在寻找的元素在 php-function file_get_contents 的 html 输出中不存在。

我试图通过 php 和 xpath byt 在 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）。如果我使用 Chromes 工具 （F12） 浏览 html 源代码，我可以在那里找到日历。不希望这些信息通过javascript或php等获得。

如果您阅读指向 （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 文件扩展名的 url 的调用，例如 http://www.lomarengas.fi/api-ib/search/availability_data.json?serviceNumber=9192&currentMonthFirstDate=&duration=7。

我觉得我走在正确的轨道上（异步javscript调用以使用json数据生成html），我寻找不是通常库文件的javascript代码或文件（jquery，bootstrap等）。

我偶然发现了那个文件：http://www.lomarengas.fi/resources_responsive/js/destination.js。它包含异步生成日历的代码。

博士

日历确实是异步生成的。

您无法在 PHP 中获取带有curl或file_get_content的完整 html，并且无法使用 ajax 代码访问它（由于同源策略）。

顺便说一下，您应该联系该网站，看看您是否可以在他们同意的情况下通过 PHP 访问他们的 api。

希望它能帮助您了解整个事情...

要获得<div id="calender">，您可以使用下一个代码（jquery）：

<div id="calender"></div>
<script>
$("#calendar").click(function(){
alert('calendar was clicked');
});
</script>

如果我理解正确的话。我认为您需要适当的 php 响应在 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

相关文章：