If a user clicks on a downloadable link such as
Download
Is there a client-side (html or javascript) way to change the name of the file before the 'Save As' dialog?
HTML5 provides the a[download] attribute which lets you rename a file. This example will download link.txt and rename it something.txt.
<a download="something.txt" href="link.txt">asdf</a>
Note that this only works on same-origin URLs (i.e. not across different domains).
No, you cannot change this from the client side (HTML or javascript). You need to change it from the server. One way is to use a server side script which will set the Content-Disposition HTTP response header:
Content-Disposition: attachment; filename=somecustomname.txt
You can use Filesaver.js script written by eligrey(Im using angularjs in the example here)
You can achieve the same in classic javascript using XmlHttpRequest object
//In your html code , add these : ->
<script src="https://rawgit.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
//In your Javascript:-
$http({
url: "url where the file is located",
method: "GET",
responseType: "blob"
}).then(function (response) {
saveAs(response.data,"newfilename.extension");
})
Related
Is there a simple way (or what could be the simplest way) to include a html-code fragment, which is stored in a text file, into a page code?
E.g. the text file fragment.txt contains this:
<b><i>External text</i></b>
And the page code should include this fragment "on the fly". (Without php ...?)
The Javascript approach seems to be the preferred one. But with the examples below you possibly can get problems with cross origin requests (localhost to internet and vice versa) or you can have security problems when including external scripts which are not served via HTTPS.
An inline solution without any external libraries would be:
<!DOCTYPE html>
<html>
<body>
<div id="textcontent"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
document.getElementById('textcontent').innerText = xhttp.responseText;
};
xhttp.open("GET", "content.txt", true);
xhttp.send();
</script>
</body>
</html>
Here you need a file content.txt in the same folder as the HTML file. The text file is loaded via AJAX and then put into the div with the id textcontent. Error handlings are not included in the example above. Details about XMLHttpRequest you can find at http://www.w3schools.com/xml/xml_http.asp.
EDIT:
As VKK mentioned in another answer, you need to put the files on a server to test it, otherwise you get Cross-Origin-Errors like XMLHttpRequest cannot load file:///D:/content.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
You need to use Javascript to do this (or perhaps an iframe which I would avoid). I'd recommend using the JQuery framework. It provides a very simply DOM method (load) that allows you to load the contents of another file into an HTML element. This is really intended for AJAX calls, but it would work in your use case as well. The fragment.txt would need to be in the same server directory as the html page (if it's in a different directory just add on a path).
The load method is wrapped in the $(document).ready event handler since you can only access/edit the contents element after the DOM (a representation of the page) has been loaded.
Most browsers don't support local AJAX calls (the load method uses AJAX) - typically the HTML and txt files would be uploaded to a server and then the html file would be accesed on the client. Firefox does support local AJAX though, so if you want to test it locally use Firefox.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function() {
$("#contents").load("fragment.txt");
});
</script>
</head>
<body>
<div id="contents"></div>
</body>
</html>
With javascript. I use it.
Example:
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Is it possible to externalize json-ld and include it in an html document like this:
<script type="text/javascript" src="http://www.example.com/data123.jsonld"></script>
There doesn't seem to be any documentation about this online....
You can't do that. You should get the json with an AJAX request.
You can do it easy with jQuery
JS
$(function(){
$.getJSON("data123.jsonld", function(data) {
$('.json').text(data);
});
});
HTML
<div class="json"></div>
If your json file is not in your file system (cross domain) you should try something like this.
I wish to redirect a page from a domain (properly a subdomain) to another maintaining the same path component.
I'm using a blogging service, not running a server; but I can edit the global head of my blog.
I've managed to redirect towards the main page of the other site using:
<meta http-equiv="refresh" content="1; url=http://subdomain-2.domain.com">
<script type="text/javascript">
window.location.href = "http://subdomain-2.domain.com"
</script>
But I'm not able to redirect any page of the first domain towards the corresponding one of the second — say, http://subdomain-1.example.com/post/lorem-ipsum-123 to http://subdomain-2.example.com/post/lorem-ipsum-123.
I'm wondering if it's possible to grab the current URL and substitute the target domain to the original just by editing the head.
I suppose I can only use HTML, JavaScript or PHP.
Solved using JavaScript as follows:
<script type="text/javascript">
window.location.href = "http://" + "here-your-target-domain" + window.location.pathname
</script>
The key element was window.location.pathname. Here I've found what I needed.
The easiest way to redirect to a different domain is to directly set the hostname (not host) part of the URL like this:
<script>
window.location.hostname = 'subdomain-2.example.com'
</script>
This will redirect you to the same URL (including protocol, port, query string, hash) but with the domain replaced.
Here is a nice visualization to understand all properties on the location object: https://developer.mozilla.org/en-US/docs/Web/API/Location#location_anatomy
I have a local test-page. The URL is:
file:///C:/Users/User/Desktop/HTML/TEST/URLREST/Test.html
I only want to change the URL in
file:///C:/Users/User/Desktop/HTML/TEST/URLREST/Test.html?id=2
or something like that. Just a different URL.
How i can manage that?
I wrote this site in html.
With javascript
<script type="text/javascript>
window.location.href = 'file:///C:/Users/User/Desktop/HTML/TEST/URLREST/Test.html?id=2';
</script>
Based on Please explain JSONP, I understand that JSONP can be used to get around the same-origin policy.
But in order to do that, the page must use a <script> tag.
I know that pages can dynamically emit new script tags, such as with:
<script type="text/javascript" language='javascript'>
document.write('<script type="text/javascript" ' +
'id="contentloadtag" defer="defer" ' +
'src="javascript:void(0)"><\/script>');
var contentloadtag=document.getElementById("contentloadtag");
contentloadtag.onreadystatechange=function(){
if (this.readyState=="complete") { init(); }
}
</script>
(the above works in IE, don't think it works in FF).
... but does this mean, effectively, that every JSONP call requires me to emit another <script> tag into the document? Can I remove the <script> tags that are done?
Yes, every request yields a new <script> tag, and yes, you can remove <script> tags when you're done using the data that it provides to you.
You should consider using a Javascript library for JSONP. OX.AJAST is a simple library I wrote some time ago for doing asynchronous request through script tags (i.e. JSONP) across browsers. YUI also supports JSONP if you're already using that.