JavaScript
function printDiv(divP) {
var win = window.open();
win.document.write($(divP).html());
win.print();
}
Here I am printing contents of a Div using Javascript.
This code opens a window along with print dialog.
How to open only the print dialog without displaying window.
Thanks for all.
Live example (clicking on the link opens a print dialog without opening a new window)
As pointed out, you can print a hidden iframe, as such refer to this:
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
<b>Div 3:</b> Print<br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
Here's some sample code showing how to print a hidden iframe
var ifr = document.createElement('iframe');
var html = '<p>hello world</p>';
ifr.src = 'about:blank';
ifr.setAttribute('style', 'display: none;');
ifr.onload = function (event) {
ifr.contentDocument.body.innerHTML = html;
ifr.contentWindow.print();
};
document.body.appendChild(ifr);
Related
I am trying to print the contents of reactjs modal. I embedded a url in the modal and want to print the modal with those contents. Below is my code
<Modal.Body>
<div>
<object id="printableArea" type="text/html" data="http://www.xyztest.net/obj.html" className="objectClass">
</object>
</div>
</Modal.Body>
My print button function is
handleToggle: function (divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
This doesn't print the object tag url content.. Pls let me know how this can be achieved.. I dont want to use iframes
A popup might be an easier and more reliable solution to this. Assuming divName is referring to the <object> tag, you could do something like:
handleToggle: function (divName) {
var url = document.getElementById(divName).getAttribute('data');
var win = window.open();
win.document.write('<iframe style="width:100%;height:100%;padding:0px;margin:0px;" src="'+url+'" frameborder=0></iframe');
setTimeout(function(){
win.window.print()
}, 1000);
}
This opens a blank popup window, writes an iframe and sets the src to be your url. It then waits a second for the page to load and triggers printing
I want to take just one div from one HTML page and display it in a popup on another page.
I only want one div and its contents, and not the rest of the HTML from that page pulled into the popup so iframe is not suitable.
PAGE-1.HTM:
<body>
<div class="one">content</div>
<div class="two">content</div>
<div class="three">content</div>
<body>
PAGE-2.HTM:
Get Div Two
So, when I click 'get div two' link in page-2.htm is gets only div.two from page-1.htm and displays it in a popup on page-2.htm
You mean something like this?
$("a").on("click", function() {
$.get('/PAGE-1.HTM').then(function(responseData) {
var $responseData = $(responseData.html);
var div = $responseData.find('.two').html();
if (div.length > 0) {
$('.your-popup').append(div);
}
});
});
Using #pawel's suggestion of api.jquery.com/load/#loading-page-fragments
I did this:
$( ".popup" ).load( "page-1.htm .two" );
To populate div.popup on page-2.htm, then show .popup on clicking 'Get Div Two'
use this javascript here is the fiddle
this question is well demostrated here how to pass div value to window.open?
function openWin() {
var divText = document.getElementById("window").outerHTML;
var myWindow = window.open('', '', 'width=200,height=100');
var doc = myWindow.document;
doc.open();
doc.write(divText);
doc.close();
}
I have a problem when I try to check state of the popup window in IE.
function openPopup(url)
{
myWindow = window.open(url, "_blank", "resizable=1,status=0,toolbar=0,menubar=0");
}
function checkPopup()
{
console.log('Is closed : ' + myWindow.closed);
}
If I call openPopup('http://someUrl.org/someHtml.html') and after a while call checkPopup() everything works fine and I'll get "Is closed : false" into console, but when I call openPopup('http://someUrl.org/somePdf.pdf') and after a while checkPopup() function I get "Is closed : true" into console.
It seems to IE creates new window with pdf in it, instead of use window that created by window.open()
Could anyone help me? How can I get real state of popup with PDF document in it?
Fixed by use embedded iframe in popup window:
function openPopup(link) {
var html = "<html><head><title></title>";
html += "</head><body style='margin: 0;'>";
html += "<iframe height='100%' width='100%' src='" + link +"'></iframe>";
html += "</body></html>";
win = window.open("", "_blank", "resizable=1,status=0,toolbar=0,menubar=0");
win.document.write(html);
return win;
}
How can I open an image in a new window by using its id?
function swipe()
{
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.style.width=200+"px";
largeImage.style.height=200+"px";
}
This function is called on click on the image. Right now, it's opening in the same window, but I want to open it in a new window. How can this be accomplished?
function swipe() {
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.style.width=200+"px";
largeImage.style.height=200+"px";
var url=largeImage.getAttribute('src');
window.open(url,'Image','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}
HTML code:
<img src="abc.jpg" onClick="swipe();"/>
For a new window that has a good chance of being lost behind the main window, and generally annoying visitors:
window.open('http://example.com/someImage.png');
I'd just stick to a regular link if I were you.
Try:
<img src="URL or BASE64" onclick="window.open(this.src)">
Try with the following function:
function newTabImage() {
var image = new Image();
image.src = $('#idimage').attr('src');
var w = window.open("",'_blank');
w.document.write(image.outerHTML);
w.document.close();
}
Call with this HTML code:
<img id="idimage" src="data:image/jpg;base64,/9j/4A.." onclick="newTabImage()">
HTML:
<input type="button" onclick="test()" value="test">
JavaScript
function test(){
url = "https://www.google.de//images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
img = '<img src="'+url+'">';
popup = window.open();
popup.document.write(img);
popup.print();
}
Try this: https://jsfiddle.net/ne6f5axj/10/
You have to put the url of image in an image-tag.
Something like
window.open(url,'htmlname','width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');}
But you might run in trouble, if someone uses AdBlock or any PopUp-Blocker.
window.Open("http://yourdomain.com/yourimage.gif");
I have a page with pictures, which I want to displayed in a popup.php when clicking on them.
I want the popup window to display a picture(the one I'm clicking on), some text, and a print button.
I'm doing this on the page:
<img src="graphics/picture1.png" width="340" height="200" border="0"/>
In the JS file:
function popup()
{
window.open('popup.php', 'window', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
}
function showImg(img)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
}
And in the popup.php:
<img src="graphics/picture03.png" onload="showImg(this)" />
There should be an obvious way, but I can't find it.
I would think adding the image name and text content to the URL would be the obvious way.
popup.php?image=myImage.gif&text=Say%20something%20witty%20here
Well, you'll want to have your popup contain a holder for the image (which it seems like you already have), but you'll also need to have a holder for your text. Your popup.php should have something like <div id="textHolder"></div> - then your javascript function needs to accept the appropriate text as well as populate it into the textHolder div.
I'm not sure how you're calling these JS functions, or from where - so some of the code might need to change - it should be something to the tune of....
function showImg(img, textHolderObj, text)
{
var imageSrc = "imageName/imagePath.png";
if(img.src != imageSrc){
img.src = imageSrc;
}
textHolderObj.innerHTML= text
}
If is that simple, you could create it:
var win = window.open('', 'win', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=520,height=400,left=350,top=100');
var img = win.document.createElement('img');
img.src = 'image.png';
img.alt = 'Some text';
var label = win.document.createElement('p');
label.innerHTML = 'Some text';
var button = win.document.createElement('a');
button.href = 'javascript:window.close()';
button.innerHTML = 'Close';
win.document.body.appendChild(img);
win.document.body.appendChild(label);
win.document.body.appendChild(button);
I don't get the question too well. You want to access a function that was defined in the page that opened a popup? You should be able to use opener.showImg(this)
your popup has no idea what image you clicked on. you need to do this:
onClick="popup('imgSrc')"
and in your window reference:
window.open('popup.php?imgSrc='+imgSrc, ...
then... your popup window has to run off of url vars, but php now knows what its looking for:
<?php echo '<img src="' . $_GET["imgSrc"] . '" />'; // this is going to load the image, so you don't need the onLoad()
It is possible to create a new popup window using a variable
top.mydocument=window.open('','window','toolbar=no,location=no,
status=no,menubar=no,scrollbars=no,resizable=no,
width=520,height=400,left=350,top=100');
and then use document.write to write the content:
top.mydocument.document.write(
'<html><head></head>'
+'<body bgcolor=white onLoad="self.focus()">'
+'imageName/imagePath.png'
+'</body></html>'
)
Make sure you close it.
top.mydocument.document.close()