Firefox and MS Edge download content in hidden element (but should not) - html

The following code snippets highlights what I consider to be a bug (or is it a feature?) in MS Edge and Firefox: a PDF file is downloaded when displaying the page, even though it is hidden.
Chrome and (not surprisingly) MS Edge Chromium, do not download until the element is visible, which I what I would expect.
<html>
<head>
<title>Test Embedded PDF</title>
<body>
<!-- ... explanation text removed ... -->
<div style="display:none">
<object id="pdf-view" data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" type="application/pdf" style="width:100vw;height:100vh;"></object>
</div>
</body>
</html>
Screenshot: On Chrome - PDF IS NOT downloaded
Screenshot: On Firefox - PDF IS downloaded, despite the fact that it is hidden
Has anyone encountered this, and is there a work-around?
Thank you

Related

Internet explorer and edge attempt to download a file as html

I have an apache server that serves an html page with content similar to the following:
<html>
<head>
<link href="meta/style.css" rel="stylesheet" type="text/css" charset="UTF-8">
</head>
<body>
<h1>Welcome</h1>
<p><b><li>Welcome to download page</b></li>
</p>
<p>
file1.7z<br><br>
file2.7z
</p>
</body>
</html>
When I click on the file1.7z or file2.7z link, chrome starts downloading it a 7z file, but internet explorer and edge attempt to download it as html file. If I select all files in the save as dialog box and change extention to 7z, the downloaded file is a valid 7z file.
I have found out about the download attribute which will probably fix this for Edge, but it looks like Internet explorer and other browsers may not even support this.
Is there any apache server configuration I can set, or anything I can add to my html page's header, to force all browsers to download this as a 7z file?
#user13267 It sounds like you may need to add the MIME type: application/x-7z-compressed
I think you would need to do so on your server at this path:
/etc/apache2/mods-enabled/mime.conf

Image in div is not show in Chrome but shows in IE

I have the following simple HTML code, the code runs correctly using the run snippet and in Internet Explorer. However, if I copy this code, save it to text.html and try to run it in Chrome the image doesn't appear.
What is the nature of this problem? And, how do I fix it?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<H1>This is Scott!</H1>
<div>
<img src='http://mgecombanners.com/wp-content/uploads/2017/12/5KAWFvr_JanTV18_Red_728x90.jpg' border='0' />
</div>
</body>
</html>
If you have AdBlocker enabled it's blocking the image probably as it contains word "banner". Image displays as intended on incognito window.
On an https website contents from an http website will not be loaded in all browsers, which is the case here (in the snippet on SO at least). (might also depend on personal browser settings)

HTML code set as src in iframe not showing in IE 11

<html>
<head>
</head>
<body>
<iframe id='smartPartFrame' src='data:text/html;charset=utf-8,<h1>inteGREAT</h1>' scrolling='no' width='1000px' height='70px'></iframe>
</body>
</html>
The above html code used to show h1 in iframe. Chrome, Firefox, Edge working fine. IE 11 is showing the error: the page cannot be displayed. I wants to set html directly in src not file path.
Internet Explorer 11 does not support data URIs in iframes, nor any other way to embed HTML inline in an iframe.
The "intended" way to do this in the standard is with the srcdoc attribute, not the src attribute given a data URI, but browser support for srcdoc remains poor.

Save Complete Website - Background Images not showing

When I click Save As in Firefox, Chrome, or IE, then choose "Webpage, Complete" from the save as menu, it does not appear to be saving the background images defined in my CSS. Am I doing something wrong? Here is a sample problem:
test.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<link href="test.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<div id="test"></div>
</body>
</html>
test.css
#test {
width: 400px;
height: 400px;
background: url(img/bg.jpg)
}
By default browsers won't download images set in css.
You can do this in Firefox:
Right click -> View page info -> select media tab -> highlight all the files -> save as...
Recently I've been testing saving the complete HTML web page with background images across various browsers and only Opera 12 was able to save the complete website as seen online. Just open the desired website, click Ctrl+S and choose to save a complete website.
The only solution who worked for me is to save the page as MHT with the plugin unMHT (for firefox) :
https://addons.mozilla.org/fr/firefox/addon/unmht/
Even webfonts are dowloaded !!
MHT can be opened in IE & Chrome (and firefox but only with this extention).
I know this solution is not perfect but this is the better I found...

Does XFBML work in Internet Explorer 9?

I have a like box setup in my website using the following code as exampled by Facebook.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/platform" width="292" show_faces="true" stream="true" header="true"></fb:like-box>
It works in all browsers (Chrome, Safari, Opera, Firefox, IE7, IE8) but not IE9. On inspecting the code it still reads the same as above, whereas the others get replaced with an iFrame.
I have also tried adding the following line to the html element, although this did not help.
xmlns:fb="http://www.facebook.com/2008/fbml"
Does anyone know how to resolve this issue?
The iframe version of the like box does however work, but XFBML is more desired.
Not sure why it is not working in IE9, but changing the document mode to IE8 will make it work -you can do that by adding this to the head section
<meta http-equiv="X-UA-Compatible" content="IE=8" >
Ref: http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx
You can add facebook namespaces to the head of your HTML. Just make sure you format correctly.
<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/">
<body>
<!-- My super great XFBML like button -->
</body>
</html>
I have the same problem and I found the solution for me:
I'm using blogger template which by default contain this tag:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
I deleted it and everything is working good.