Print pdf from iframe - javascript

I dynamically create a pdf in a iframe:
<iframe name="output" id="output"></iframe>
and try to print from it:
window.frames["output"].focus();
window.frames["output"].print();
But how you can see in this example:
http://jsfiddle.net/FEvq6/78/
It prints a blank site.

It prints blank page because you're printing the iframe itself. Here is what you should do:
1. The iframe should contain EMBED tag which will load the PDF (for some reason stack overflow did not formatted code well, please see paste bin link below):
< embed src="path_to_script_which_generates.pdf" type="application/pdf" id="pdf"
width="100%" height="100%">
< /embed>
2. Then you should call the EMBED object to print the document. But since it may require some time for it to load you would need a timeout:
var doPrinting = (id){
var pdfObject = document.getElementById(id);
if (typeof(pdfObject.print) === 'undefined') {
setTimeout(function(){ doPrinting(id); }, 1000);
} else {
pdfObject.print();
}
}
doPrinting('pdf');
Here is paste bin of the above: http://pastebin.com/s6qSTE8t

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<strike>funny</strike>.
<iframe src="file_to_print.pdf" class="frameSet" type="application/pdf" runat="server" name="I5" scrolling="yes" width="100%" height="400"> </iframe>
</body>
</html>

Related

Getting the content of #document within an iframe

I am trying to access the body of the document from an iframe.
I the body I want to get the src value of another iframe.
<iframe src="https://putstream.com/movie/oblivion?watching=RaHP6KwPJ8prB0MfMlhJiYYwW" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="height: 820.5px;">
#document
<html lang="en">
<head><style class="vjs-styles-defaults">
</head>
<body>
<iframe id="openloadIframe" allowfullscreen="" webkitallowfullscreen="true" mozallowfullscreen="true" style="width:100%;height:100%;" src="https://openload.co/embed/bbhP94t0548"></iframe>
</body>
</html>
My Attempts:
var oiframe = document.getElementsByTagName('iframe')[1]; //accessing the first iframe
var sif = oiframe.getElementById('openloadIframe').src; //getting the actual content
var ifc = oiframe.contentWindow.getElementById('openloadIframe').src; //at this point I just tried to get it working
var ifhtml = oiframe.contentWindow.document.body.innerHTML.getElementById('openloadIframe').src;
None of these work and I found nothing else how I could access the content of #document.

How to change iframe src

Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.

window.myframeid.location.href is not working on google chrome

I have a page that uses an iframe. Underneath that there is a frameset which has two frames. One of the frame id is myframeid. Here is the code snippet.
<html>
<head></head>
<body>
<iframe name="someiframe" src="/app/html/files">
<html>
<head></head>
<body>
<script>
function thismyfunction(dObj, dTo, dCode){
if (dTo == 'start'){
if (tempora) {
if (confirm('Is this correct?')){
window.myframeid.location.href = '/code/cgi/bin';
}
} else {
if (confirm('Prefer to view your account?')){
window.myframeid.location.href = '/code/welcome/account';
} }
}
}
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="someframe" id="topframe" src="/app/source/default.htm" scrolling="no">
<frame name="someframe2" id="myframeid" src="/app/html/load">
<input type="button" onclick="parent.thismyfunction(this.form, 'start')"
id="nicebutton" value="Hello world" />
</frameset>
</body>
</head>
</html>
</iframe>
</body>
</head>
</html>
This is working on IE 11 but not working on google chrome version 36. Working as in when I click on the button using IE 11 browser, the function works. but not in google chrome. I think the google chrome doesn't like the below code.
window.myframeid.location.href = '/code/cgi/bin';
Any ideas why? Thank you!
myframeid is an id, you can get a reference with document.getElementById('myframeid'). You can load a new page by setting its src attribute.

Print PDF File in IFrame using javascript getting one page only

here is my code to print a pdf file. here while printing time iam getting one page only i need a solution for that
function printPdf(){
var ifr = document.getElementById("frame1");
//PDF is completely loaded. (.load() wasn't working properly with PDFs)
ifr.onreadystatechange = function () {
if (ifr.readyState == 'complete') {
ifr.contentWindow.focus();
ifr.contentWindow.print();
}
}
}
I suspect that's because the whole window gets printed (which has the current view of the iframe with the 1st page of the PDF rendered). Use <object> instead:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script>
function PrintPdf() {
idPrint.disabled = 0;
idPdf.Print();
}
function idPdf_onreadystatechange() {
if (idPdf.readyState === 4)
setTimeout(PrintPdf, 1000);
}
</script>
</head>
<body>
<button id="idPrint" disabled=1 onclick="PrintPdf()">Print</button>
<br>
<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"
width="300" height="400" type="application/pdf"
data="test.pdf?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">
<span>PDF plugin is not available.</span>
</object>
</body>
This code is verified with IE. Other browsers will still render the PDF, but may not print it.
[UPDATE] If you need dynamic loading and printing, the changes to the above code are minimal:
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script>
function PrintPdf() {
idPdf.Print();
}
function idPdf_onreadystatechange() {
if (idPdf.readyState === 4)
setTimeout(PrintPdf, 1000);
}
function LoadAndPrint(url)
{
idContainer.innerHTML =
'<object id="idPdf" onreadystatechange="idPdf_onreadystatechange()"'+
'width="300" height="400" type="application/pdf"' +
'data="' + url + '?#view=Fit&scrollbar=0&toolbar=0&navpanes=0">' +
'<span>PDF plugin is not available.</span>'+
'</object>';
}
</script>
</head>
<body>
<button id="idPrint" onclick="LoadAndPrint('http://localhost/example.pdf')">Load and Print</button>
<br>
<div id="idContainer"></div>
</body>
<iframe src="teste.pdf" id="meupdf" width="800" height="600" />
function printPdf) {
var PDF = document.getElementById("meupdf");
PDF.focus();
PDF.contentWindow.print();
}

JavaScript / jQuery only works on second click

I'm developing a little site that loads a local HTML file into an iframe on click of a button. The iframe should be resized based on the size of the content of the local HTML file. The following almost works -- however, I need to click the "Fill" button twice in order to resize the iframe (Firefox).
I'm pretty sure it's got something to do with how events are being handled, but I've tried e.preventDefault() and return false without any luck. Any ideas?
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Load</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#run").click(function(e) {
e.preventDefault();
var framex = document.getElementById('iframe');
framex.setAttribute("src", "local.html");
framex.style.height = (framex.contentWindow.document.body.scrollHeight + 50) + "px";
return false;
});
});
</script>
</head>
<body>
<input id="run" type="button" value="Load">
<div id="div" style="width: 100%; height: 600px; overflow: auto;">
<iframe id="iframe" width="100%" frameBorder="0">
</iframe>
</div>
</body>
</html>
The first time you are assigning framex.style.height, the page was not loaded yet, so the document has no size (or does not even exist, which would result in an error then).
You have to wait until the page was loaded:
framex.onload = function() {
this.style.height = (this.contentWindow.document.body.scrollHeight + 50) + "px";
};

Categories

Resources