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.
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>
I have an HTML document with JSON-LD published as follows:
<script type="application/ld+json">
{
"#context": {
"gs1": "http://vocab.gs1.org/v1#",
"xsd":"http://www.w3.org/2001/XMLSchema#"
},
"#id": "retailer:12345",
"#type": "gs1:Offering",
"gtin13":"5011476100111",
"gs1:hasPrice": {
"gs1:price": "2.49",
"gs1:priceTypeCode": "USD",
"#type":"gs1:Price"
}
}
</script>
This works as expected (meaning it is valid and visible using Google Structured Data Testing Tool and Structured Data Linter)
Using Same Origin (not Cross Origin), how to move the in-line JSON-LD to a file?
This approach fails:
<script type="application/ld+json" src="_URL_.json"></script>
This approach also fails:
<script type="application/ld+json">
$(document).ready(function(){
$.ajax({
url: "_URL_.json",
dataType: 'json',
});
});
</script>
How to correct my approach to create a solution where the JSON-LD is in file on my server, not in the HTML?
Next, assume my site is CORS-enabled.
How to publish the JSON-LD structure in a JSONP format so that another domain can subscribe to the JSON-LD data?
Tools like the Google Structured Data Testing Tool or the Structured Data Linter don’t support external references. And probably many consumers of your JSON-LD neither.
If you want to do it anyway, you would have to use a link instead of a script element, because for the use as data block, the script element may not have a src attribute.
The variant with including the JSON-LD dynamically might work for consumers that support JavaScript for that purpose. (Google seems to support it; maybe it’s only their testing tool that can’t use it.)
You could generate your script tag dynamically:
<script>
// do some ajax, get the JSON-LD as `data` and then...
$.ajax(...).done(function(data) {
var el = document.createElement('script');
el.type = 'application/ld+json';
el.text = JSON.stringify(data);
document.querySelector('body').appendChild(el);
});
</script>
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>
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");
})
I'm trying to use JSON for the first and I use the code:
var url = 'http://where.yahooapis.com/geocode?q=Vancouver&flags=J&count=10&lang=en&appid=' + myAppId + '&callback=?';
$.getJSON(url, function(data){
console.dir(data);
});
but I get on IE8 the error :
'$' is undefined
what am I doing wrong?
thanks.
Looks like you are trying to use jQuery and the script include is missing.
Include the URL for jQuery.js before using the $.
Try to place something like:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
before the getJSON
$ is provided by a couple JavaScript libraries, the most common of which is jQuery.
If you're not including jQuery in your page, that's likely your issue.
Looks like you're not including JQuery before making this call?
the $ symbol is used by JQuery. Do you have the script for jquery included in the web app before you are using it ?
add this at the top of the offending page.
<script src="{Change this to the path to your jquery.js file}"></script>