How to make a dynamic link that grabs the domain name? - javascript

I have a link in the phtml file
<a href="mywebsite.com/contact">
I want to write a function that would grab the value of the url and I will have something like
<a href="{mywebsite}/contact">
so if I change the domain - link will get updated automatically. How can I do that?

Roa is correct. You can exclude the domain name and the uri will resolve to the current domain. Do be careful as if you exclude the leading / the browser will resolve as if a relative directory from the current uri. For example, the following when clicked from the root of your domain (say index.php) would resolve to the /contacts page. If this new page contained the same link, then pressed again it would load the /contacts/contacts uri. To summarize, remember your leading /.
contact

Related

How to get the base url on javascript?

I have a page that is available on address below
http://localhost/foo/test/index.html
and
http://localhost/foo/test
(without back slash)
I can place a css file in the parent directory (http://localhost/foo/test/style.css) and add it on the page with
<link rel = "stylesheet" href = "../style.css" />
and browser will successfully load the style sheet.
If we look at window.location, it's http://localhost/foo/test/index.html on the first reference and http://localhost/foo/test on the second reference (i.e. we have an additional path element in the end of the first url and don't have it in the second one).
How does a browser know, that he should make a request to http://localhost/foo/style.css to get style sheet content in both cases?
And how can I get this base url with client-side javascript (or know that test is a directory and not a file)?
For example if I want to know that requests to http://localhost/foo/style.css and ../style.css are the same.
Notice: I can't use server side code for it.
UPD: There is an error in the question. Browser doesn't correctly load the style sheet from url without a slash on the end. Thank you!
Not a full answer for sure but on JS side try window.location object
window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of the current page
window.location.protocol returns the web protocol used (http: or https:)
window.location.assign() loads a new document
source: https://www.w3schools.com/js/js_window_location.asp
You can get base URL of current site by using JavaScript window Object
console.log(window.location.origin)
//gives the current url

How to push user to external (incomplete) URL. i.e google.com NEXTJS

Im trying to push a user to an external url but that problem is that the url is incomplete, for example it may look like this:
google.com
If I used link or even just an tag in Nextjs, it will only link the user to an internal page. I want the user to be redirected to an external page. Here is my Code:
<a href={`${data.link}`}>
<div className={css.visitLinkContainer}>
Visit Link
</div>
</a>
The data.link may have a url that is incomplete like this: google.com. How can I go around this problem?
By default, browsers use relative URLs. You can tell the browser to use an implicit protocol by prepending //.
<a href={`//${data.link}`}>Visit Link</a>
If some of your URLs can contain the protocol (http[s]) you will need to remove it first.
const href = new URL(data.link).host;
<a href={`//${href}`}>Visit Link</a>
Additional considerations when linking to external domains - if you link to an external domain and use target="_blank" you should also set rel="noreferrer" to protect your user's privacy and increase site security.
You could consider using nextjs-redirect libray

how to detect image redirect in js

right now the jsp code will create html like below
<a href="xxxxxx">
<img width="143" height="143" src="http://yyyyyyyy.jpg">
</a>
while loading the page the yyyyyyyy.jpg will be redirect to xxxxx.jpg
Since the yyyyyyyy.jpg is provided by other service provider i dont know whether one image will be redirect or not .
My question is : is there any way i can do in js , to detect a image redirected or not or can i test all url in when document ready to know whether one image url will be redirected.
Thanks
If the URL does not have matching domain, protocol and port, then you can't see if it redirects (because of Same Origin Policy) with JavaScript only, unless it explicitly allows you to via CORS.
You could use a server side language to detect it.

Redirect outside the current domain using javascript

I want to redirect to another website outside of my domain, such as this:
<img src="http://url.to.file.which/not.exist" onerror=window.open("www.google.com","xss",'height=500,width=500');>
I put the above code into a simple html file. However, it keeps appending the file path before "www.google.com" when the pop up show up. Is there a way to remove?
You missed the protocol - http(s):// - before the domain
<img src="http://url.to.file.which/not.exist" onerror=window.open("https://www.google.com","xss",'height=500,width=500');>
Use the full URL: window.open("http://www.google.com"...
To use an absolute url you need to specify the protocol. In your case you want http://.
So just change www.google.com to http://www.google.com

How do I determine an image url string is without a base domain through javascript?

I'm capturing data from an external url using php and throwing it back to my page via ajax to load images. My problem is the external url have some images that are relative("images/example.jpg") so I have to prepend their base domain("http://www.example.com) so I can load it in my page. Problem is some of the images includes a base domain url yet some are in their relative form. Im guessing maybe use regex in my javascript to the determines the string if it have a base("http://example.domain.com") or just a relative("images/") to it. How can I achieve that through regex?
If you can parse it in PHP - I'd do what alanhaggai suggested: parse_url. If you need to go this in javascript: just check if there's a protocol at the start (eg: http:// https:// ftp://). Basically check for :// in the first dozen or so characters of the url.
Parse the URL from within the PHP script using parse_url. If the associative array does not contain the keys host or scheme, you can rewrite the URL to include them.
You won't be able to distinguish between a relative url like "images/blank.gif" and a relative url that has "www.theirdomain.com/images/blank.gif". Who is to say that "www.theirdomain.com" isn't a directory?
If the url does not start with http://, https:// or // it is relative to the url of the page where you scraped them from.

Categories