For example, right now I'm at http://example.com/practice
If I have a link within the generated page: Click here, I'm directed to http://example.com/5.
Now I know that this is the usual method of relative path. But what I actually need here is so that the link will take me to http://example.com/practice/5 without I need to specify practice or example.com on that page. Preferred if not using any Javascript if possible, but if it is not possible, then I guess I'll have to use Javascript then.
I've already tried Click here and Click here and they still work exactly like "5".
Please help. Thanks.
You can do something in your javascript where you grab the current location with window.location.href (there may be a better way depending if you're using any js frameworks). For example for this page, window.location.href returns https://stackoverflow.com/questions/38284340/how-to-embed-path-to-the-current-path-at-anchor-href
You could then do something like this
var baseUrl = window.location.href;
var aTag = document.querySelector(<selector for your anchor tag>);
aTag.setAttribute("href", baseUrl + "/" + <url we want to go to>);
So essentially we grab our current location, change the href of the tag we want to navigate to, then add whatever subroute we want to go to at the end. Kind of a weird way to do it, but like I said earlier, there may be an easier way if you're using react or angular or some other framework or library.
Related
I just have created primitive html page. Here it is: example
And here is its markup:
www.google.com
<br/>
http://www.google.com
As you can see it contains two links. The first one's href doesn't have 'http'-prefix and when I click this link browser redirects me to non-existing page https://fiddle.jshell.net/_display/www.google.com. The second one's href has this prefix and browser produces correct url http://www.google.com/. Is it possible to use hrefs such as www.something.com, without http(s) prefixes?
It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.
Consider what the browser does when you link to this:
href="index.html"
What then would it do when you link to this?:
href="index.com"
Or this?:
href="www.html"
Or?:
href="www.index.com.html"
The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.
Note that you don't need the http: part, you can do this:
href="//www.google.com"
The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.
You can omit the protocol by using // in front of the path. Here is an example:
Google
By using //, you can tell the browser that this is actually a new (full) link, and not a relative one (relative to your current link).
I've created a little function in React project that could help you:
const getClickableLink = link => {
return link.startsWith("http://") || link.startsWith("https://") ?
link
: `http://${link}`;
};
And you can implement it like this:
const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>
Omitting the the protocol by just using // in front of the path is a very bad idea in term of SEO.
Ok, most of the modern browsers will work fine. On the other hand, most of the robots will get in trouble scanning your site. Masjestic will not count the flow from those links. Audit tools, like SEMrush, will not be able to perform their jobs
Inside a very simple HTML-only website, how to make this happen :
On a page Mysite.com/ABC/mypage.html
Action ; visitor clic on a link, goes to
Mysite.com/XYZ/mypage.html
So with an easy text link like , change the actual pages's previous directory only ?
Could be good easy solution for easy language switch
Is this what you are looking for?
Text
This is because URLs which start with a forward-slash (/) are called 'absolute paths', and refer to the root, i.e. relative to mysite.com
Alternatively, if you want to affect the next directory up only, you can use the following:
Text
This is because .. refers to the parent directory. So if you had a page at example.com/folder1/ABC/mypage.html and you wanted that page to link to example.com/newpages/XYZ/mypage.html, you could do:
Text
There are lots of examples and tutorials online, e.g. https://www.w3.org/TR/WD-html40-970917/htmlweb.html
You can do this:
<a href="../XYZ/mypage.html">
You can change your file name to index.html, or anything else that you set for the default page names in your web browser and you could simply do:
<a href="../XYZ/">
For HTML-only, I believe Kamyar Infinity's comments regarding rewrite rules are your best bet. However, if you're considering using PHP, this might do the trick. It will print the current file name to the after of the desired directory:
text
Alternatively we can use javascript to manipulate the href for this link (without using PHP at all):
text
<script>
//Get current Pagename
var currentPage = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
//Change href for link
document.querySelector('a[href="/xyz/"]').setAttribute('href', '/xyz/'+ currentPage);
</script>
after one hour of browsing I decided to ask this question here.
Is it possible to add css code to an url, for example to change the background color?
Someting kike this: http://yahoo.com (command)style=background-color:#000000;
or similar. Or is it possible to create an url where the site loads with a modified css without using a Chrome extension or similar?
Thanks for help!
No. You can't (using standard software) modify a document by adding anything to that document's URL (unless the server recognises the addition to the URL (e.g. if it was a query string) and returns a different document based on it).
If it was possible then browsers would be exposing every site to XSS attacks.
A browser extension would be the only way to do this client side (but would render users of that extension vulnerable to XSS attacks).
You could also use a bookmarklet in a two stage approach (1. Visit page. 2. Click to activate bookmarket.).
it's possible in a way, but probably not how you imagined it (see Quentin's answer to understand why).
with javascript - note that this is not a 'native' feature so you will have to do a little walk-around. look at the following example:
function get_query_param(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
window.onload = function() {
var bgcolor = get_query_param('bgcolor');
if (bgcolor.length) {
document.getElementById("xyz").style["padding-top"] = "10px";
document.body.style.backgroundColor = bgcolor;
}
}
now try browsing your page with ?bgcolor=red at the end of the url.
of course that's a demonstration of the main idea, you will have to implement each css property you wish to modify using this approach.
hope that helps.
Yes it is possible. Follow this:
Yahoo
is it possible to create an url where the site loads with a modified css
Solution:
Add something like this : ?v=1.1
<link rel="stylesheet" href="style.css?v=1.1">
When you change the css change the version like this: ?v=1.2 after then your browser will load newly updated css. Note that you can replace to any number each time you change the css.
This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.
If you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.
I am using the latest ModX Revolution CMS which has both a dynamically created menu and content.
I have my menu set up as such:
About Us
And, in my content:
<a name="aboutus" id="aboutus"><h1>About us</h1></a>
But upon clicking the links I just get 404s.
Is there a problem with this being dynamically created content?
(PS: FURLs are active)
EDIT: Not a proper answer but got it working by using:
var pathname = window.location.pathname;
To add the current pages url to my anchor links.
Would still like to know the proper way of doing this
To add the current page url to your anchor in the proper modx way, your link should be something like this:
<a href="[[*alias]]#aboutus">
If FURLs are NOT active you can add ".html" to your link:
<a href="[[*alias]].html#aboutus">
Hope this helps...
Check your base url meta tag, & see if you are using [[++site_url]] or [[++base_url]] & then check if they are correct in the system settings.
The reason it was not working for me is that I was not using FURLs so my URLs looked like:
mysite.com/index.html?id=2
It was the PHP vars that were not being included in the url and thus throwing a 404.
I amended this by using JQuery to add the entire path name to my links:
var fullurl = window.location.href
Is there a way to have a button/link and when you click on it, it will take the current page location and download an HTML version of it? It will be an iframe too, and the link should just download the iframe's content. Thanks!
The following JavaScript will take the current document and provide it as a download link. Tested in Chrome, not sure about others. Keep in mind that IE has limits for DataURI size. Furthermore, you'll lose your external images/CSS/etc, unless you inject the base tag into the top of the head tag (or find some other way to roll in resources):
// create the link to trigger download
// you could alternatively fetch an existing tag and update it
var a = document.createElement('a');
// send as type application/octet-stream to force download, not in browser
a.href =
"data:application/octet-stream;base64," +
btoa("<html>"+ document.getElementsByTagName('html')[0].outerHTML +
"</html>");
a.innerText = "Download this page";
// put the link wherever you want
document.body.appendChild(a);
EDIT: also doesn't provide a filename, or a .htm at the end of the download link... hmph. Those things can only really be provided by the Content-Disposition header, and that requires sending a request off to the server, so... not a fantastic user experience, but the easiest way to get the exact page state as the user sees it.
All you need is a simple script that takes the file name as a param and generates a zip. Here is an example in PHP.