I am trying to open an image in a new tab using this simple code.
window.open(file.url);
The file is a .jpg file and my browser is Chrome. Instead of showing the image in a new tab it triggers the download window and asks me to download it to my PC.
Is this a javascript issue? Or is it a default Chrome setting? I have googled this for a while and some people are suggesting it could be a MIME type problem but I have no control over the image coming from the server.
Any advice would be appreciated.
As suggested by #Lachlan Walls in the comments, you can open a blank tab and write a simple html with an img tag:
const image_window = window.open("", "_blank")
image_window.document.write(`
<html>
<head>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="Example" height="100%" width="100%">
</body>
</html>
`);
Related
Is there any tricks to hide the src url in iframe? Or maybe encrypt a part of the external url?
TLDR: No, You cant.
You can prevent it appearing at browser page source using JavaScript. But people still can see it with Inspect Element option.
And if you encrypt the URL, it won't work. HTML src must have a specific URL/File path. It can't understand encrypted text.
Still, If you want to hide it from page source, Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<iframe id="extframe" src=""></iframe>
<script src="script.js"></script>
</body>
</html>
JavaScript at script.js file:
var iframeUrl = document.querySelector('#extframe');
iframeUrl .setAttribute('src', 'https://stackoverflow.com/');
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
I want to open the pdf file in an iframe. I am using following code:
<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"> User guide </a>
It is opening fine in Firefox, but it is not opening in IE8.
Does anyone know how to make it work also for IE ?
Using an iframe to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).
Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.
In your HTML, you could set up a div to display the PDFs:
<div id="pdfRenderer"></div>
Then, you can have Javascript code to embed a PDF in that div:
var pdf = new PDFObject({
url: "https://something.com/HTC_One_XL_User_Guide.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");
This is the code to link an HTTP(S) accessible PDF from an <iframe>:
<iframe src="https://research.google.com/pubs/archive/44678.pdf"
width="800" height="600">
Fiddle: http://jsfiddle.net/cEuZ3/1545/
EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at run-time...
EDIT 2: Apparently, it is a bug (but there are workarounds):
PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?
It also important to make sure that the web server sends the file with Content-Disposition = inline.
this might not be the case if you are reading the file yourself and send it's content to the browser:
in php it will look like this...
...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...
readfile('localfilepath.pdf')
The direct PDF didn't work on Mobile phones and it doesn't support responsive UI.
Here is the best solution.
https://stackoverflow.com/a/66548544/2078462
Do it like this: Remember to close iframe tag.
<iframe src="http://samplepdf.com/sample.pdf" width="800" height="600"></iframe>
I trying to display my ppt for long time where the screen should run continuously in web page without using Google Docs or Skype Drive where the ppt file and html page is in my local folder but it is not showing in web page. The code is below :
<!DOCTYPE html>
<html>
<body>
<iframe src="lp.ppt" width="800px" heigt="600px" name="iframe_a"></iframe>
</body>
</html>
can anyone help to display ppt in html page.
I'd recommend the official View Office documents online
For embedding you can simply use code like below:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src={urlencode(site-to-ppt)}' width='962px' height='565px' frameborder='0'></iframe>
I want to store the webpage into png file using javascript.I tired with the below sample code. but what is the issue is when I am downloading it's downloading extension is image/octet-stream but during downloading the file I want to store the image in png format.How can i download the image from image/octet-stream extenstion to png extension.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html2canvas example</title>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<style>
canvas{border:1px solid #222}
</style>
</head>
<body id="target">
<a class="upload" >Upload to Imgur</a>
<a href="#" download="testXXX.jpg" onclick="printImg()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
<script type="text/javascript">
function printImg(){
html2canvas( [ document.body ],{
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").replace("image/png","image/octet-stream;base64");
window.location.href=img;
}
});
}
</script>
</body>
</html>
I'm afraid this is just how toDataURL works.
See the following question for an answer with a somewhat ugly solution:
Name a PNG file saved from Canvas using an "open with" dialog
(the href in the answer would point to the 'img' var in your javascript)
I am facing an issue with PDF loading in my page.
I am using object tag to embed PDF,
<object data='addDocs.do?viewName=PDF&id="+$("#pdfId").val()+"&File=regDoc.pdf' type='application/pdf' width='95%' height='750'> </object>
This is getting called twice when using IE Browser.
I did some search on the same question and tried with response.setDateHeader("Expires", 30000);. No Luck.
I can't use IFRAME because I need to open the links inside the PDF in the same window rather than inside IFRAME.
When using EMBED tag to load PDF, If the size of the PDF is larger then browser is freezing.
So, please help me out on calling PDF only once in IE.
Thanks in advance.