I am using a uihtml component inside a uifigure that loads a HTML file in its HTMLSource property. The HTML file just tries to fetch the contents of a text file located in the same folder, and outputs them inside a div component. The body in the HTML looks something like this:
<body>
<div id="viewer"></div>
<script>
fetch("./example.txt")
.then(response => response.text)
.then(textString => {
document.getElementById('viewer').innerHTML = textString;
});
</script>
</body>
The problem is that I always get a "Page Not Found" (the status from the fetch response is 404). The documentation of uihtml says: Common web file types, like JavaScript and CSS, can be referenced from the HTML file you specify for the HTMLSource property, but other web file types might not be supported., so I am not sure if it is even possible to fetch a text/pdf/any other file.
From what I understand, when calling uihtml MATLAB injects an iframe on the webpage displayed by the uifigure. This iframe runs on a local web server, and whenever you append a script tag with a source, the script is also accessed from the web server. For example,
<body>
<div id="viewer"></div>
<script id="script-id" src = "./example.js"></script>
<script>
document.getElementById("viewer").innerHTML = document.getElementById("script-id").src;
</script>
</body>
would display the source of the js file, which corresponds to something like:
https://localhost:31515/static/xxxxxxxx/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/example.js
That same location of the file we could get by appending the undocumented
connector.getBaseUrl
matlab.ui.internal.URLUtils.parseURL('/example.js',0)
I have tried fetching the text file with the full path to that web server location
(https://localhost:31515/static/.../example.txt)
but the 404 error persists.
At this level of HTML/JS is where I start to struggle. It looks like there should be some way to fetch the data of the file since scripts can be loaded, but I can't find a way. Does anybody know how to successfully fetch the file? Do we need a special credential in the fetch request or something like that?
Related
I have an R markdown document which is created using a shiny app, saved as a HTML. I have inserted a logo in the top right hand corner of the output, which has been done using the following code:
<script>
$(document).ready(function() {
$head = $('#header');
$head.prepend('<img src=\"FILEPATH/logo.png\" style=\"float: right;padding-right:10px;height:125px;width:250px\"/>')
});
</script>
However, when I save the HTML output and share the output, of course the user cannot see the logo since the code is trying to find a file path which will not exist on their computer.
So, my question is - is there a way to include the logo in the output without the use of file paths? Ideally I don't want to upload the image to the web, and change the source to a web address.
You can encode an image file to a data URI with knitr::image_uri. If you want to add it in your document, you can add the html code produced by the following command in your header instead of your script:
htmltools::img(src = knitr::image_uri("FILEPATH/logo.png"),
alt = 'logo',
style = 'float: right;padding-right:10px;height:125px;width:250px')
I have an object tag like this:
<object type="text/plain" data="http://www.theurl.com/thefile"></object>
The file I am accessing has no file-extension, but I would like to embed it as plain text. However, this code just causes a download of the file to start.
Is there any way to fix this?
You can use the built-in fetch() method and access the file with .then() afterwards.
<script>
fetch("http://www.theurl.com/thefile")
.then((r)=>{r.text().then((d)=>{console.log(d)})});
</script>
But that throws the "CORS"-error so you have to enable Cross-Origin for the hosted document. Otherwise it forbids you to fetch it.
Here is a working example of fetch():
<script>
fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
.then((r)=>{r.text().then((d)=>{console.log(d)})});
</script>
I am trying to generate a TEXT/XML file from a LOCAL HTML file. I know there are a lot of answers to generating a file locally, usually suggesting using ActiveX object or HTML 5.
I'm guessing there is a way to make it work on all browsers (in the end HTML extension is opened by a browser even if it is a LOCAL file) and easily since this is a LOCAL file put in by user himself.
My HTML file will be on client's local machine not accessed via HTTP.
It is basically just a form written in HTML that upon "SAVE" command should be generating an XML file in the local disk (anywhere user decides) and saving form's content in.
Any good way?
One way that I can think of is, the html form elements can be set into class variables and then using the jaxb context you can create an XML file out of it.
Useful Link: http://www.vogella.com/tutorials/JAXB/article.html
What you can do is use base64 data-urls (no support for IE9-) to download the file:
First you need to create a temporary iframe element for your file to download in:
var ifrm = document.createElement('iframe');
ifrm.style.display = 'none';
document.body.appendChild(ifrm);
Then you need to define what you want the contents of the file to download to be, and convert it to a base64 data-url:
var html = '<!DOCTYPE html><html><head><title>Foo</title></head><body>Hello World</body></html>';
htmlurl = btoa(html);
and set it as source for the iframe
ifrm.src = 'data:text/x-html;base64,'+htmlurl;
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
Say I have a text file (test.txt) that contains only the following line:
<h1>Text text text text text</h1>
Is there any command that I can call the contents from this text file in an HTML document, so the contents in the text file imports where the call is made, every time the side shows?
Example: ?????"/test.txt"?????
I believe you mean to ask whether there exists a "command" in HTML which allows you to include a file.
In pure HTML by itself there does not, but the Apache server-side includes does provide such a directive:
<!--#include virtual="./test.txt" -->
You will need to enable SSI processing by your webserver. In Apache, you'd typically call your file .shtml or something like that.
What you're looking for is the concept call "Server Side Includes". Different servers will do this different ways, so you'll need to look at what your server provides.
Not with pure HTML, but you can with PHP (and almost every other server side language):
<?php include("test.txt"); ?>
Or you can do it in a roundabout way with JavaScript if the file is part of the website, you're actually running a web server, and you're not worrying about older browsers:
<script type="text/javascript">
var ajaxRq = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");
ajaxRq.open("GET", "test.txt", false);
ajaxRq.send(null);
document.write(ajaxRq.responseText);
</script>