Printing a PDF in an iFrame from the parent frame in Firefox - javascript

So I have a main document which contains an iFrame, in which is a PDF file, which contains a barcode (Created by iTextSharp and sized for a Dymo Label printer).
HTML looks something like:
<html>
<body>
<div class="content">
<iframe src="/pdfs/label.pdf" NAME="loyaltyBadge" ID="loyaltyBadge"></iframe>
<br/>
<button id="printPdf">Print</button>
</div>
</body>
</html>
Using jQuery or standard JS, how can I make the button trigger the print dialog on the PDF frame?
This:
$('#printPdf').click(function () {
document.loyaltyBadge.print();
});
Seems to work in Chrome, but not FF where I get an error document.loyaltyBadge is undefined
I've tried Googling, but most results are people giving suggests where the document in the iFrame is HTML so we can put the print control in the iFrame itself, which of course in this case I can't do.
The iFrame is small so the native Print control from the embeded Adobe Reader is no use.

Related

Removing or hiding elements from a webpage within a chrome web extension (manifest 3)

This is my first post ever. Please be considerate.
I have an iframe :
<div>
<iframe id="myIFrame" src="https://app.repree.com" width="500" height="500" title="description"></iframe>
</div>
<script src="popup.js"></script>
</body>
I would like to go through the login (working as of now) and then remove or hide some of the HTML tags (not working as of now) so that only certain key features of the website appear.
Say.. only Activities and forms tab. (View picture for reference) Page after login
Each time I try to access the html of the iFrame, a null exception is shown to me. Thus, making me unable to affect the display of the page.
If anyone has any ideas, do please tell.
What I have tried so far:
Using JQuery
iFrame alternatives (webview, etc) : these would not display anything at all!
What I expected
JQuery would remove the elements successfully.

Run JavaScript targeting iframe in electron

Is it possible to execute JavaScript in either a preload script or manually targeting an iframe in a webview /The webview is based on chrome , my intuition says it should be possible.
Basically I would like to click a button inside the iframe using:
document.querySelector('button selector').click();
The page looks something like this. (The page is loaded in the webview)
<html>
<body>
<iframe>
<button id="foo">Click</button>
<iframe>
</body>
</html>

PDF file not displaying correctly/resizing on mobile inside iframe tag

The pdf file dosen't resize with the browser size. On mobile on chrome it shows the pdf file as a blank page. How can I get the file to resize with the browser and how to I get the pdf file to show on mobile?
My code looks like this:
<iframe type="application/pdf" data="mypdf.pdf" width="100%"
height="800px"></iframe>
Try replacing the 'data' attribute with 'src'.

Javascript/DOM not detecting new HTML

I'm working on a private Chrome extension that injects some code into specific websites. I am successful for all except THIS 1 website (which I cant provide you with login access, sorry).
My extension doesn't detect the new(most) of the html content being loaded on the page after navigating through the site only.
For example, when I run document.documentElement.innerHTML; the return string is only the barebones of the page.
The site is using JQuery and I do have JQuery also loaded in my extension, but it still doesn't want to read any elements. The elements do show up in Developer Console but NOT on the Source Page or Frame's Source Page
I really need access to those Elements but I can't figure it out.
Any help is appreciated.
Thanks a bunch.
EDIT: Turns out nothing was working because all the new content was being loaded into an iFrame. Now I have to research iframes :(
This is what the code in the developer's tools looks like
<html>
<iframe src="..." >
#document
<html>
<div id="im trying to get">this content</div>
</html>
</iframe>
</html>

Javascript in Iframe within Div not working

I have a webpage that I would like to embed within another page. On the page that is to be embedded I have some window.onload javascript that will load a PDF document via the embed tag. If I use just the Iframe tag like this:
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
The Javascript will run just fine. But I am trying to create a background and border for the iframe so I have wrapped the iframe in a div like so:
<div id="content" class="border">
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
</div>
As soon as I do it this way the javascript will not run. Here is the screenshot of what I am trying to do. I do not believe that the styling that is present on the div ( curved borders, gradient, etc is possible on an iframe)
I am using PDFObject to generate the PDF on the page. The iframe is also loading the company's external website in the content section on demand and this is what they want so unfortunately i have to use iframes. This has to be done without using anything except javascript as well otherwise I would just use php.
I have to post the SCREENSHOT outside of this site on photobucket due to restritions sorry:
http://i721.photobucket.com/albums/ww217/the_t3rminat0r/Capture-2.png
It looks margin property in div style (or border class in your example) causes the problem.

Categories

Resources