The problem is because of the content-type property of the blob. If content-type property of a blob is not set explicitly, Azure Blob storage assigns application/octet-stream.
In your case because you're not setting this property, even for your HTML files, the content type is set as default value i.e. application/octet-stream. Because the browser (especially Chrome) does not understand how to deal with this content type, it downloads it instead of rendering it.
Changing the content type of the blob to text/html should fix the problem.
Atlassian Community
community.atlassian.com › q&a › confluence › questions › iframe downloads file instead of showing content
iframe downloads file instead of showing content
January 10, 2025 - {quote} As for iframe, it needs to be a full URL if your file is outside of Confluence.
Videos
Reddit
reddit.com › r/learnprogramming › help! iframe content downloading on load but not displaying?
r/learnprogramming on Reddit: Help! IFrame content downloading on load but not displaying?
November 2, 2022 -
I have an iFrame that is displaying some local content. Every time i load the page, it just downloads the content but doesn't display it in the frame.
I have no JS just html and css
I am running it on a chrome browser through the live server extensions in VS Code
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<!-- The sidebar -->
<div class="sidebar">
<p id="cgm-injection">CGM + Injection</p>
<p id="cgm-pump">CGM + Pump</p>
<p id="closed-loop">Closed Loop</p>
<p id="fp-injection">Finger Prick + Injection</p>
<p id="fp-pump">Finger Prick + Pump</p>
</div>
<!-- Main Content -->
<div class="main row" id="container">
<!-- Left event log iframe -->
<div class="left col-5" id="left">
<nav class="tabs">
<button class="tab" id="fullData">Glucose</button>
<button class="tab" id="views">Bolus</button>
<button class="tab" id="json">Basal</button>
</nav>
<iframe src="../static/Output/Closed Loop/Basal.csv" class="data" style="border: 3px solid rgb(69, 94, 110);" height="100%" width="100%" id="leftTable"></iframe>
</div>
<!-- Right data and tabs -->
<div class="right col-7" id="right">
<nav id="eventLogHeader">
<button class="rightTab" id="rightTabs">Event Log</button>
</nav>
<iframe src="../static/Images/concatinated.png" style="border: 3px solid rgb(69, 94, 110);" name="iframe_a" height="100%" width="100%" id="rightData" class="data"></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>Reddit
reddit.com › r/html › show html file in instead of downloading it
r/HTML on Reddit: Show HTML file in <iframe> instead of downloading it
May 15, 2021 -
Hi r/HTML,
I have an HTML page uploaded page to my cloud. I have a shared link to that HTML page which forces one to download said HTML page when opened.
I use this link to embed the HTML page in an iframe (of a second HTML page). Problem is, whenever I open the second HTML page whose iframe is linked to my shared link, it forces a download of the first HTML page. How can ignore the download attribute of the shared link and let the first HTML page be shown in the iframe instead?
Top answer 1 of 3
1
Welcome to r/HTML . When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help. Your submission should contain the answers to the following questions, at a minimum: What is it you're trying to do? How far have you got? What are you stuck on? What have you already tried? I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.
2 of 3
1
Can you provide your code?
Mozilla Bugzilla
bugzilla.mozilla.org › show_bug.cgi
1662216 - PDF iframe embeds prompt for download instead of displaying in-page
Bugs for developer tools (F12) should be filed in the DevTools product. (more info) ... For bugs related to Firefox's built-in PDF viewing capabilities (also known as pdf.js). ... This bug is publicly visible. ... Opened a page with an iframe embedded PDF (such as https://pdfobject.com/static/) in Firefox 81.0b4 and and received a prompt to download the PDF rather than see it embedded.
Bubble
forum.bubble.io › need help
[Update] externally-hosted HTML file downloading, rather than showing in iframe - Need help - Bubble Forum
August 13, 2024 - Hey! I first asked about this a year ago it seems, and 12 months later, I’m still having the same problem. Here’s the old thread: HTML file not rendering (showing source code) after upload: The issue seems to be the way bubble is saving HTML files since an update (somewhere before Aug 23!)
Google Groups
groups.google.com › g › flex-iframe › c › cLywT6dbe3o
PDF downloads instead of appearing in iFrame?
Hi, Please create HTML file that will embed PDF into it using following code. <embed src="test.pdf" width="100%" height="720"></embed> And call that HTML file using iFrame. I think this will help you.
Top answer 1 of 4
5
because browser understands only html. Change your file extension to .html
or use server side language like php and using file_get_contents() function, you can display text file to browser.
2 of 4
4
This is the issue with the file. it is not formatted as html. because it has some special unicode (eg) characters at end of file read. if text response has special character like that. it failed to parse response as html embedded in iframe.
you can check this example :
<iframe src='http://humanstxt.org/humans.txt' /> </iframe> Stack Overflow
stackoverflow.com › questions › 28863452 › iframe-downloading-html-file-instead-of-displaying-but-works-on-local-drive
aem - iframe downloading HTML file instead of displaying but works on local drive - Stack Overflow
I have an iframe on my CQ5 website and it's very basic, src = "path to content folder which contains an html file.html" I see the Iframe has a blank grayish white box in it however, it does not display the content. It tried to download the file instead! I have tested this code on my local drive and it works perfectly. What the heck is going on here? There is a similar question that I found on: https://stackoverflow.com/questions/22947320/how-to-load-external-source-to-iframe-instead-of-download#= CQ5 is kind of like a wordpress type development tool.
Stack Overflow
stackoverflow.com › questions › 53281397 › pdf-in-iframe-getting-downloaded-instead-of-displaying
PDF in iFrame getting downloaded instead of displaying
November 13, 2018 - I am trying to embed a PDF hosted on S3 for display on my website but it's getting downloaded instead of displaying it. <iframe id="pdf-preview-iframe" src="https://example.s3.ap-south-1.amazonaws.com/files/1542099522240.pdf" height="100%" width="100%"> This browser does not support PDF iFrames.
ProcessWire
processwire.com › community support › getting started
Showing downloaded html file within an iframe and getting 403 response - Getting Started - ProcessWire Support Forums
June 12, 2024 - I'm hoping someone may be able to guide on this. One of my side projects stores ads for ecommerce brands for inspiration. I want to now add in their landing pages. I have used SingleFile to get a download of a page and then uploaded it to the page as a file. I am then looking to output as an ifra...
Stack Overflow
stackoverflow.com › questions › 53844002 › embedded-htm-iframe-downloading-instead-of-displaying
html - Embedded .htm iframe downloading instead of displaying - Stack Overflow
<iframe src="https://dl.dropboxusercontent.com/spa/numbers/file/file.htm" width="1000" height="4100" frameborder="0"></iframe> In the past, this has worked fine. The form has displayed perfectly on our site. Recently however, for some users the .htm file automatically downloads when the page is loaded, for others it displays correctly. When viewing other stackoverflow posts, I've seen users say that the Content-Type of the .htm file needs to be 'text/html;charset=UTF-8' and after checking, that is what our files are set to.
SAP Community
community.sap.com › t5 › technology-q-a › iframe-content-downloading-instead-of-displaying-in-sapui5 › qaq-p › 12053392
Solved: Iframe content downloading instead of displaying i... - SAP Community
August 16, 2019 - onInit: function () { var oModel = new sap.ui.model.json.JSONModel(); var odata={ k1:{ "iframe1":"https://--some /map /url /here---/" } }; oModel.setData(odata); this.getView().setModel(oModel,"jmodel"); } Note: If I use hardcoded url in view instead of url from model, it works. But it downloads when I use url through data binidng.
Stack Overflow
stackoverflow.com › questions › 32143755 › chrome-is-downloading-file-in-iframe-instead-of-displaying-it
html - Chrome is downloading file in iframe instead of displaying it - Stack Overflow
August 21, 2015 - I'm trying to make a video file run inside an iframe in all the browsers but Chrome and IE works kind of awkward. ... When I refresh the page, the wmv video file gets downloaded instead of running inside the iframe, is there a way to make it work?
Wix Studio
forum.wixstudio.com › ask the community
How do I enable downloading of a file with iframe? - Ask the community - Community Support Forum | Wix Studio
October 28, 2021 - I am using velo to create a custom workflow and request a file from an API. Once I have the response which includes the file object, I then send it to an iframe which has access to the window and document objects to enable the download of the file to the users machine. let blobURL = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(blob) : window.webkitURL.createObjectURL(blob); let tempLink = document.createElement('a'); tempLink.style.display = 'none'; tempLink.href = b...
Stack Overflow
stackoverflow.com › questions › 48028036 › iframe-src-file-pdf-now-downloading-rather-than-displaying
<iframe src="file.pdf"> now downloading rather than displaying
December 30, 2017 - The intention of that code is to display the .pdf file in the iframe. It has worked that way for years. This morning for some users it is popping up the "View Downloads" dialog and asking to Save or Open the file.
Justinmind
justinmind.com › community › topic › mp4-downloads-instead-of-plays-when-embedding-iframe-in-html-widget
MP4 downloads instead of plays when embedding iFrame in html widget | Justinmind Q&A
February 10, 2018 - This issue might be related with the browser that Justinmind is using (Chromium) that is not understanding the iframe. As a workaround you could try using a different browser instead and see how it goes. You'll be able to change the browser at File / Preferences / General and then set the browser ...
Top answer 1 of 3
1
I don't understand why there's brackets around an attribute:
[src]If you don't already know: Don't do that.<iframe>doesn't havetypeas a valid attribute, buttypedoes work for<iframe>'s sister tags<object>and<embed>.
The following Demo does not function on SO due to their restrictive sandbox. Go to this Plunker to see a functional Demo. Source PDF courtesy of PDFObject
It looks like Plunker no longer runs embeded content anymore, so if you want to review a functioning demo, simply copy and paste the entire code in any text editor (Notepad, Notepad++, etc.) and save as an HTML file (.html file extension).
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
figure {
display: table;
border: 3px ridge grey;
position: relative;
width: 96vw;
min-height: 250px;
height: auto;
margin: 0 auto 35px;
}
figcaption {
border: 3px ridge grey;
text-align: center;
font: 900 20px/1.5 Verdana;
padding: 0 0 8px 0;
background: rgba(51, 51, 51, 0.3);
color: #fff;
}
iframe,
object,
embed {
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<figure>
<figcaption>IFRAME</figcaption>
<iframe src="https://pdfobject.com/pdf/sample-3pp.pdf#page=1" class="frameSet" frameborder="0" allowfullscreen width="100%" height="100%"></iframe>
</figure>
<figure>
<figcaption>OBJECT</figcaption>
<object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" class="objectSet" type="application/pdf" width="100%" height="100%"></object>
</figure>
<figure>
<figcaption>EMBED</figcaption>
<embed src="https://pdfobject.com/pdf/sample-3pp.pdf#page=3" class="embedSet" type="application/pdf" width="100%" height="100%">
</figure>
</body>
</html> 2 of 3
1
You need to modify your URL like the below
iframeURL = 'urlThatYouGetFromAPI' + '&embedded=true'
<iframe [src]="iframeURL"></iframe>
Actually, All you need is adding this string &embedded=true to the end of URL.
Also you can use domSanatizer to make it more safe
readonly #domSanitizer = inject(DomSanitizer);
iframeURL = this.#domSanitizer.bypassSecurityTrustResourceUrl(
`${URL}&embedded=true`
);