javascript - PhantomJS 运行 JS 的 HTML 页面结果中如何获取嵌入的 JSON 对象并将其传递给 java 代码？

Question

我使用了 this answer 中描述的 JS 脚本代码，但我不想将 html 结果页面保存在 html 文件中。我想从 <div class="rg_meta"> 中提取 Json 对象并将它们传递给 Java 代码。

在搜索中，我发现使用“文档”，但出现未定义的错误。我是 PhantomJS 的新手，在 Java 中使用 JSON。

var page = require('webpage').create();
var fs = require('fs');
var system = require('system');

var url = "";
var searchParameter = "";
var count=0;

if (system.args.length === 4) {
    url=system.args[1];
    searchParameter=system.args[2];
    count=system.args[3];
}

if(url==="" || searchParameter===""){
    phantom.exit();
}

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.120 Safari/537.36';

page.zoomFactor = 0.1;

page.viewportSize = {
  width: 1920,
  height: 1080
};

var divCount="-1";
var topPosition=0;
var unchangedCounter=0;


page.open(url, function(status) {
console.log("Status: " + status);
if(status === "success") {

    window.setInterval(function() {

        var newDivCount = page.evaluate(function() { 
            var divs = document.querySelectorAll(".rg_di.rg_bx.rg_el.ivg-i");
            return divs[divs.length-1].getAttribute("data-ri");
        });

        topPosition = topPosition + 1080;

        page.scrollPosition = {
            top: topPosition,
            left: 0
        };

        if(newDivCount===divCount){
            page.evaluate(function() {
                var elems=document.getElementByClassName("rg_meta");
                console.log(elems.length);
                var button = document.querySelector("#smb");
                if(!(typeof button === "undefined")) {
                    button.click();
                    console.log('Clicked');
                    return true;
                }else{
                    return false;
                }
            });

            if(parseInt(unchangedCounter,10) === parseInt(count,10)){
               /* var path = searchParameter+'.html';
                fs.write('seedHtml/'+path, page.content, 'w');
                console.log('printing html');*/
                phantom.exit();
            }else{
                unchangedCounter=unchangedCounter+1;
            }
        }else{
            unchangedCounter=0;
        }
        divCount = newDivCount;

    }, 500);
}else{
    phantom.exit();
}
});

Answer 1

HTML5 data Attributes

幸运的是，HTML5 引入了自定义数据属性。

<div id="msglist" data-user="bob" data-list-size="5" data-maxage="180"></div>

自定义数据属性:

是字符串——您可以存储任何可以进行字符串编码的内容，例如 JSON。 类型转换必须在 JavaScript 中处理。仅当不存在合适的 HTML5 元素或属性时才应使用。

JavaScript Parsing #1:

每个浏览器都允许您使用 getAttribute 和 setAttribute 方法获取和修改数据属性，例如

var msglist = document.getElementById("msglist");

var show = msglist.getAttribute("data-list-size");
msglist.setAttribute("data-list-size", show+3);

它可以工作，但只能用作旧浏览器的后备。

JavaScript Parsing #2:

从1.4.3版本开始，jQuery的data()方法解析了HTML5数据属性。您不需要指定数据前缀，因此可以编写等效代码:

var msglist = $("#msglist");

var show = msglist.data("list-size");
msglist.data("list-size", show+3);

希望对您有所帮助!!!