如何将javascript应用于模拟浏览器的html_Javascript_Html_Node.js_Scala_Headless Browser

如何将javascript应用于模拟浏览器的html

javascript html node.js scala

如何将javascript应用于模拟浏览器的html,javascript,html,node.js,scala,headless-browser,Javascript,Html,Node.js,Scala,Headless Browser,我已经在互联网上搜索过如何“创建”一个简单的无头浏览器，因为我想知道浏览器内部是如何工作的。我想实现一个简单的无头浏览器我的意思是：假设您有一个html字符串和一个javascript字符串，这两个字符串都是对服务器的HttpRequest的结果；如何将javascript应用到html字符串中例如：我向X服务器请求html源文件，并在响应中获得以下信息： <html> <head> <script type="text/javasc

我已经在互联网上搜索过如何“创建”一个简单的无头浏览器，因为我想知道浏览器内部是如何工作的。我想实现一个简单的无头浏览器

我的意思是：假设您有一个html字符串和一个javascript字符串，这两个字符串都是对服务器的HttpRequest的结果；如何将javascript应用到html字符串中

例如：我向X服务器请求html源文件，并在响应中获得以下信息：

<html>
    <head>
         <script type="text/javascript" src="javascript.js">
    </head>
    <body>
        <p id="content"></p>
    <body>
</html>

如何将javascript.js文件的内容应用到html文件中？我应该遵循的步骤与此类似：

将html源解析为Javascript DOM元素

将javascript应用于DOM

我想用Java、Scala或Node.js来实现。 Idk如果你明白主要的意思。。。我是拉丁美洲人，我的英语不太好。对不起。如果不明白，请在评论中告诉我，我会编辑我的帖子

编辑：换句话说，我想做的是像这样的伪方法/函数（在伪代码中）：

如果你正在寻找一个无头浏览器，我肯定你知道。PhantomJS是一款基于苹果浏览器引擎的无头浏览器

你要求的太多了。你需要：

运行javascript的javascript运行时（如v8）

一个web引擎，用于将html及其定义的文档对象模型变为现实

这两种方法都需要数百万行代码才能执行

我的建议是将您的程序与PhantomJS集成。PhantomJS是一个无头webbrowser和javascript环境。如果您使用的是scala，请启动phantomjs的子进程，并通过std i/o向其发送消息。PhantomJS的JS部分意味着您可以通过它的javascript API使用它，因此您还必须编写JS脚本来处理来自std i/o的消息。它没有文档化，但是phantomjs有一个

system.std.in

和

system.std.out

API来处理消息

这需要JVM之外的大量工作和额外资源才能使其正常工作。我看到您正在使用scala，因此您可以使用一个更简单的解决方案来解析和修改HTML文档，但是您必须使用scala（或java）进行转换

实际上，现在我想起来了，您应该使用paired with nodejs。JSDom实现domapi而不实际呈现它，这可能是您所需要的。jsdom是为无头节点而设计的。如果您想同时使用scala和node，还可以使用node的std i/o，并让它向JVM发送消息和从JVM发送消息

下面是使用

jsdom

评估javascript和修改html的概念证明。这是一个非常简单的解决方案，对于给定的任务来说，它是资源效率最高的（这是一项艰巨的任务）

我用一个非常简单的概念证明为您做了一个简单的介绍。要运行gist，请执行以下操作：

git clone https://gist.github.com/c8aef41ee27e5304e94f6a255b048f87.git apply-js-to-html
cd apply-js-to-html
npm install
node example.js

以下是示例的要点：

const jsdom = require('jsdom');

module.exports = function (html, js) {
    return new Promise((resolve, reject) => {
        jsdom.env(html, (error, window) => {
            if (error) {
                reject(error);
            }
            try {
            (function evalInContext () {
                'use strict';
                const document = this.document;
                const window = this.window;
                eval(js);
                resolve(window.document.documentElement.innerHTML);
            }).call(window);
            } catch (e) {
                reject(e);
            }
        });
    });
}

这是正在使用的模块

const applu = require('./index');

const html = `
    <html>
        <head></head>
        <body>
            <p id="content"></p>
        <body>
    </html>
`;

const js = `document.getElementById("content").innerHTML = "Hello";`

applu(html, js).then(result => {
    console.log('input html: ', html);
    console.log('output html: ', result);
}).catch(err => console.error(error));

const applu=require（'./index'）；
常量html=`

`;
const js=`document.getElementById（“内容”）.innerHTML=“Hello”`
applu（html，js）。然后（result=>{
log（'input html:'，html）；
log（'output html:'，result）；
}).catch（err=>console.error（error））；

下面是代码的输出：

input html:  
    <html>
        <head></head>
        <body>
            <p id="content"></p>
        <body>
    </html>

output html:  <head></head>
        <body>
            <p id="content">Hello</p>


</body>

输入html:

输出html:
您好

jsdom

创建一个无头

窗口

和

文档

环境，该环境不会呈现任何内容。您可以使用

eval

并使用

window

作为

此

值。我还声明了

document

和

window

再次将要求值的js将在范围内包含这些变量

这只是一个基本的POC，您可以自己解决细节。

JavaScript将包含在页面中。只要引用JavaScript文件，它就会执行。在上面的示例中，

content

将变成

Hello

。根据加载文件的方式，您可能需要在HTML DOM中将脚本包含移动到

下面，或者使用类似jQuery的

$.onready（）

的内容，以确保在尝试修改元素之前该元素确实存在：），但是如何发送HTML和js文件，例如，Nashorn Javascript Java 8引擎并运行/更新html内容？我可以在Java8和Node.js之间进行选择，但我不知道如何做到这一点。如果有人能给我一个简单的例子，我真的很感激。可能的重复是：你是想编写自己的浏览器来学习，还是想在服务器上针对某个项目的HTML执行JavaScript（你想避免编写自己的DOM引擎）？我想做的是创建自己的“无头浏览器”，因为PhantomJS、CasperJS和其他，并没有我需要的很多特性（取消某些http请求等）。有了这个无头浏览器，我想获得某些信息，这样我就可以毫无问题地浏览。顺便说一句，我已经使用PhantomJS和CasperJS几个月了（少了6个）。谢谢你的回答！！我按照你的建议做了尝试，我。我发现的问题是很难实现小的结果（想象一下，如果我想在一小段时间内处理数千个请求xD）。我想我会寻找另一种解决方案。您可以尝试使用node的API来加速多线程的工作。不过，对于一个全面的解决方案来说，此解决方案可能是资源密集度最低的解决方案

const applu = require('./index');

const html = `
    <html>
        <head></head>
        <body>
            <p id="content"></p>
        <body>
    </html>
`;

const js = `document.getElementById("content").innerHTML = "Hello";`

applu(html, js).then(result => {
    console.log('input html: ', html);
    console.log('output html: ', result);
}).catch(err => console.error(error));

input html:  
    <html>
        <head></head>
        <body>
            <p id="content"></p>
        <body>
    </html>

output html:  <head></head>
        <body>
            <p id="content">Hello</p>


</body>