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;
}
Related
I’m printing selected parts of pages by putting them in an empty iframe. Everthing is fine except the CSS. Sometimes it’s there, sometimes not, so I guess the print function is loaded in moste cases before the css is complete. Unforntunately I’m obviously not able to solver the problem. The basic code:
var pStyles = new String ("<link href='/css/print.css' rel='stylesheet' type='text/css' id='cssprint' />");
var pWrapIn = new String ("<main><article><section>");
var pWrapOut = new String ("</section></article></main>");
function printFrame(fId) {
window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
console.log(window.frames["printhelper"].document.body.innerHTML);
window.frames["printhelper"].window.focus();
window.frames["printhelper"].window.print();
}
This works, but with the described CSS issue. To make sure the CSS is loaded, I ended up with the modified function, which is not working at all:
function printFrame(fId) {
window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
console.log(window.frames["printhelper"].document.body.innerHTML);
$(#cssprint).on('load', function() {
console.log ('CSS loaded');
window.frames["printhelper"].window.focus();
window.frames["printhelper"].window.print();
}, 0);
}
#cssprint seems to be loaded never, so console.log stays empty and no print is done. But what am I doing wrong? (The function printFrame is called by a simple onClick in the HTML markup.)
I would probably do something like this:
Add onload event handler to CSS link that calls a function that posts a message to the parent window (parent.postMessage(...)) or directly does so, then you do not need an extra script tag.
The outer window listens to the message of the iframe window and starts printing when receiving it.
You can also just skip the message posting if you do not need to synchronize anything with the parent window an just print directly in the onload event:
<link onload="window.print()" ...>
See MDN for more info on posting and receiving messages.
The complete working function (thanks to H. B.):
var pStyles = new String ("<link href='/css/print.css' rel='stylesheet' type='text/css' onload='window.focus(); window.print()' />");
var pWrapIn = new String ("<main><article><section>");
var pWrapOut = new String ("</section></article></main>");
function printFrame(fId) {
window.frames["printhelper"].document.body.innerHTML = pStyles + pWrapIn + document.getElementById(fId).innerHTML + pWrapOut;
}
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);
Here is a simple setAttribute for an iFrame to append a name.
Issue is that the below code works great in all browsers except Chrome.
<iframe id="frame" frameborder="0" src="http://website.ca/"></iframe>
Parent javascript:
(function() {
var newFrameName = "hello";
document.getElementById("frame").setAttribute("name", newFrameName);
})();
in the iFrame:
var iframeName = window.name;
alert (iframeName );
Alert calls "Hello" in all browsers, Chrome calls "frame" -- which is the ID of the iFrame.
looking at source (through the elements inspector), in Chrome, I see the correct name for the iFrame: name="Hello" ... but the alert calls the id.
why would that be? I'm i missing anything?
Creating iframe by createElement fixes the issue:
function createFrame() {
frame= document.createElement("iframe");
frame.setAttribute("src", "https://website.ca/");
frame.setAttribute("name", "Hello");
frame.setAttribute("id", "frame");
frame.frameBorder = 0;
frame.style.width = 100 + "%";
frame.style.height = 2300 + "px";
document.getElementById("iframeHolder").appendChild(frame);
}
createFrame();
<div id="iframeHolder"> </div>
Bit of a hack, but it works for this situation.
6 and a half years later I ran into the same problem.
It seems that Chrome sets the window.name property once and doesn't update it when the enclosing iFrame's name (either property or attribute) is updated.
Setting the window.name directly does work however.
So, changing the OP's example from:
(function() {
var newFrameName = "hello";
document.getElementById("frame").setAttribute("name", newFrameName);
})();
into
(function() {
var newFrameName = "hello";
document.getElementById("frame").name = newFrameName; // keep for other browsers
document.getElementById("frame").contentWindow.name = newFrameName;
})();
works...
When someone requests a chat, an entry is made in the database. I have an hidden iframe on our dashboard that checks the database every 20 seconds to see if there is a chat and if there is it launches a popup window. Even if the popup is open the iframe still refreshes the popup every 20 seconds. Want I am trying to achieve is a javascript to check the status of the popup. If it is closed I want it to reopen it... if it is open then it bring it into focus... but I dont want the popup to refresh.. as I have an ajax script doing this..
Here is my code:
<script language="javascript" type="text/javascript">
function myOpenWindow(winURL, winName, winFeatures, winObj)
{
var theWin;
if (winObj != null)
{
if (!winObj.closed)
{
winObj.focus();
return winObj;
}
}
else
{
theWin = window.open(winURL, winName, winFeatures);
return theWin;
}
}
</script>
<% IF ChatSessionID <> "" THEN %>
<script language="javascript" type="text/javascript">
var gmyWin = null;
window.onload = function()
{
var w = 900;
var h = 500;
var l = (screen.width-w)/2;
var t = (screen.height-h)/2;
var params = 'status=0,resizable=0,scrollbars=0,width=' + w + ',height=' + h + ',left=' + l + ',top=' + t;
gmyWin = myOpenWindow("/chat/chat_window.asp?ChatSession=<%=ChatSessionID%>&id=3", "myWin", params, gmyWin)
}
</script>
<% END IF %>
Any help you could provide would be greatly appreciated..
Best Regards,
Paul
I am not sure, but I believe if you name the window (e.g. myWin) when you call window.open, then later call window.open again using the same name, it will return the existing window if its already open or open/re-open the window and return a handle to that.
Edit
Ah, there you go -- from window.open:
If a window with the name
strWindowName already exists, then,
instead of opening a new window,
strUrl is loaded into the existing
window. In this case the return value
of the method is the existing window
and strWindowFeatures is ignored.
Providing an empty string for strUrl
is a way to get a reference to an open
window by its name without changing
the window's location. If you want to
open a new window on every call of
window.open(), you should use the
special value _blank for
strWindowName.
I believe according to the above mentioned specs, this might work:
var hChatWindow = window.open("", "ChatWindow", "whatever features"); // url intentionally left blank
// hChatWindow now contains a reference to new, existing or re-opened window
hChatWindow.focus();
if (hChatWindow.location=="about:blank") { // not sure; you need to experiment here
hChatWindow.location = "/chat/chat_window.asp?whatever";
}
Demo here, source here.
Register a callback on gmyWin.onunload.
You will find it tricky to subvert "block pop-up windows" in most browsers. However, if it is disabled, the following will work.
Main window:
var status = false;
function winOpen(){
window.open("child.html");
}
function winStatus(){
alert(status);
}
Pop-up window:
window.opener.status = true;
window.onblur = window.focus;
window.onunload = function(){
window.opener.status = false;
};
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()