Keep base url constant with Ajax request - javascript

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;

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

Javascript Relative Url Doesn't include Id

When I make an ajax request using JQuery, the relative url doesn't include the last part of the url. I have the following urls:
/Question/100
/Question/100/AddComment
I am trying to send an ajax request from the first page to the second page. The jquery I am using is:
$.ajax({
url: 'AddComment',
type: 'POST'
});
This ajax request goes to the url
/Question/AddComment
To fix the issue I can just do window.location.href + "/AddComment" However I was wondering why exactly does the relative url not include the Id value? Also is there a way to solve this issue without using window.location.href?
This has nothing to do with JavaScript or jQuery, it's just how browsers interpret relative URLs. And for good reason.
The browser doesn't know or care what the "Id" is in the URL. It just knows that you are requesting a resource (100) at the end of a path (/Question/). Any URL relative to that resource is going to be requested relative to that same path. So requesting only AddComment will result in the browser looking for AddComment in the /Question/ path.
Consider what would happen if this wasn't the case. What if you're on the page index.html and you click on a link to about.html. Would you expect or want the browser to navigate to /index.html/about.html? Of course not.
You just need to specify the correct URL. If you can write the full absolute path, great. If you can dynamically output it from server-side code (like the #Url.Route helper in ASP.NET MVC, for example), also great. If you can dynamically build it in JavaScript either based on known base values or from examining the current URL, that's likely just as good as long as you cover any edge cases you might encounter and whatnot. But ultimately you need to specify the URL.

JavaScript: Read URL of parent page

I have a page that is loaded inside. The application including this page is located on another domain. So the domain of my page and the application rendering it inside an iframe are located on different domains. The page inside iframe reads the URL it is loaded from to store in the database. The page loading has a hash in the URL.It is like:
https://www.somedomain.com/organizers/list/#type=current&sort=bydate
I am reading the URL from mypage. It is located on:
https://www.someotherdomain.com/organizers/#sample
var _url = document.referrer
The above code gives me the URL but only till "https://www.somedomain.com/organizers/list/", "#type=current&sort=bydate" is missing. I need that else this code is of no use to me. Is there a way I can read the complete URL without missing any segment?
like this
var _url = window.location;
This is by design. The browser will give you the referrer which is the URL where the user came from, however the #hashmark is technically (by its original design) a sub-navigation concept within a page, thus not passed on to the next page load.
If you were on the same domain as the parent page, you could access it via the
window.parent.location.hash
however since you are from a different domain this access will likely be blocked for security reasons.

Using a query from a url in an iframe

I have an iframe on my website, and the page that the iframe is of accepts referrals in the form of queries, ie /iframepage?r=123 .
Obviously any person accessing the page the iframe is on, (mainwebsite/page?r=123) wouldn't be able to get the benefits of the referral. Is there any way i can make the iframe load based on the the queries in the main url?
Thanks
You can pass url parameters to where you load the iframe. So you'd have to get the params off the url you are on, and then create the iframe in Javascript and load them on the url. Check this question How to pass parameters through iframe from parent html?
I'd use something like the following:
var param = 'yourParameter'
document.getElementById('yourIFrame').src = 'http://example.com?param=' + param;

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.

Categories