print div or iframe content from another div using javascript - javascript

I have a PHP web page. On the web page i have a iframe and few DIV. Now I want a single print button, which will print the content of the current active window. If no iframe or div is open then it will print the main page else the current iframe source or div content using javascript.
is it possible?

Here is an sample to print an element. Hope this will help you to get an idea.
<html>
<head>
<input type="button" value="Click to Print" onclick="printDiv()" />
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
</script>
<script type="text/javascript">
function printDiv() {
var data = $('#divToPrint').html()
var printWin = window.open('', 'Print Preview', 'height=600,width=800');
printWin.document.write('<html><head><title>Print Preview</title>');
printWin.document.write('</head><body >');
printWin.document.write(data);
printWin.document.write('</body></html>');
printWin.print();
printWin.close();
return true;
}
</script>
</head>
<body>
<div id="divToPrint">jQuery is a fast, small, and feature-rich
JavaScript library. It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much simpler with an
easy-to-use API that works across a multitude of browsers.</div>
</body>
</html>
The data variable should be replaced with what ever that you want to print.

Related

Javascript print div not working in Safari

I have a Javascript function that prints the contents of two elements in a webpage. It works in Chrome, Firefox and IE but Safari just brings up an empty window and if I select print, it simply prints a blank page.
Here's my code:
var content = "<!doctype html><html><head>";
content += '<link rel="stylesheet" href="/css/normalise.css" type="text/css" />';
content += '<link rel="stylesheet" href="/App_Themes/CS2011/StyleSheet.css" type="text/css" />';
content += "</head><body>";
//Find the div to insert the rest of the html after
var contractToFind = $(divElement).parent().find("div").get(0);
//Insert rest of code
content += contractToFind.innerHTML;
content += "</body></html>";
//Set up print window and print
var printWindow = window.open('', '', params);
printWindow.document.write(content);
printWindow.document.close();
printWindow.focus();
printWindow.print();
//Close the window
printWindow.close();
Is there a way I can modify my code to allow it to render the page properly in Safari so I can print it? Preferably without using additional plugins.
Edit: Thanks Eric but that didn't work for me. Adding a time delay to the print seems to work well although it's not ideal, even a 10ms delay solves the issue. The line I used was:
setTimeout(this.print, 100);
I found a solution to this problem. The problem resides in the fact that window.print() is not standard for all browser and Safari probably takes a different approach on when triggering it.
I changed a little your code so maybe this solution can't fit your possibility but it works for all browser (tested on Safari, FF, Chrome, IE8).
Note that you need to have a different page for the popup content (I changed the code to retrieve the contract to make a sample for myself, hope you will figure out how to get contract content).
The code:
HTML for the page that opens the popup
<body>
<input type="button" id="popup" value="Open Popup" />
<div id="yourContract">
<div>blablabla</div>
<div>blablabla2</div>
<div>blablabla3</div>
<table>
<tr>
<td>blablabla td1</td>
<td>blablabla td2</td>
</tr>
<tr>
<td>blablabla td3</td>
<td>blablabla td4</td>
</tr>
</table>
</div>
</body>
<script>
$("#popup").click(function(){
var win = window.open("static.html");
});
</script>
HTML for the popup (static.html):
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$.holdReady(true);
$.getScript("print.js", function() {
$.holdReady(false);
});
</script>
</head>
<body>
<script>
var contract = window.opener.$("#yourContract").html(); //change to fit your needs
$("body").html(contract);
</script>
</body>
</html>
JS file (print.js) called by static.html
$(document).ready(function(){
window.print();
window.close();
});
How does it works:
static.html consists of two script section. The section in the body loads via javascript the content in the page.
The section in the head prevent the document to trigger ready status by setting holdReady to true. Then it loads print.js which waits for document to be ready, but we will decide the exact moment because we are preventing it.
After the script is included in the page holdReady is set again to false, triggering the ready status to document and calling the print() and close() functions on the window.
This however occurs after the browser has loaded all the page content, so you will see the preview in the popup page and the print dialog.
Hope this solution is what you need.

Fill input text forms on other website in iframe

I want to autofill textboxes on another website so I'm writing a short script to do this. I'm loading an iframe with a website in it and if this iframe is loaded, it should fill in the input text forms. So I wrote this in autofill.php:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
<iframe name="autofillframe" src="https://e-services.blum.com/main/" style="width:100%; height:100%;"></iframe>
And this I wrote in fill.js:
$(document).ready(function(e) {
$('#username').val('username');
$('#kennwort').val('password');
});
Here is a fiddle
If I do it with a .php file instead of a website, it works fine.
Here's a demo without website
Can someone give me a hint?
When you load a page from a different domain into an iframe, you can't do anything to the iframe page from JavaScript in your page.
As far as the browser is concerned, the iframe is a separate window and you have no access to it. Imagine that the user had a banking page open in one window and your page open in another window. You know that the browser would not let your JavaScript code interfere with the banking page, right?
The same thing applies when the other page is in an iframe. It's still a completely separate browser window, it's just positioned so it looks like it's inside your page.
In your working example, the code works because the username and password fields are not in an iframe from a different domain. They are part of the same page that the JavaScript code is in.
If the iframe is loaded from the same domain as your main page, then you can do anything you want to it, including filling in form fields. The code would be slightly different because you need to access the iframe document instead of the main page document, but that's easy. But if the iframe is from a different domain, you are out of luck.
By pressing submit button , input value copies from input textbox to iframe textbox (or opposit of it).
you can implement it like:
test1.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('username');
doc.getElementsByName('user')[0].value = elem.value;
});
});
</script>
</head>
<body>
<input type="text" id="username">
<input type="submit" id="submit">
<iframe id="myiframe" frameborder="1" src="test2.html"></iframe>
</body>
</html>
And test2.html :
<!DOCTYPE html>
<html>
<body>
<input type="text" name="user" id="user">
</body>
</html>

