A pdf in an iframe is displayed differently depending on browser - html

I want to show a pdf document within an iframe, (that's a client request not to leave the page).
This pdf document is a fictional form that has notes in order to explain to user how to fill it later.
You can see it here:
http://www.ideforce.fr/?q=content/processus-dinscription-chsct (click the “Example” button)
It works in Firefox (pdf shows up, notes are displayed on hover). In Opera pdf shows up, but I can't show the notes. In Chrome and Safari, the pdf displays ridiculously tiny, but I can zoom it, then the text in the notes misses the apostrophes and accentuated letters disappear (you'll have notice the site is french…)
Does the problem come from the web browser? Below is how I've implemented the iframe.
<iframe class="affichage-pdf" src="/sites/default/files/bi_cdt_test.pdf" frameborder="0"></iframe>
Or does the problem come from the pdf generated?
I would love to understand what is wrong.
NB:
In Opera I get the notes, but without the accents still.

Please tryout these two codes:
<object class="affichage-pdf" data="/sites/default/files/bi_cdt_test.pdf"></object>
<object data="/sites/default/files/bi_cdt_test.pdf"></object>
One of them should be working absolutely fine. Instead of iframe try with object as it is more powerful tag than iframe.

Related

embed does not open a document in Chrome

My Blazor web application needs to display a pdf document. It works in Firefox, but not in chrome. Here is the code:
<embed src="data:application/pdf;base64,#QuoteModel.Base64EngineeringDrawing" style="overflow:auto;width:800px;height:1000px" />
The document is stored in the variable Base64EngineeringDrawing.
Here is how it looks in Firefox:
But in Chrome it is empty. The inspection shows
Replacing embed with iframe does not help.
How can this be fixed?
The correct use of iFrame is along the lines of
<iframe height="500" width="500" src="http://google.com"></iframe>
Note the separate terminator that is not the one used for <embed />
When using Iframe with embedded datauri: there can be server system and client browser limitations so first test a file under 10KB and then again ensure a test file is under 1.5MB as those can be common hurdles/blockers.
For PDFs especially as application format, every browser handling of PDF data is different depending on html construction and user settings. Hence the recommended method is provide an optional image of preview thumbnail with <a href="filename link" for download as inline viewing is down to the client preferences.
Usually my settings in Edge and other browsers is ask, what to do with incoming PDF
In Firefox on Windows an iFrame with base64 data should offer options like this
Edge may not offer user control, when its set to default PDF viewer and may display the frame instantly
If I use Palemoon or Waterfox (Firefox based) the frame is blank as I prefer for most PDF downloads and opens either inline or off line in SumatraPDF (depending on page construction)
different constructs may behave differently in recent Firefox as there was a security related change around/after version 97.

Empty IMG SRC trigger logout in IE

I'm developing a web system now, and have debugged a very strange bug just now.
First I describe the bug itself here.
Problem:
When visit http://mysite/, it redirects to login and do logout at once.
There is a page, which url is /site.php?arg1=xxx&arg2=xxx everything is well in chrome, but when I use the ie8, after this page loaded, the account is logged out!
Bug Location:
After a long term of debugging, I found that the point which causing the problem is:
<img class="item_thumbnail" src="" />
If I remove this tag, everything become good.
So I'm wondering: when the <img> tag render, what's its behavior? Will it request the login page? But everything is in mass with ie.
What cause this problem? And what will ie an non-ie deal with the img-src?
Need your help!
As I suspected, according to
Empty image src can destroy your site
Internet Explorer makes a request to the directory in which the page
is located. For example, if you have a page running at
http://www.example.com/dir/mypage.htm that has one of these patterns,
IE makes a request to http://www.example.com/dir/ to fill in the
image.
Safari and Chrome make a request to the actual page itself. So
the page running at http://www.example.com/dir/mypage.htm results in a
second request to http://www.example.com/dir/mypage.htm to fill in the
image.
Hit F12 and look in the network tab to see.

Issues on chrome showing an embedded PDF

I have the following code in a html document:
<p>PDF sample</p>
<object data="http://www.whateverdomain.com/whatever/~/media/sample.pdf" type="application/pdf"></object>
This is working in IE, Firefox but not in Chrome. Appears a grey box in the browser with no embedded pdf. When I check on "network" tab in chrome I'm receiving a HTTP 200 response but PDF is not shown.
I tried URL encode tilde "~" symbol replacing it by %7e but still its not working on Chrome.
I don't have the possibility of changing the url which is provided by an external service.
Do you have any clue on how to solve ?
You might wish to try and use a simple iframe. At the very least I am pretty sure that works for chrome, might not work for IE though. Another alternative is using the Google Docs viewer, with that you are sure to be cross browser compatible, although some pdf's might not render perfectly. The last option you have is using something like pdf.js to render the pdf's yourself inside the browser. Gives you a lot of control and ensures that even people running computers without a pdf viewer installed (or a native pdf viewer like chrome and firefox) will be able to view the file.

Display issue when an iframe is embedded inside another iframe in Chrome 33

We've noticed some very strange behaviour in Chrome 33 which isn't replicated in earlier versions or in other browsers.
As an example, if you visit http://www.fatface.com/ and click on the Lace Jumper the content is cut off once you start scrolling down.
This overlay window is an iframe and sometimes content is pulled in again into an iframe (You Tube videos/Review forms etc) Content will display fine unless there is already an embedded iframe present or if by hitting a 'Write a Review' link to pull in an embedded iframe.
Has anybody come across this issue or got an idea for a fix?

Embed PDF will randomly not display

We are displaying an inline PDF via an object tag:
<object data='myPDF.pdf' type='application/pdf' width='100%' height='100%'></object>
On most loads, this works just fine - the browser will display the PDF using adobe's browser plugin-in. However, sometimes the browser will not display the PDF - it will load either a transparent or blank white background with no content inside it. This is occuring in both Firefox and Chrome browser. IE does not seem have this issue.
Even more bizarre - after the issue occurs, if we resize or move the browser, the PDF magically re-appears.
Has this ever happened to anyone else? Any ideas on how to improve this performance?
I think it has something to do with Adobe, I've encountered it too but never found a solution. It doesn't matter wich browser I use or wich computer. It just happens some times...
I know this is an old post but I've just had a similar problem and couldn't find a solution online.
I discovered some of my pdf's had a capitalised extension (.PDF), once I lower-cased them all it works fine for both in iframe and embed.