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
Related
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.
I got this situation:
I generate static HTML pages through Jekyll, unfortunately, I set the config.yml _baseUrl = / , so when it's down, the href in the index.html becomes:
my first post
When I click the link in index.html:
http://localhost:4000/index.html
it turns out to be a reserve address:
http://0.0.7.224/01/10/first-posts.html
Then I had some tests and found out that //1 represent 0.0.0.1, and when a number comes after // in the URL, it represents a reserve IP address.
It works right in Safari. Why does Chrome act like that?
Use slash and dot (/.) before your URL address, like this:
this links to //1
According to http://www.w3.org/Addressing/rfc1808.txt
5. Examples and Recommended Practice
Within an object with a well-defined base URL of
Base: <URL:http://a/b/c/d;p?q#f>
the relative URLs would be resolved as follows:
5.1. Normal Examples
[…]
//g = <URL:http://g>
it point out //2016 represent net_loc not path.
I am working with angularjs in html 5 mode. Which appears to take control of all href's on the page. But what if I want to have a link to something within the same domain of the app but not actually in the app. An example would be a pdf.
If i do <a href="/pdfurl"> angular will just try to use the html5mode and use the route provider to determine which view should be loaded. But I actually want the browser to go to that page the normal way.
Is the only way to do this is to make a rule with the route provider and have that redirect to the correct page with window.location?
in HTML5 mode, there are three situations in which the A tag is not rewritten:
from the angular docs
Links that contain a target attribute. Example: link
Absolute links that point to a different domain Example: link
Links starting with '/' that lead to a different base path when base is defined Example: link
so your case would be 1. add target="_self"
As of Angular v1.3.0 there is a new rewriteLinks configuration option for the location provider. This switches "hijacking" all the links on the page off:
module.config(function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
rewriteLinks: false
});
});
While disablig this behavior for all links may not be your intention, I'm posting this for others who, like me, want to use $location in html5 mode only to change the URL without affecting all links.
If you don't want Angular to take control of the href. Place a target attribute on the link.
So PDF will by pass the html5mode and the routeProvider and the browser will just go to that url.
Other solution. All links will work normally (reload page). Links marked by ng-href="/path" will play on pushState. Small JS hack help with it.
.config(["$locationProvider", function($locationProvider) {
// hack for html5Mode customization
$('a').each(function(){
$a = $(this);
if ($a.is('[target]') || $a.is('[ng-href]')){
} else {
$a.attr('target', '_self');
}
});
$locationProvider.html5Mode(true);
}])
Is it possible to make a link that would normally go to an id:
<a href="http://example.com/page#someid">
instead go to a class:
<a href="http://example.com/page.someclass">
Would the page scroll wildly up and down, trying to reach all the elements with that class, or would it just do nothing?
It would do nothing, except look for a file called "page.someclass" at the server and most probably yield a 404. Please refer to the URL spec because you're wildly confusing CSS selectors with the 'hash' part of the URL.
Why don't just try it?
JS FIDDLE DEMO
If you are using a class als anchor link, your browser tries to open it as url, like in the example named above index.content. Because he is not able to find it, you will receive an 404 not found or 403 forbidden error.
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.