iFrame src property and relative URLs not working - javascript

I have a web page that has an iFrame in it with a definition in the HTML like the following:
<iframe id="page_is_fresh" src="~/HTML/fresh.html" style="display: none"></iframe>
My site is running under a subfolder /Marketing so all urls are something like http://myserver/Marketing/SomeFolder/someitem.html
I have javascript to change the src of my iframe when an item on the form changes.
$('#page_is_fresh').attr('src', '/HTML/stale.html');
The problem is, this makes the url http://myserver/HTML/stale.html
I tried using '~/HTML/stale.html' and that gives me http://myserver/Marketing/SomeFolder/~/HTML/stale.html which doesn't work either.
How can I get it to give me http://myserver/Marketing/HTML/stale.html without having to hard code the /Marketing part in?

Use ../HTML/stale.html instead of ~/HTML/stale.html or /HTML/stale.html in your javascript.
The server considers ~ to be a directory in the way you formatted it.
../ lets the server know it needs to start one directory up

Related

How can I find the current html filepage name using Javascript, on a LIVE-SERVER

I am going to deploy this page on an FTP
And I need to find out how I can detect the html file currently being viewed using JavaScript.
If I open the html file, it works just fine with this:
var fileName = location.href.substring(location.href.lastIndexOf("/") +1);
But, if I open it via my localhost adress, it has a null value. So I'm guessing I have to use some other method to extract the current html file name. Or is there a better approach to this?
Note: I am not going to use JQuery or anything like that.
EDIT:
I can get the filename if it isn't my index file.. If it's the index file I get nothing using the above code. Most likely since all I have in my adress bar is the localhost adress of the live-server?
The web deals in URLs, not file names.
Sometimes a URL will include something that looks like a file name, and sometimes that even maps on to a real file name on the server's hard disk.
When you type http://example.com/ then it might map that onto a file called index.html. Or maybe on to index.php. Or maybe it won't touch any file but will just use logic built into the web server application to determine what to respond with.
There's no way to know in the general case.
If your specific case, you know that the path / maps onto index.html, so you can write an explicit mapping in your JavaScript code.

Why can't I get my script tag src's to work?

I have been coding up a localhost, and I made the localhost by using of course a JavaScript file to do so, and I then made it reference an HTML file. However, I noticed that when I am using localhost to serve up the HTML file I get this error:
"GET http://localhost:3333/filetesting.js"
The filetesting.js is that js file, there are also other things I'm referencing too, like websites. I'm referencing it by using script tag src.
I looked at the network on developer tools of it and it says it's a 404 error not found. I'm trying to figure out how to reference my script tag src's without having localhost:3333 go before it.
When I run the HTML file without using the localhost, it works just fine when it comes to the script tag src's. If you do not entirely understand what I'm asking for, just ask.
Assuming that your script will always reside in the root level of your website, you can simply target it with the root-relative prefix /:
<script src="/filetesting.js"></script>
This will load your script from the root, regardless of the site the file is hosted on. For example, on http://localhost:3333/ it will load the file from http://localhost:3333/filetesting.js, and from http://localhost:3333/folder/, it will attempt to load the file from the same location.
If you move your files over to a proper website, it will still work the same way: www.example.com will look for the file at www.example.com/filetesting.js, and www.example.com/folder/ will look for the same file at www.example.com/filetesting.js.
Hope this helps! :)

UWP: webview does not display page using navigateToString method

I am trying to use webview element in a universal app using javascript. My aim is to browse some websites adding some content of my own to its html document.
First, I set src attribute of webview to www.example.com and it browses the site. This was just to make sure the webview is capable of browsing the site.
Next, I tried getting the html and load it to webview using navigateToString method like this:
$.get(url, function (data) {
webView.navigateToString(data);
});
This causes the page to be loaded out of shape (aperarently some .js or .css files are not loaded or blocked from running), or it isn't even loaded.
I wonder what is the difference loading the page by its url and loading its html by manually like this. And is there a workaround I can overcome this problem.
Note: I'm new at both js and html.
A web page is usually not made of a single HTML file. In order to make it work, you will have to retrieve not only the HTML but also the javascript and the css files.
This can be a tedious work.
If you are trying to open something from the web, the easiest way is to perform a regular navigate() which will take the URI as parameter and perform a "full" browse (as the browser will do). The retrieval/loading of the CSS/JS will be done for you.
If you want to open a local page (local to your application), navigateToString() is a good path but you will have to host locally all the page dependencies (css/js fiels) or embed all the style and code in the HTML page itself.

ASP.NET Javascript Not being loaded when ASP Page has URL Mapping

I'm trying to retrieve the ID of an employee and show them in my details page by retrieving the Employee ID from the URL using Page Mapping in ASP.NET:
RouteTable.Routes.MapPageRoute("", "employee/{id}", "~/details.aspx");
Such that the URL will be:
www.myexamplewebsite.com/employee/7937822353
The problem is, the Javascript files don't get loaded and the console is full of my javascript errors. I get a 404 error in my JS scrips as well. The page can't find any JS file when mapped. Why is this happening when I map the URL? This does not happen if the URL is www.myexamplewebsite.com/7937822353.
What am I doing wrong?
EDIT:
This is how my JS files are referenced:
<script src="js/chatbar/rightside.js"> </script>
The script is relative, and it's from the perspective of the client side URL. So when you change the page route to have the page appear to be served from a /employee subdirectory, the correct relative path to your scripts changes. So it's looking for the scripts at /employee/js/charbar/rightside.js. You could change those relative paths (to something like ../js/chartbar/rightside.js), but you might run into a problem later if you change the routing again.
So instead, it's best to make the reference application root relative.
<script src='<%= ResolveClientUrl("~/js/chatbar/rightside.js")%>'></script>

Is it possible in Javascript to open a directory and read an image file and display it to html?

I was wondering if it is possible in JS to open a directory, read an image file and display it to Html? I believe JS restricts from being able to open any file in a directory directly, but what I want is:
I have a XML file which will contain the path to a image file in the web server root folder
so my hierarchy is like this
webserver root folder--->|
html
js
css
images
xml
, and I will use XmlHttpRequest and feed the directory tag and file name tag to my JS file which has to display the image to my frame in the Html page.
[My image is also in the same webserver root folder but in a different folder from html]
Any pointers on how to go about it? I guess we can store the image file also in XML as a base64 encoded data, but that would make the data exchange huge, also don't know if this is a ideal method (is it? please suggest)
Please give me some tips for this.
Thanks
Balaji R
JavaScript does not have access to filesystem on server, since it runs on the client side.
But with JavaScript or Ajax you can call some php code on server which will read the image from the file system and then it will pass this image back to the JavaScript.
I have described here how to do this.
If I am following you correctly, example.com/js/somefile.js is trying to access something like example.com/images/image.jpg?
If so then i would either use the absolute URL of the image:
"http://www.example.com/images/image.jpg" or the relative path "../images/image.jpg"
When referencing the images in your code you could actually use a plain text file, one image path per line. Then in your onreadystatechange function:
pictures = var.responseText.split("\n");
now pictures is an array of picture paths.
JavaScript only has access to the information & priviledges that the browser has access to, so unless the image is in a directory that would normally be accessible on the web site, you're not going to have much luck using just JavaScript.
Is there any way that you can make the path in the filesystem available to the web document root folder? Maybe by using an Alias or Symlink?

Categories