How to get the base url on javascript? - 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

Related

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

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

refresh iframe after downloading a blob

I have a filebrowser on my server that uses Azure storage to store the files. The website has a feature where when you click on a file, it'll bring up a details window. I use ViewerJS to display a pdf preview of the file (if applicable), and it all works pretty well. The only problem is that when downloading the preview file, you have to reload the preview iframe manually to get it to display. The relevant php function is:
http://pastebin.com/sAyhsbfi
When this function is completed (I'm using ajax), the $.done function calls
response = JSON && JSON.parse(response) || jQuery.parseJSON(response);
$scope.pdfthingy=response; document.getElementById("viewerjs_preview").contentDocument.location.reload(true);
where response on the first line is set to the full pathname to the pdf preview file, and viewerjs_preview is the id of the relevant iframe.
For some reason, this isn't working, and the iframe isn't reloading itself. How do I make it do that when the blob has finished downloading, and pdfthingy is set?
Is the iframe’s domain the same as your host website’s domain? If not, we cannot access its contentDocument (or contentWindow) in host website’s JavaScript code.
To refresh the iframe, per my understanding you can set its src:
document.getElementById('viewerjs_preview').src = document.getElementById('viewerjs_preview').src;
Please note if the src contains a hash tag, we may need additional work. I’d like to suggest you to check What's the best way to reload / refresh an iframe using JavaScript? for more information.
Base on my experience, It is possible that we changed the IFrame URL, but the IFrame showed the preview contents. In this scenario, I suggest you can create the IFarme dynamic. For example, When you got the Blob URI form Azure storage, You could try to remove the Iframe and create a new. For instance, if Your preview content is shown in the iframe as :
<iframe id="viewerjs_preview" src = "/ViewerJS/#../azure blob storage url /pre-blobname .pdf " width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>
You can try to use this code:
function recreateIFM() {
document.getElementById("viewerjs_preview").parentNode.removeChild(document.getElementById("viewerjs_preview"));
var ifm = document.createElement("iframe");
ifm.id = "viewerjs_preview";
ifm.width = "600px";
ifm.height = "400px";
ifm.src = "/ViewerJS/#../azure blob storage url /new-blobname .pdf";
document.body.appendChild(ifm);
}
Also, you can try MingXu's reference about how to refresh/reload the Iframe.
Regards,
Bill_Sww
I find the answer, the major reason is that we shouldn't use controllers to manipulate DOM.
sentence like document.getElementById("viewerjs_preview").contentDocument.location.reload(true) will not work anymore in angular scope, so you have to a directive to do it. I think the same question with you is and which's answer with most votes dose work well.
I think maybe my question was unclear, and for that I apologize. I'll try to go back and edit it tomorrow.
The solution for me was to, rather than set the src attribute of the iframe using angularjs, directly set it with
document.getElementById("iframe-id").src=/path_where_I_put_the_files/filename
(for reference I use "pdfthingy" to store the filename returned by the ajax call that downloads a blob).
This prevented the iframe from loading a null source before the filename was set.
This is perhaps part of why walkformusle has said that DOM should not be controlled in this manner.

Keep base url constant with Ajax request

I'm looking for a library/extension for JQuery or plain old Javascript that will load partials via ajax but change all relative paths to be relative to the address it's loaded to, not loaded from.
I've explored using an iFrame, but I'm making an extension for Google Chrome and that option is not possible because of several constraints. Using a base tag isn't an option because it would change for the entire page.
Are you looking for a way to get the URL of the page so that you can keep the base URL and dynamically change the path?
The following will get that information
if the URL was something like this
http://www.mywidget.com/Lets/Play/Games
This one here will get the full URL of http://www.mywidget.com/Lets/Play/Games
var urlHref = window.location.href;
This one here will get the Host Name of www.mywidget.com
var urlHostName = window.location.hostname;
This one here will return the pathname of /Lets/Play/Games
var urlPathName = window.location.pathname;

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.

Follow a URL using JavaScript

Is there any way to follow a URL in JavaScript without setting the document.location.href?
I have a page that displays a list of objects and each object may have a file download associated with it, which is accessed via a hyperlink. Clicking the link initiates an AJAX request that ultimately leads to a transient file being generated that can be referenced by a unique and temporary URL.
At the moment when the AJAX call completes, it simply sets the document.location.href to the temporary URL and the file download is initiated. Of course this has the side effect of changing the URL in the browser's address bar, so if the page is refreshed the file is downloaded again rather than the object listing page itself getting refreshed. I guess I could set the URL back to what it was before, but that feels a bit hacky.
Incidentally, I'm using the Prototype JavaScript framework.
you could open a new window with the new url? or try setting an iframe's url to the new url, both should present a file download (the latter being the better option)
You could use a hidden iframe - set the src of that to the file to download.
If you're doing all this just to trigger a file download, it sounds like a good application for using a hidden Iframe. Set the SRC of the Iframe instead, so you don't have to mess with the main page.

Categories