Currently, I need to display a word document with iframe but don't know how to make It work.
My source path which is a Blob URL is:
var filePath = "blob:http://localhost:8080/b73d1841-5a54-416f-8931-7d5702a4dc7e"
When I put it into an iframe:
<iframe id="fileViewer" src={filePath}></iframe>
It doesn't appear anything and return a warning:
Resource interpreted as Document but transferred with MIME type
application/vnd.openxmlformats-officedocument.wordprocessingml.document:
"blob:http://localhost:8080/....".
But If I use the same code with other type like pdf, It will work perfectly.
Can someone pointout what I am missing ?
Related
I've added an iframe to an Rmarkdown document. The iframe is an HTML file that is stored in the same folder as my .Rmd file and the HTML file it generates. I would like to determine the appropriate height/width to display the iframe based on the HTML file dimensions. I should be able to use iframe.contentWindow.document.body.scrollWidth/iframe.contentWindow.document.body.scrollHeight to do this.
Here is an example of what I tried in my Rmd file:
<iframe src="./test_file.html" style="display:block; border:none;
width:100%;" id="test"></iframe>
```{js}
var iframe = document.getElementById('test');
iframe.addEventListener('load', function(event) {
iframe.height = iframe.contentWindow.document.body.scrollHeight;
iframe.width = iframe.contentWindow.document.body.scrollWidth; });
```
However the contentWindow value is null for the iframe. When I look at the HTML page generated by Rmarkdown with Developer Tools, I see the error:
Uncaught DOMException: Blocked a frame with origin
"https://website.host.name" from accessing a cross-origin frame.
at HTMLIFrameElement. (https://website.host.name/R/Rmd_test/generate_preview.html:1636:42)
So it seems that the files are being treated as cross-origin resources rather than coming from the same-origin. I'm not sure why that is since they are both located in the same folder and their location.protocol, location.host, & location.port values are the same (port is null for both, which from my reading should be fine).
I did find a workaround to get the height/width using postMessages to have the pages communicate, but I'd like to figure out how to have the iframe content recognized as same-resource. Any ideas what I'm doing wrong/missing?
I don't think this is a duplicate of SecurityError: Blocked a frame with origin from accessing a cross-origin frame. I used that post to figure out my workaround to get the height/width. The accepted answer notes that the origin is considered to be different if the protocol, hostname, or port differs between the two resources. In my case, when I open each HTML file, that information is the same. Why are they being treated as cross resource?
Can someone please help me understand why a linked clicked in PC browser (in my case FF) works. But when I paste the same URL into a new tab on the same browser I get a different response from the server?
Go to this page : http://networkprogramming.wordpress.com/2013/08/06/html-to-pdf-proxy/
Click on the link text "http://www.htmlpdf.com/iframeconvert?url=http://www.google.de&orientation=Portrait&pageSize=A4"
This runs a service at www.htmlpdf.com and converts www.google.de into a pdf and downloads it.
Now open a new tab and paste the same URL either from the page text, from the page source or the URL field and press return and the server returns: Unexpected error occurred, unable to convert this URL to PDF.
I don't get it, why does the link work from a click but not from a new tab?
The page source confirms the real URL as:
< a href="http://www.htmlpdf.com/iframeconvert?url=http://www.google.de&orientation=Portrait&pageSize=A4">
I've tried substituting ampersands with '& a m p ;' (without spaces) but that does not work.
Any ideas?
It seems that the service accessible via http://www.htmlpdf.com/iframeconvert? is checking the REFERER of the GET request. In case it there is no REFERER set, you'll get Unexpected error occurred, unable to convert this URL to PDF as a response.
Give it a try on this page: http://www.rexswain.com/httpview.html.
Simply put http://www.htmlpdf.com/iframeconvert?url=http://www.google.de&orientation=Portrait&pageSize=A4 as the URL and send the request once with a referer and once without.
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 using Filepicker.io to handle my image uploads on my website.
I'm also using FancyBox to display a nice slider. Everything works fine if I use a regular image like: http://i.imgur.com/asdf.jpeg as the <img src="">. Meaning I click the images and the slider pops up correctly.
However when I switch out those static image url's and use my Filepicker addresses, when I click on the images to open the fancybox, the image is downloaded.
Here's the message I get in the console, on Google Chrome:
Resource interpreted as Document but transferred with MIME type image/jpeg: "https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false".
Any suggestions?
Since your link:
https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O?dl=false
doesn't have an image extension (jpg, png, gif), fancybox doesn't know what type of content needs to be handled. You need to tell it by adding the API option "type": "image" like:
$(".fancybox").fancybox({
"type": "image"
});
That is documented here http://fancybox.net/faq, No. 6 (if using v1.3.4), or here http://fancyapps.com/fancybox/#support, FAQ tab, No. 5 (if using v2.x).
For more options how to handle the issue see here:
https://stackoverflow.com/a/17554660/1055987
Another option is to append the name of the file onto the url, for example:
https://www.filepicker.io/api/file/yknn4hWSOOm2NLZYGR3O+photo.png?dl=false
Filepicker.io ignores anything on the file link after the + sign to allow you to make the urls more "adapter friendly"
I'm using the following snippet of code in an MVC Action to return an image in an HTML image tag:
byte[] bytes = System.IO.File.ReadAllBytes(fileLocation);
string fileType = "application/octet-stream";
FileContentResult fcr = new FileContentResult(bytes, fileType);
fcr.FileDownloadName = fileName;
return fcr;
The image tag's src attribute looks like this: src="/MyController/MyAction/fileInfo"
It works and the image displays in the web page. However, if I try and open the image by itself in a browser the browser asks me what image viewer I should use to open this resources. If the image is statically linked off the site then the browser will open the image.
What do I need to change in that code to make the browser open this image?
(I've tried a few different content-result-types and also a few different file-types but haven't found the right combo yet.)
You have to set the mime type of the response to the appropriate image type (ex: image/jpeg) instead of application/octet-stream.