Often, when creating single page apps, you need to populate the app with some form of data (i.e. in the json-format). This is usually done through an AJAX-call.
Now, this isn't the best possible solution. The DOM needs to be loaded before the AJAX call is launched, and it's semantically awkward to do this async through javascript.
Is it possible to load a JSON-resource in the same fashion as a <script src="some-file.js"> automatically fetches some-file.js, or fetches some-image.png automatically when the DOM loads?
The correct MIME type for JSON is application/json
It is possible to include it in the JSON file, as a script. If the path is relative, just use this code
<script type="application/json" src="path/to/json/file.json"></script>
I would disagree, however, that this is semantically awkward. Simply load it with $.getJSON
Related
Suppose i have loaded some html data from ajax.
The ajax returned an an html form.
The issue arises when loading the resources in the loaded data. Let me elaborate..
For example, the ajax may receive a script tag referenced to "/script.js". But since my page would be on (let's say) a separate domain the browser wouldn't recognize the url "/script.js". So what I'm looking to do is replace all of the links like "/abc.xy" to be linking to the domain form which i'd be loading the resource originally..
So, all references like "/abc.xy" would be changed to "www.domain.com/abc.xy"
How would i achieve this? (if it is even possible)
function resolve(old,new){
[...document.getElementsByClassName("*")].forEach(el=>{
if(el.src){
el.src=el.src.replace(old,new);
}
if(el.href){
el.href=el.href.replace(old,new);
}
});
}
Use like this:
resolve("http://original.com/","http://new.com/");
In a page that I work with, we load content from an external server from a provided dynamically created javascript file.
In one of the sections of the document that displays header content, we have the sample line:
<script type="text/javascript" src="externalScriptLocation"></script>
The problem is that when the external script location is down (it could be a 404, but in this case it's actually a 503 - service not available), most of the page's functionality appears to work but the page is not able to properly submit data.
Is there a way I can wrap this with a try/catch or something similar so that failure to load this bit of javascript (which is for a header element that, while it should be there, shouldn't cause these issues!) so that the site can function normally?
If it matters, the server side language is Java with Java Server Pages as the view.
Currently I'm just taking source of a script that is on the page.
The HTML:
<script type="text/plain">meow</script>
The JavaScript:
// returns "meow"
document.querySelector('script').text
I want to be able to load the script from another file.
The HTML:
<script type="text/plain" src="file.txt"></script>
file.txt:
meow
The JavaScript:
// returns "meow"
document.querySelector('script').textFromFile
Does anyone know if that's possible? I would assume it's not, and I haven't found anything on google that is what I'm asking.
If the script has a src attribute you would need to fire of a request via XHR to that same path and pull in the text content of its response. Keep in mind this will require additional work if the script is being loaded from another domain. At that point you would need to make use of CORS, or introduce some other type of proxy to handle the cross-domain communication.
The system setup as follows:
Page is a normal html page served from server. Once page loads, a jquery load request is made to a controller on server which is spring mvc. Controller then sends down a freemarker template with the rest of the page content (note this is placed in div).
The freemarker template itself has some javascript file includes (i.e.,
<script type="text/javascript" src="..."/>.
So I read that doing a ajax load this way, the javascript files are going to be inlined in the page, rather than treated as external files. My question then is how best to tell the browser not to cache these javascript files as getting them refreshed while developing often requires actually clearing the cache manually versus just force reloading the page.
Would appending a timestamp to the javascript includes work in this case (i.e.,
<script type="text/javascript" src="somefile.js?v=(timestamp)">
or setting
$.ajaxSetup({ cache: false });
timestamp should work... like (new Date()).getTime() should generate you a number that is different each time you send your request, so the browser shouldn't be able to cache the file.
Can I load an external page using Javascript and convert it to a DOM structure so I can scrape it like I would to it normally?
Bad explanation, but code says more than thousand words, I think. ;)
foobar = loadExternalPage('foobar.com');
foobar = convertToDOM(foobar);
headers = foobar.getElementsByClassName('header');
Thank you!
If the external page is on the same domain, then yes you can using XMLHttpRequest, then treating the response as HTML. Alternatively, load it into an iframe and access the resulting contentDocument.
For a page on another domain, however, it's a bit more complicated. You may want to look at PHP's DOMDocument, which you can use to parse HTML from any domain, and even pass it back to JavaScript if you make an AJAX call to your PHP script.
https://developer.mozilla.org/en/Code_snippets/HTML_to_DOM