I tried to load PDF file in IFrame. it is working with FF and Chrome but does not load in IE. IE asking to save or open to file instead of load in IFrame. I am loading file using javascript.
I am using following code :
<html>
<head>
<script type="text/javascript">
function setPDF() {
var iframe = document.getElementById('iframe1');
iframe.src = "pdffile/sample1.pdf";
}
</script>
</head>
<body>
<iframe id="iframe1"></iframe>
<input type="button" value="Click" onclick="setPDF();" />
</body>
</html>
Please suggest me
Thanks
Related
I am using embed tag to load pdf. It's a legacy application so can't use other approach. I want to run some javascript function when pdf loads completely in embed tag. How can I do this?
I have tried using onload event on embed tag but it doesn't work.
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript">
//This function should be called when pdf loads.
function ContentLoaded()
{
//Some code which should execute only after PDF loads on browser
}
</script>
</head>
<body>
<embed id="content" src="myfile.pdf"/>
</body>
</html>
I suggest you to place <script> tag just before the closing body tag (</body>). This way, JS code will run after the HTML content loaded.
If you place the code below before the closing head tag (</head>), it shows you error in developer's console. But if you place it before </body> tag, it works just fine.
<script type="text/javascript">
var pdf = document.getElementById('content');
console.log('pdf:', pdf);
var w = pdf.getAttribute('width');
console.log('pdf width is exactly:', w, 'pixels');
</script>
I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as
below
<html>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe>
<html>
<body>
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
window.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
</iframe>
</div>
</body>
</html>
Now my goal is to append var url inside text area which is in parent html tag.
Please help me !!!
The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:
parent.document.getElementById("texteditor").value = URL;
Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.
Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.
E.g.:
Main page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
<iframe src="theframe.html"></iframe>
</div>
</body>
</html>
theframe.html:
<!doctype html>
<html>
<body>
<input type="button" value="Click to set" onclick="mySubmit()">
<script type="text/javascript">
function mySubmit() {
var URL = "http://localhost:61222/14CommunityImages/hands.png";
parent.document.getElementById("texteditor").value = URL;
}
</script>
</body>
</html>
My concept is to update the value of the text box in the main page from the iframe . This code is working in firefox , but not working in Internet Explorer and Chrome . Both main.html and frame.html are in same location . I need suggestions to make it work in all the browsers .
main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
</head>
<body>
Parent textbox :<input type="text" id="parentbox"></br></br></br>
<iframe src="frame.html" ></iframe>
</body>
</html>
frame.html
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
function PushValues()
{
var frame_value = document.getElementById("framebox").value;
window.parent.document.getElementById("parentbox").value =frame_value;
}
</script>
</head>
<body>
<input type="text" id="framebox" >
<input type="button" value ="fill" onclick="PushValues()">
</body>
</html>
As per security policies, cross-domain access is restricted. This will happen if you are trying to show a page from domain 1 in domain 2 and try to manipulate the DOM of page in domain 2 from the script in domain 1. If you are running the pages from same location on a server. This shouldn't happen. However, if you are just saving them as HTML files and trying to open them in your browser, it should not work. I have created two jsbins for your code and it is working on chrome. Try to access them using the below links.
Main.html: http://jsbin.com/afazEDE/1
iframe.html: http://jsbin.com/ayacEXa/1/
Try to run main.html in edit mode in JSBin by keeping console open in chrome (F12) and click fill button. It will not work and will show you the error. If you run them as it is (in run mode of JSBin), it will work.
Jquery -
function PushValues()
{
var frame_value = $('#framebox').val();
parent.$('body').find('#parentbox').val(frame_value);
}
It's always work for me.
Run this code on a server like xamp or wamp it wont work directly
Main.html
<!DOCTYPE html>
<html>
<head>
<title> main window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
Parent textbox :<input type="text" id="parentbox" value=""></br></br></br>
<iframe src="iframe.html"></iframe>
<script>
window._fn = {
printval: function (response) {
$("input").val(response);
},
};
</script>
</body>
iframe
<!DOCTYPE html>
<html>
<head>
<title> frame window </title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<input type="text" id="framebox">
<input type="button" value="fill" onclick="PushValues()">
<script language="javascript">
function PushValues() {
window.parent._fn['printval']($('input').val());
}
</script>
</body>
</html>
Since you're using jQuery try this
var frame_value = $('#framebox').val();
$('#parentbox', window.parent.document).val(frame_value);
You should try P3P policy which is highly related to iframes and Internet Explorer.
response header set to the iframe document
header key= 'P3P' header value: 'CP="IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT"'
How to send a PDF file directly to the printer using JavaScript?
I found two answers in a forum:
<embed src="vehinvc.pdf" id = "Pdf1" name="Pdf1" hidden>
<a onClick="document.getElementById('Pdf1').printWithDialog()" style="cursor:hand;">Print file</a>
and
<OBJECT id = "Pdf2" name="Pdf2" CLASSID="clsid:CA8A9780-280D-11CF-A24D-444553540000" WIDTH="364" HEIGHT="290">
<PARAM NAME='SRC' VALUE="file.pdf">
</OBJECT>
<a onClick="document.Pdf2.printWithDialog()">Print file</a>
But my problem is that it just works on IE, and doesnt work in Firefox or Chrome.
Is there any solution for this?
I think this Library of JavaScript might Help you:
It's called Print.js
First Include
<script src="print.js"></script>
<link rel="stylesheet" type="text/css" href="print.css">
It's basic usage is to call printJS() and just pass in a PDF document url: printJS('docs/PrintJS.pdf')
What I did was something like this, this will also show "Loading...." if PDF document is too large.
<button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
Print PDF with Message
</button>
However keep in mind that:
Firefox currently doesn't allow printing PDF documents using iframes. There is an open bug in Mozilla's website about this. When using Firefox, Print.js will open the PDF file into a new tab.
There are two steps you need to take.
First, you need to put the PDF in an iframe.
<iframe id="pdf" name="pdf" src="document.pdf"></iframe>
To print the iframe you can look at the answers here:
Javascript Print iframe contents only
If you want to print the iframe automatically after the PDF has loaded, you can add an onload handler to the <iframe>:
<iframe onload="isLoaded()" id="pdf" name="pdf" src="document.pdf"></iframe>
the loader can look like this:
function isLoaded()
{
var pdfFrame = window.frames["pdf"];
pdfFrame.focus();
pdfFrame.print();
}
This will display the browser's print dialog, and then print just the PDF document itself. (I personally use the onload handler to enable a "print" button so the user can decide to print the document, or not).
I'm using this code pretty much verbatim in Safari and Chrome, but am yet to try it on IE or Firefox.
This is actually a lot easier using a dataURI, because you can just call print on the returned window object.
// file is a File object, this will also take a blob
const dataUrl = window.URL.createObjectURL(file);
// Open the window
const pdfWindow = window.open(dataUrl);
// Call print on it
pdfWindow.print();
This opens the pdf in a new tab and then pops the print dialog up.
Try this: Have a button/link which opens a webpage (in a new window) with just the pdf file embedded in it, and print the webpage.
In head of the main page:
<script type="text/javascript">
function printpdf()
{
myWindow=window.open("pdfwebpage.html");
myWindow.close; //optional, to close the new window as soon as it opens
//this ensures user doesn't have to close the pop-up manually
}
</script>
And in body of the main page:
Click to Print the PDF
Inside pdfwebpage.html:
<html>
<head>
</head>
<body onload="window.print()">
<embed src="pdfhere.pdf"/>
</body>
</html>
a function to house the print trigger...
function printTrigger(elementId) {
var getMyFrame = document.getElementById(elementId);
getMyFrame.focus();
getMyFrame.contentWindow.print();
}
an button to give the user access...
(an onClick on an a or button or input or whatever you wish)
<input type="button" value="Print" onclick="printTrigger('iFramePdf');" />
an iframe pointing to your PDF...
<iframe id="iFramePdf" src="myPdfUrl.pdf" style="dispaly:none;"></iframe>
More : http://www.fpdf.org/en/script/script36.php
<?php
$browser_ver = get_browser(null,true);
//echo $browser_ver['browser'];
if($browser_ver['browser'] == 'IE') {
?>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pdf print test</title>
<style>
html { height:100%; }
</style>
<script>
function printIt(id) {
var pdf = document.getElementById("samplePDF");
pdf.click();
pdf.setActive();
pdf.focus();
pdf.print();
}
</script>
</head>
<body style="margin:0; height:100%;">
<embed id="samplePDF" type="application/pdf" src="/pdfs/2010/dash_fdm350.pdf" width="100%" height="100%" />
<button onClick="printIt('samplePDF')">Print</button>
</body>
</html>
<?php
} else {
?>
<HTML>
<script Language="javascript">
function printfile(id) {
window.frames[id].focus();
window.frames[id].print();
}
</script>
<BODY marginheight="0" marginwidth="0">
<iframe src="/pdfs/2010/dash_fdm350.pdf" id="objAdobePrint" name="objAdobePrint" height="95%" width="100%" frameborder=0></iframe><br>
<input type="button" value="Print" onclick="javascript:printfile('objAdobePrint');">
</BODY>
</HTML>
<?php
}
?>
parent.html
<html>
<head>
<script type="text/javascript">
function openWin()
{
myWindow=window.open('child.html','','width=200,height=100');
}
function callback(){
alert("test");
}
</script>
</head>
<body>
<input type="button" value="Open 'myWindow'" onclick="openWin()" />
</body>
</html>
child.html
<html>
<head>
<script type="text/javascript">
window.opener.callback();
</script>
</head>
<body>
</body>
</html>
And the problem is that the child page calls parent's page callback function in FF, IE but not in Chrome.
Any idea ?
Problem happens because of Chrome security error. Domains, protocols and ports must match. But it also happens when page is open from local files system.
Open your page from server, it should be without any problems.
The problem might be the way how chrome run javascript. Chrome sometimes run the js so fast and early and even the DOM is not ready for manipulation. Try this in your child.html
<script type="text/javascript">
setTimeout(function(){window.opener.callback();}, 100);
</script>
I am not sure if this is the exact problem for you, I encountered this problem with jQuery.ready() on chrome.