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 **divs** to the body element of the
returned html from the request as well as few **scripts** and **links**
tags to the head of the html document, and in the end render it to the user.
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 rendered this view from my route as follow:
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.
In my app.js I have the public folder where all my css and js reside as a
static resource `app.use(express.static(path.join(__dirname, 'public')));`
Beside the problem 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 just 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/22aca1a0-8d63-49aa-bb96-1126253ce768%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
