What I am attempting to achieve:
I have a page that has some header information followed by a document via embedded PDF and finally some footer information. Ideally, this would be displayed as one continuous document that could be printed as such.
What I have found:
I load the PDF into an iframe on the page. Because this document is not public it is requested via server-side action that checks permissions and returns the document as Content-Type: application/pdf;
This works to load the PDF but I am unable to turn off toolbars and other embedded PDF viewer controls (minor issue)
When I attempt to read the iframe document height using javascript in the containing page to modify the iframe height and thus remove the scrollbars I get a cross-domain origin issue despite the PDF loading from the same domain, server, etc.
Any help or pointers much appreciated.
There is a standalone viewer which you can use show pdfs:
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
This don't provide you with
toolbars and other embedded PDF viewer controls
EDIT : If you don't want to use the above option then you can also use PDF.js an open project to render pdf in html.
<iframe id="pdf-js-viewer" src="/web/viewer.html?file=%2Fmy-pdf-file.pdf" title="webviewer" frameborder="0" width="500" height="600"></iframe>
Related
I'm trying to embed https://ncase.me/remember/sims/ebbinghaus/?mode=0 onto a page using an iframe. However, when I do, it does not display any of the interactive elements. See https://codepen.io/UYasher/pen/yLXaPeo for the behavior in an iframe:
<iframe
style="width: 600px; height:370px;"
will_source="https://ncase.me/remember/sims/ebbinghaus/?mode=0"
scrolling="no"
class="simulation"
src="https://ncase.me/remember/sims/ebbinghaus/?mode=0"
>
</iframe>
How can I fix this issue so that the iframe shows all the elements present on the original page?
What I think is causing the issue:
I think this occurs because the iframe is unable to load the scripts at the bottom of ncase.me page. I don't understand why this is, though, as javascript appears to work in some iframes. For example, in order for google maps to run, scripts in the contents of the iframe need to be loaded and run.
I have created a chrome extension.
I am trying to render a eBay web page in the same browser in a div using an i frame inside the div element. I have set the source attribute url to be https then also I am getting an error of Mixed mode content
Ideally, it should open a web page in the div element. which it was doing previously. But, suddenly, it has stoped
I am getting an error of Mixed mode content. Even when I am sending as https request, it is converting to http. Please see attached file for the issue.
Issue in Console
<div class="my-div">
<iframe id="my-iframe" src="https://offer.ebay.com/ws/eBayISAPI.dll?
ViewBidsLogin&item=222313350236&ViewBidsLogin=">
</iframe>
</div>
I noticed that when you embed sites like Youtube.com and Streamble.com, only the video appears in the iframe. How do they do that? Shouldn't an iframe load the whole webpage?
What I've tried:
Initially I thought you're supposed to wrap the mp4 file in og:video tags, but that didn't work.
How do they do that? By only serving up the video. Look at the url in the src attribute on the iframe. Load it up on a browser (you'll need to add http to the front of it) and you'll get only the video content.
I am using iframes in my Jsp page to display Pdf. It's working perfectly and showing pdf correctly .
Now I need to add an entry to database while downloading or take print using the icons shown in pdf. Is there any way in jquery or javascript to get the click event of that icons, so that i can insert an entry into database?
this is my jsp page,
<div class="m6" >
<iframe src="test.pdf" width="875" height="95%" id="iframe" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>
I am using servlet(pdfServlet) to display pdf. Any help will be appreciated.
The PDF is loaded into an application that is separate from the browser (although embedded in the browser) and there is no communication between the PDF application and the browser. So any events that occur in the PDF are not 'transmitted' to the browser and therefore cannot be captured.
I suggest that you redesign it so that the buttons are in the web page and therefore the click events are detectable.
I'm trying to implement this in Confluence pages.
Basically, I have a PDF file (exported from Powerpoint), which has hyperlinks embedded, so when you click on the links in the PDF it opens whatever page the link is.
This PDF file is opened within an iframe in the Confluence page (which is created using a custom user macro).
Unfortunately, on Firefox and IE, the PDF links open the new page within the iframe, rather than the parent window. Chrome's inbuilt PDF viewer works fine (opening in the parent window).
Also unfortunate is that I don't know much about javascript or HTML. The code we are using currently for the 'create iframe' custom macro in Confluence is as follows:
## #param Url:title=URL|type=string|required=true|desc=URL for the iFrame
<script type="text/javascript">
jQuery(function($) {
var ratio = Math.sqrt(2);
var target = $("#f");
function fixRatio() {
target.width("100%");
if (target.width() > 1000) {
target.width(1000);
}
target.height(Math.ceil(target.width() / ratio));
}
$(window).bind("resize", fixRatio);
fixRatio();
});
</script>
<iframe id="f" src="$paramUrl" width="100%" style="border:0">x</iframe>
Now, most of this is just to do with sizing the iframe approximately to the PDF file (for aesthetic reasons).
Basically what I want to know is how do I get any links from the PDF opening not in the iframe but in the parent window?
I thought about performing an operation on the iframe window unload, something like
window.onunload=function()
within the javascript, or
<body onunload="somecode">
in the HTML, but I'm not sure where to place it or what the code is that I would need to force the new page to be passed to the parent window and rendered there instead of the iframe.
I've tried
<base target="_parent" />
but because the PDF viewer is separate from the rest of the page in the iframe it doesn't seem to work.
Sorry I'm very new to this, we did get a someone to help us but he wrote the code then didn't stick around to help with any issues, and I've only seen my first HTML and javascript today! So trying to learn fast...
Thanks!