I wanted to consult on what will be the best approach to achieve the following:
I'm requesting a webpage via the request module, then I throw the body to the jsdom.env() function. What I want in the end is to add a few *div*,* script*, and *link *elements to the document, and in the end render it to the user. (basically a proxy with modifying the requested remote server html) What I initially did was to make an ejs that looks as follow: <!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> I render this view from my route as follows: 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; The problem I have with this approach is that /stylesheets/style.css and /javascripts/test/js are not downloaded to the client, they're being requested from the remote server and not from the node server. I tried to fiddle with the order of the javascript and css files I include with in my view and noticed that If I put the css files above the <%- head> part they're begin loaded correctly. As to the javascript files I had to move them to the head as well (something I do not with to do for obvious reasons like delaying the rendering of the page) but as to the javascript files I encountered another problem. After moving them to the head the /javascripts/test/js was being loaded correctly because it was requested from the node server and not from the remote server anymore but the problem is that it depends on the jquery-ui, which for some reason was being loaded but a function of the library was not recognized as if I loaded the /javascripts/test/js only after the jquery-ui library. Beside the problems I described, I've thought about a scenario where I request a webpage that has the same css/js file name with the ones I try to load or maybe same framework used (bootstrap/jquery but with different revision) which could lead to conflicts. It's possible to change the name of the css/js files I load to something unique, but I don't want to leave it to the hands of luck because maybe some other website will have the same file names by chance. That lead me to think that my approach isn't bulletproof and not the best, so I want to ask what you guys think I should do to achieve my goal. -- Job board: http://jobs.nodejs.org/ New group rules: https://gist.github.com/othiym23/9886289#file-moderation-policy-md Old group rules: https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines --- You received this message because you are subscribed to the Google Groups "nodejs" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/nodejs/959c425a-ea17-4a8c-8bd0-918fb2c1a9d8%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
