I have a code which I used to load external files into a html. How can I do it without importing external files or any libraries, so inside html I can type a short script and it will load another page?
i use this script so far:
$(document).ready(function(){
$('#outer').load('html_file.html');
});
but it requires to have additional files + libraries. How can I do everything directly in html?
Any ideas?
basically I want to include the whole another website inside the new one, but I can use only html + javascript inside the html file. All css files will be stored and reffered in the imported file.
Use this "html":
<script type="text/javascript">
window.onload = function() {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", "html_file.html", false);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById("outer").innerHTML = xhr.responseText;
}
};
xhr.send(null);
};
</script>
Related
On a website I am automating with the help of Cefsharp I have the need to provide a javascript File.File(). The file I want to give it is locally saved and could be anything from pdfs to office documents or images. As far as CefSharp is concerned I have implemented a ISchemeHandlerFactory and ResourceHandler adding a test:// scheme and for example I have successfully added a JS file like this.
var head = document.head;
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'test://local/folder/mytest.js';
head.appendChild(script);
According to the API to create a file I need
bits - An Array of ArrayBuffer, ArrayBufferView, Blob, or DOMString objects — or a mix of any such objects. This is the file content encoded as UTF-8.
So I have my scheme of test:// to give me a local file what do I need to use in javascript to get this into a file?
I worked it. I first tried a fetch but that would not let me use a custom scheme. So I had to use XMLHttpRequest
(function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var contentType = xhttp.getResponseHeader("Content-Type");
var file = new File([this.response],'3Markets.xlsx', {type: contentType,});
//use my new file etc
}
};
xhttp.open('GET', 'test://local/folder/3Markets.xlsx', true);
xhttp.responseType = "arraybuffer";
xhttp.send();
})()
The only issue or worry i have is I currently have to call
CefCommandLineArgs.Add("disable-web-security", "disable-web-security")
which i will have to have a look around how I can achieve this without disabling web security or eventually ask a question here.
I tried to download a zipfile from a webserver programatically using javascript- and am facing challenges with the archive getting corrupted.
I am using the following function to download
function download(){
var http = new XMLHttpRequest();
http.open("GET", 'http://jadonchemicals.com/sample.zip');
http.setRequestHeader("dataType", "jsonp");
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200)
{
var blobdata=new Blob([http.responseText], {type: "application/zip"});
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blobdata);
a.click();
}
};
http.send();
}
I get the following errors when I try to open the archive
a) The file header is corrupt
b) unexpected end of archive
As an example, while downloading the sample.zip file on this link, the file does get downloaded to a size of 975k.
http://jadonchemicals.com/Blobtozip/
When I try to do the same programatically using javascript by linking the script to a button, the file size increases to 1779k and the file is corrupted
I suspect this is a result of an encoding issue. Could you suggest what I should do to resolve?
You can download a file in javascript like this:
<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
document.getElementById('my_iframe').src = url;
};
Download("http://jadonchemicals.com/sample.zip")
</script>
You just need to insert the code into your html document.
I have tried downloading your specified file using this and it was the correct 975KB and was not corrupt.
I have a standard folder structure for a web app.
css
js
img
asetts
lib
index.html
Inside my assets folder I have a bunch of plain text files and I would like to first be able to list the filenames using Javascript, so I can store the URI's in the model, and read from them later on the in the application. I want all of this happening client side.
(Client-side) JavaScript does not have access to the file system like that.
This is not possible without some kind of browser plugin.
You can read the textfiles in the local folder.
function read()
{
var xHR = new XMLHttpRequest();
//replace textfile_url with the relative url of your text file
xHR.open("GET", "textfile_url", true);
xHR.onreadystatechange = function ()
{
if(xHR.readyState === 4)
{
//all your text is in the next line
var text = xHR.responseText;
}
}
xHR.send();
}
I'm currently coding a website on which I need to have a picture file and a txt file displayed on a HTML page that will vary by the date. I've got the picture set up, but I need to be able to show the contents of a txt file. I have it set up so that it will target a folder that is the number of the current month, then it will target a file that is the date. i.e. The variable image = "calendar/2/28.jpg" Here's the code, thanks:
http://pastebin.com/2LCT1qiG
*Note I'd rather not use anything besides javascript, HTML and CSS, but if jQuery or another language is necessary I will use that.
You can use ajax to fetch text file:
without jQuery it will be:
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
var DONE = this.DONE || 4;
if (this.readyState === DONE){
document.getElementById("dailyText").innerHTML = request.responseText;
}
};
request.open('GET', 'calendar/'+today+'.txt', true);
request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
request.send(null);
if you use jQuery the code will be much shorter:
$.get('calendar/'+today+'.txt', function(text) {
$('#dailyText').html(text);
});
I have seen similar questions here but I just can't understand them.
I am building a small web page and I want to read a .json file from my file system and get the object in it.
The web page is also local and the .json file is in the same folder as the .html file.
How to do that on my Ubuntu machine without using any servers and without jquery if it is possible?
Here's some vanilla javascript XMLHTTPRequest code, which does take into account the IE quirks of ActiveX objects:
var useActiveX = typeof ActiveXObject !== 'undefined';
function loadJSON(file, callback) {
var xobj;
if (useActiveX) {
xobj = new ActiveXObject('Microsoft.XMLHTTP');
} else {
xobj = new XMLHttpRequest();
}
xobj.callback = callback;
if (xobj.overrideMimeType) {
xobj.overrideMimeType('application/json');
}
xobj.open('GET', file, false);
xobj.onreadystatechange = function() {
if (this.readyState === 4) {
this.callback(this);
}
}
xobj.send(null);
}
Then you just run it by feeding it a filepath and a callback function:
loadJSON('filename.json', function(obj) {
alert(obj.responseText);
}
You can simply append a <script> tag to your page, pointing the SRC to the local .js file in the same folder. You don't need to use Ajax.