I am developing a website use by PC, Tablet and smartphone and i am trying to display a document in an iframe. I read a lot of post but I'm stuck.
I have a component html with an iframe inside:
<iframe src="http//..myDoc.pdf"></iframe>
On computer it works fine and the iframe display the document.
But I have two problems:
1) On android (tablet Samsung and smartphone Samsung), the document is not display and it is downloading automatically instead.
What I need to do for avoid download the document and for only display it?
2) On iPhone (6s), the document is displayed but the document's size exceeds the ifame'size.
How can I do to fit all the document in the iframe?
Thank you
I have found an answer and It works on all devices.
<iframe src="http://docs.google.com/gview?url=http://..myDoc.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>
I need to display sensitive data. Is it a secure way to use the docs.google.com/gview ?
If I need to do something to secure the iframe, can someone tell me please?
Thank you
Related
When I embed a pdf using google's PDF viewer
<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://jugglegood.com/out/scot-nery-resume-grand.pdf" ></iframe>
it defaults to displaying the pdf with a lot of space around it.
Then, I click the + magnify (zoom) button at the bottom of the viewer and it zooms to fit to width.
Is there a way to default using parameters or something to the fit to width zoom version of the embed? I couldn't find an answer, so i even tried using jquery to manually click the zoom button... no dice.
here are some ideas:
check your CSS to see if there are any settings for a class, id, iframe - your stylesheet could be telling the browser how to display the PDF on screen.
You can tell the iframe in the HTML to be 100% width. I run into this a lot for Google Maps hosted on a site.
<iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://jugglegood.com/out/scot-nery-resume-grand.pdf" width="100%" aria-hidden="false" tabindex="0"></iframe>
I keep the aria-hidden [this is for screen readers for people who are blind] and tabindex [keyboard navigation for people with disabilites]. Pleasee see my GitHub WAPS system for website code and design for people with diverse needs.
Building an app and I need to show a pdf on a screen within the app. I am open to either embedding it or using an iframe, but no matter what I do, I can't see the right side of the document. I can see it lengh-wise but no resizing methods are working to see the entire width. Two of my 100 approaches are below. Any help would be great. Designing for iPhone 6 primarily.
<embed src="filename.pdf" width="375" height="625">
<iframe id="menupdf" src="filename.pdf#zoom=100" width="1000" height="1000"></iframe
Okay, so I'm trying to iFrame a webpage. I don't know why, but it won't stay in my page (it pops out and goes to the main page). The code I'm using is:
<iframe>http://mywebsite.com</iframe>
How do I keep it in my site?
Try this:
<iframe src="http://mywebsite.com"></iframe>
You need to use the src property.
<iframe src="http://mywebsite.com"></iframe>
HTML/text content placed inside the tags of an iframe is treated as "fallback" content that only shows up if the browser doesn't support iframes. See the MDN documentation for full details.
<iframe src="http://mywebsite.com">
This sentence only shows up if the browser doesn't support iframes!
</iframe>
Thus, you were creating an iframe that didn't point to any page with its src property (so it remained blank), and had the text "http://mywebsite.com" as fallback text to appear in browsers that don't support iframes.
EDIT:
If you don't control the site, it's possible that the framed site has some logic that says something like:
// if we are not the highest frame, someone is try to frame this site
if(window.parent != window)
// redirect the framing parent site to our site
window.parent.location.href = 'http://iframedsite.com';
This logic detects if the site is being embedded by someone else (e.g., your own site) and redirects the parent frame. You can confirm whether this is the problem by simply framing IANA's website, https://www.iana.org/ (or just http://www.example.com), which plays nicely when it is framed and doesn't do parent-frame redirects.
What I am trying to do is embed a website into mine. When you search something on their page their embed site redirects through their pages though it will still be on my web page. Any help will be appreciated. I have partnered up with this site and they don't know how to do it themselves.
I am sorry if this is confusing. Here is a example if it helps
<html>//my site
<header>//my site
</header>//my site
<body>//my site
//where embed website is with their page redirects and search engine
</body>//my site
</html>//my site
When you search on their site or go to their pages link on their site. This should be like this in way.
<html>//my site
<header>//my site
</header>//my site
<body>//my site
//new page on the embed site after redirect
</body>//my site
</html>//my site
Any thoughts or places I can go help me figure this out.
You can embed websites into another website using the <embed> tag, like so:
<embed src="http://www.example.com" style="width:500px; height: 300px;">
You can change the height, width, and URL to suit your needs.
The <embed> tag is the most up-to-date way to embed websites, as it was introduced with HTML5.
Put content from other site in iframe
<iframe src="/othersiteurl" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
You might want to check HTML frames, which can do pretty much exactly what you are looking for. They are considered outdated however.
**What's the best way to avoid a fixed size, i.e., to have the embedded website scale responsively to the browser's window size? I'd like to avoid scroll bars within my website. – CGFoX Feb 2 '19 at 15:52
**Is it possible to set width and height to percentages instead of absolute pixels? – CGFoX Mar 16 at 11:53
ANSWER: <embed src="https://YOURDOMAIN.com/PAGE.HTM" style="width:100%; height: 50vw;">
I'm current trying to display a pdf inside an iframe
<iframe id="iFrame" height="583px" width="785px" src="pdf/test.pdf" scrolling="yes" ></iframe>
after i test on ipad, i found out that it cannot be scroll. is there any solution to this?
Thanks.
I would highly suggest using Scribd's service, it even let's you restrict user downloads if that is a concern.
If you place two fingers on the text in the pdf, you can scroll that text instead of the whole page.