write JavaScript on JavaScript rendered html page

Here is my code:
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
win=window.open();
win.document.write("<html>");
win.document.write("<head>");
win.document.write("<style type=\"text/css\">");
win.document.write(".vis{visibility:hidden;}");
win.document.write("</style>");
win.document.write("</head>");
win.document.write("<body>");
win.document.write("<table align=\"center\">");
win.document.write("<tr><td>result:</td><td>100,--€</td></tr>");
win.document.write("<tr><td colspan=\"2\" id=\"idcko\"><input type=\"button\" value=\"click\" onclick=\"window.print();vlozenie()\"/></td></tr>");
win.document.write("</table>");
win.document.write("</body>");
win.document.write("</html>");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage();" />
</form>
<script type="text/javascript">
function vlozenie()
{
var y = win.document.getElementById("idcko");
y.innerHTML="<input type=\"button\" value=\"click2\" class=\"vis\"/>";
}
</script>
</body>
</html>
Now I want to print the rendered page, but I want to hide the print button. So is it possible to write some JavaScript functions in an "onclick" event, or may I access the JavaScript function which is located on the mother page?
I found some examples to add "class" attributes for HTML elements:
$("#idcko").addClass("vis");
but it has to be written in JavaScript tags, which I can`t write like this:
win.document.write("<script type=\"text/javascript\">some functions()</script>");
because the rendered page is now incorrect.
you can add in your css style #media print and then hide the element that contains the printer icon using display:none
#media print {
selectorForPrinterIcon { display:none }
}
Of course you can follow the same way to hide any other element that you want to be hidden in the printed version. So, there is no need for javascript.
you need to just call jquery $("#PrintButtonId").hide()
hope this help.

Open a new browser window/iframe and create new document from HTML in TEXTAREA?

I'm trying to write a web application using the new offline capabilities of HTML5. In this application, I'd like to be able to edit some HTML—a full document, not a fragment—in a <textarea>, press a button and then populate a new browser window (or <iframe>, haven't decided yet) with the HTML found in the <textarea>. The new content is not persisted anywhere except the local client, so setting the source on the window.open call or the src attribute on an <iframe> is not going to work.
I found the following question on StackOverflow: "Putting HTML from the current page into a new window", which got me part of the way there. It seems this technique works well with fragments, but I was unsuccessful in getting an entirely new HTML document loaded. The strange thing is when I view the DOM in Firebug, I see the new HTML—it just doesn't render.
Is it possible to render a generated HTML document in a new window or <iframe>?
EDIT: Here's a "working" example of how I'm attempting to accomplish this:
<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function runonload() {
return $("#newcode")[0].value;
}
$(function() {
$("#runit").click(function() {
w=window.open("");
$(w.document).ready(function() {
$(w.document).html(w.opener.runonload());
});
});
});
</script>
</head>
<body>
<textarea id="newcode">
<!doctype html>
<html>
<head>
<title>New Page Test</title>
</head>
<body>
<h1>Testing 1 2 3</h1>
</body>
</html>
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
I think you are overcomplicating this...
try this:
<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>
$(w.document).html(w.opener.runonload());
You can't set innerHTML—or, consequently, jQuery's html()—on a Document object itself.
Even if you could, you wouldn't be able to do it using html(), because that parses the given markup in the context of an element (usually <div>) from the current document. The doctype declaration won't fit/work, putting <html>/<body>/etc inside a <div> is invalid, and trying to insert the elements it creates from the current ownerDocument into a different document should give a WRONG_DOCUMENT_ERR DOMException. (Some browsers let you get away with that bit though.)
This is a case where the old-school way is still the best:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
Whilst you can inject innerHTML into a pop-up's document.documentElement, if you do it that way you don't get the chance to set a <!DOCTYPE>, which means the page is stuck in nasty old Quirks Mode.

move input text from iframe to main window

I have an iframe on a page that allows us to upload an image, once it's uploaded it displays the url of the file in a text input field.
On the main part of the page, we have our textarea where we write up our news posts. I'd like a way so that I can add a link on the iframe, next to the url field, that when clicked will automatically insert the text in there into the textarea on the main part of the page.
I'm relatively new to javascript, so I wasn't sure how to do this when using an iframe.
Thanks!
Main.htm
<html>
<head>
<script>
getText = function(s)
{
alert(s);
}
</script>
</head>
<body>
<iframe src="otherFrame.htm"></iframe>
</body>
</html>
otherFrame.htm
<html>
<head>
<script>
botherParent = function()
{
parent.getText(document.getElementById("textInput").value);
};
window.onload = function()
{
}
</script>
</head>
<body>
<input type="text" id="textInput" />
<span onclick="botherParent()">Stuff goes here</span>
</body>
</html>
Basically, in the child inline frame, use parent to access the parent's window object.
Global variables are stored in window, as are global functions. Because of this, if you define a global variable "foo" in parent, you can access it with parent.foo with your child frame.
Hope that helps!
Assuming I understand this correctly you want to be able to use javascript to access information in an iFrame from the container page. This is generally regarded as Cross Site Scripting and is not allowed.

Categories

Resources