修改

Question

我想咨询一下实现以下目标的最佳方法：

我通过请求模块请求网页，然后我将主体扔到了 jsdom.env（）功能。我最终想要的是在文档中添加一些div，脚本和链接元素，并最终呈现给用户。（基本上是修改请求的远程服务器html的代理）

我最初做的是制作一个看起来如下的ejs（testenv.ejs）：

<!DOCTYPE html>
<html>
<head>
   <%- head %>
   <link rel='stylesheet' href='/stylesheets/style.css' />
   <link rel='stylesheet' href='https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css' />
</head>
<body>
   <%- body %>
   <div id="context-menu-container">
       <div id="context-menu-header"></div>
       <div id="context-menu-options"></div>
       <div id="context-menu-steps"></div>
   </div>
   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
   <script src="/javascripts/test.js"></script>
</body>
</html>

我从我的路线渲染此视图如下（proxy.js）：

var express = require('express');
var router = express.Router();

var jsdom = require('jsdom');
var request = require('request');
var jar = request.jar();


/* GET users listing. */
router.get('/', function(req, res, next) {
    var url = req.param('url');
    if (url) {
        request({
            url: url,
            jar: jar
        }, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                jsdom.env({
                    html: body,
                    scripts: [
                        'https://code.jquery.com/jquery-2.1.4.min.js'
                    ],
                    done: function (err, window) {
                        var $ = window.jQuery;
                        res.render('testenv.ejs', { head: $('head').html(), body: $('body').html() })
                    }
                });
            }
        });
    }
    else {
        res.send("No url param specified...");
    }
});

module.exports = router;

我使用这种方法的问题是/stylesheets/style.css和/javascripts/test/js没有下载到客户端，它们是从远程服务器而不是从节点服务器请求的。我试图在我的视图中调整我包含的javascript和css文件的顺序，并注意到如果我将css文件放在<%- head>部分之上，他们就会开始正确加载。至于javascript文件，我不得不将它们移动到头部（由于显而易见的原因，例如延迟页面的渲染，我没有做的事情）但是对于javascript文件我遇到了另一个问题。将它们移动到头部后，/javascripts/test/js被正确加载，因为它是从节点服务器而不是从远程服务器请求的，但问题在于它取决于 jquery-ui ，由于某种原因正在加载，但库的功能无法识别，就好像我只在 jquery-ui 库之后加载了/javascripts/test/js。

除了我描述的问题之外，我还想过一个场景，我请求的网页与我尝试加载的网页具有相同的css / js文件名，或者可能使用相同的框架（bootstrap / jquery但是可能导致冲突的不同修订版。可以将我加载的css / js文件的名称更改为独特的，但我不想将其留给运气，因为可能其他一些网站将具有相同的文件名机会。这让我觉得我的方法不是防弹而不是最好的，所以我想问一下你们认为我应该做些什么来实现我的目标。

修改

我在这里几乎走到了尽头我现在一直在寻找可能导致我的问题的最后一周，但是找不到任何有用的东西。
我还注意到在使用www.google.com提供url查询参数时进行调试时，我得到了在我的快递应用中处理404找不到路由的中间件，尽管它成功地部分呈现了页面。这就是呈现的页面最终看起来像： google rendering

这就是我的app.js的设置方式 - webstorm default（app.js）：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');


var routes = require('./routes/index');
var users = require('./routes/users');
var fxp = require('./routes/fxp')

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);
app.use('/proxy', proxy); // proxy is the the js file above that exports the route that handles the requests to the path /proxy/...

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

module.exports = app;

JSdom附加到body并呈现为ejs视图

修改

0 个答案: