So I'm trying to open a pop up window in IE8. So far no luck. It's telling me I have the wrong parameters in window.open() but when I look at all the parameters for window.open() it all looks right, suggestions?
<html>
<body>
Click Here
<script language="javascript">
var vid1 = document.getElementById('video1');
if(vid1.addEventListener)
{
vid1.addEventListener('click', function(e){
videoOne();
},true);
}
else
{
vid1.attachEvent('click', videoOne);
}
function videoOne(){
window.open("http://www.yahoo.com","Case Study 1",
"location=1,status=1,scrollbars=1,width=650,height=400");
}
</script>
</body>
</html>
Internet Explorer doesn't support window names with spaces in them.
window.open("http://www.yahoo.com","CaseStudy1",
"location=1,status=1,scrollbars=1,width=650,height=400");
Quentin is correct, although there is more information in the MDN docs for window.open:
A string name for the new window. The name can be used as the target of links and forms using the target attribute of an or element. The name should not contain any blank space. Note that strWindowName does not specify the title of the new window.
Related
I am trying to move a DOM node from the "root" page to a new pop-up that is created via window.open(). Here is the code I am using.
var win = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
win.document.close();
setTimeout(function () {
var el = win.document.createElement("table");
el.innerHTML = table.html();
win.document.body.appendChild(el);
}, 40);
It works in Chrome, but in IE8, I receive the following error: "Unknown runtime error."
I've also tried it this way:
var p = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
setTimeout(function () {
p.document.body.appendChild(table.clone(false)[0]);
}, 100);
Doing it this way, I receive "No such interface supported" in IE8. Again, Chrome works fine.
Does anyone have a way to do what I'm trying to achieve?
Here is the HTML for the pop-up window just for the sake of completeness:
<!DOCTYPE html>
<html>
<head>
<title>Print Results</title>
</head>
<body>
</body>
</html>
I tested your code on IE9 ( and IE8/7 browser mode).
Instead of el.innerHTML = table.html();
using jquery $(el).html(table.html()); fixed the issue.
To be able to use iframes and new windows, you should initialise them with addres: about:blank, before you write() to them. Also note that loading/opening the window/frame takes time, so you cannot write to them at right away. set a timeout, or check onload.
Please see this answer for more info.
Good luck!
I want to open a window on click, but I want to open it behind the current window, or when the new window opens it should minimize itself. I have made a function but it actually did not work.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function wn(){
var mm=window.open('http://www.google.com','newwindow','width=200, height=200', "_blank");
}
</script>
</head>
<body>
click
</body>
EDIT
Parent window HTML
<script language="JavaScript" type="text/javascript">
function openPopUP() {
window.open('mywindow.html','NewWin',
'toolbar=no,status=no,width=350,height=135')
}
</script>
<body onLoad="openPopUP();">
or
Click to open popup
Child Window i.e PopUp Window File
The below script should be in the child window. The child window will open and will automatically be hidden after 1 second. The value 1000 specified in the setTimeout method is the duration in milliseconds for which the child window will be open. You can increase this timeout duration if you want the child window to be open longer.
<body onLoad="setTimeout('window.blur()', 1000);"
onFocus="setTimeout('window.blur()', 1000);">
This might work for you: Add this line of code in the onload event of your child window...
window.parent.opener.focus();
popunder = window.open('http://www.google.com','newwindow','width=200, height=200', "_blank");
popunder.blur();
window.focus();
Try something like this.
window.open(url);
self.focus();
Although it causes security issues, but I guess one of the way to do it is :
popup = window.open('http://www.google.com', 'newwindow', "_blank");
popup.blur();
This will work only in IE. For other browsers you need to set the security level to minimum.
popunder = window.open('your_site_url','newwindow','width=500, height=500', "_blank");
popunder.blur();
window.focus();
or simply
window.open(url); self.focus();
If you want real popunder capabilities there is a great jQuery plugin to handle it at https://github.com/hpbuniat/jquery-popunder
It uses a combination of various techniques to accomplish it across various browsers. Not all browsers can handle it the same but the results are very similar.
Current browser compatibility is listed as: (last updated April '18)
Mozilla Firefox 3-57
Google Chrome 10-62
Microsoft Internet Explorer 6-11 -- MSIE 6-8 requires jquery 1.x
Apple Safari 5
Finally , it was working for me only in chrome browser. Add this code in Parent window:
<script type="text/javascript" language="javascript">
function popWindow()
{
var popupo = window.open("popup.html", 'newwindow','toolbar=no,status=no,width=650,height=450', "_blank");
popupo.moveTo(0, 0);
popunder.blur();
window.focus();
}
</script>
Add this code in child window body onload event as
<body onLoad="setTimeout('window.blur()', 1000);" onFocus="setTimeout('window.blur()', 1000);">
Insted of a new window, we can create an iframe and open your url in the iframe and then make the iframe display none also print the iframe content if you want.
var ifrmId = 1;
jQuery(document).on('click', '.myFunc', function(e) {
var url = 'www.xyz.com';
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", url);
ifrm.setAttribute("id", ifrmId);
document.body.appendChild(ifrm);
window.frames[ifrmId].focus();
window.frames[ifrmId].contentWindow.print();
document.getElementById(ifrmId).style.display = "none";
ifrmId = ifrmId + 1;
});
This is my code
<script>
var body = "dddddd"
var script = "<script>window.print();</scr'+'ipt>";
var newWin = $("#printf")[0].contentWindow.document;
newWin.open();
newWin.close();
$("body",newWin).append(body+script);
</script>
<iframe id="printf"></iframe>
This works but it prints the parent page, how do I get it to print just the iframe?
I would not expect that to work
try instead
window.frames["printf"].focus();
window.frames["printf"].print();
and use
<iframe id="printf" name="printf"></iframe>
Alternatively try good old
var newWin = window.frames["printf"];
newWin.document.write('<body onload="window.print()">dddd</body>');
newWin.document.close();
if jQuery cannot hack it
Live Demo
document.getElementById("printf").contentWindow.print();
Same origin policy applies.
Easy way (tested on ie7+, firefox, Chrome,safari ) would be this
//id is the id of the iframe
function printFrame(id) {
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
return false;
}
an alternate option, which may or may not be suitable, but cleaner if it is:
If you always want to just print the iframe from the page, you can have a separate "#media print{}" stylesheet that hides everything besides the iframe. Then you can just print the page normally.
You can use this command:
document.getElementById('iframeid').contentWindow.print();
This command basically is the same as window.print(), but as the window we would like to print is in the iframe, we first need to obtain an instance of that window as a javascript object.
So, in reference to that iframe, we first obtain the iframe by using it's id, and then it's contentWindow returns a window(DOM) object. So, we are able to directly use the window.print() function on this object.
I had issues with all of the above solutions in IE8, have found a decent workaround that is tested in IE 8+9, Chrome, Safari and Firefox. For my situation i needed to print a report that was generated dynamically:
// create content of iframe
var content = '<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">'+
'<head><link href="/css/print.css" media="all" rel="stylesheet" type="text/css"></head>'+
'<body>(rest of body content)'+
'<script type="text/javascript">function printPage() { window.focus(); window.print();return; }</script>'+
'</body></html>';
Note the printPage() javascript method before the body close tag.
Next create the iframe and append it to the parent body so its contentWindow is available:
var newIframe = document.createElement('iframe');
newIframe.width = '0';
newIframe.height = '0';
newIframe.src = 'about:blank';
document.body.appendChild(newIframe);
Next set the content:
newIframe.contentWindow.contents = content;
newIframe.src = 'javascript:window["contents"]';
Here we are setting the dynamic content variable to the iframe's window object then invoking it via the javascript: scheme.
Finally to print; focus the iframe and call the javascript printPage() function within the iframe content:
newIframe.focus();
setTimeout(function() {
newIframe.contentWindow.printPage();
}, 200);
return;
The setTimeout is not necessarily needed, however if you're loading large amounts of content i found Chrome occasionally failed to print without it so this step is recommended. The alternative is to wrap 'newIframe.contentWindow.printPage();' in a try catch and place the setTimeout wrapped version in the catch block.
Hope this helps someone as i spent a lot of time finding a solution that worked well across multiple browsers. Thanks to SpareCycles.
EDIT:
Instead of using setTimeout to call the printPage function use the following:
newIframe.onload = function() {
newIframe.contentWindow.printPage();
}
At this time, there is no need for the script tag inside the iframe. This works for me (tested in Chrome, Firefox, IE11 and node-webkit 0.12):
<script>
window.onload = function() {
var body = 'dddddd';
var newWin = document.getElementById('printf').contentWindow;
newWin.document.write(body);
newWin.document.close(); //important!
newWin.focus(); //IE fix
newWin.print();
}
</script>
<iframe id="printf"></iframe>
Thanks to all answers, save my day.
If you are setting the contents of IFrame using javascript document.write() then you must close the document by newWin.document.close(); otherwise the following code will not work and print will print the contents of whole page instead of only the IFrame contents.
var frm = document.getElementById(id).contentWindow;
frm.focus();// focus on contentWindow is needed on some ie versions
frm.print();
I was stuck trying to implement this in typescript, all of the above would not work. I had to first cast the element in order for typescript to have access to the contentWindow.
let iframe = document.getElementById('frameId') as HTMLIFrameElement;
iframe.contentWindow.print();
Use this code for IE9 and above:
window.frames["printf"].focus();
window.frames["printf"].print();
For IE8:
window.frames[0].focus();
window.frames[0].print();
I am wondering what's your purpose of doing the iframe print.
I met a similar problem a moment ago: use chrome's print preview to generate a PDF file of a iframe.
Finally I solved my problem with a trick:
$('#print').click(function() {
$('#noniframe').hide(); // hide other elements
window.print(); // now, only the iframe left
$('#noniframe').show(); // show other elements again.
});
I have some code like
var windowObject = window.open('','windowObject','arguments...');
windowObject.document.write("<html><body onload="alert(1);window.print();alert(2);"><div>some html</div></body></html>");
The problem is that everything works except the window.print event (on ie, on firefox, it's working).
Is there a workaround?
Thanks in advance,
Gaurav
It's a quotes issue: the double quote after onload= ends the string being written to the document. Change the onload quotes to single quotes. You also need to add a call to the close() method of the document:
var windowObject = window.open('','windowObject','arguments...');
windowObject.document.write("<html><body onload='alert(1);window.print();alert(2);'><div>some html</div></body></html>");
windowObject.document.close();
In this line, it appears that you are trying to use nested double quotes:
windowObject.document.write("<html><body onload="alert(1);window.print();alert(2);"><div>some html</div></body></html>");
You more likely want to do:
windowObject.document.write('<html><body onload="alert(1);window.print();alert(2);"><div>some html</div></body></html>');
Chrome is not allowing us to do print in newly opened window/tab. You can achieve your requirement by adding a new html file like this
<body onload="window.print()"><div>Some html</div></body>
and replace your code with var windowObject = window.open('<path_to_your_new_html>','windowObject','arguments...');
I'm trying to launch a popup window from a Javascript function and ensure it has focus using the following call:
window.open(popupUrl, popupName, "...").focus();
It works in every other browser, but IE8 leaves the new window in the background with the flashing orange taskbar notification. Apparently this is a feature of IE8:
http://msdn.microsoft.com/en-us/library/ms536425(VS.85).aspx
It says that I should be able to focus the window by making a focus() call originating from the new page, but that doesn't seem to work either. I've tried inserting window.focus() in script tags in the page and the body's onload but it has no effect. Is there something I'm missing about making a focus() call as the page loads, or another way to launch a popup that IE8 won't hide?
The IE8 is not allowing this feature because of security issues
Windows Internet Explorer 8 and later. The focus method no longer brings child windows (such as those created with the open method) to the foreground. Child windows now request focus from the user, usually by flashing the title bar. To directly bring the window to the foreground, add script to the child window that calls the focus method of its window object
http://msdn.microsoft.com/en-us/library/ms536425%28VS.85%29.aspx
You might try this. Not sure if it will work though>
var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;
function setFocusEvents() {
active_element = document.activeElement;
if (isIE) {
document.onfocusout = function() { onWindowBlur(); }
document.onfocusin = function() { onWindowFocus(); }
} else {
window.onblur = function() { onWindowBlur(); }
window.onfocus = function() { onWindowFocus(); }
}
}
function onWindowFocus() {
hasFocus = true;
}
function onWindowBlur() {
if (active_element != document.activeElement) {
active_element = document.activeElement;
return;
}
hasFocus = false;
}
Yeah I can't test this on IE8 at the moment either but have a play with this document.ready method instead of the body.onload:
test1.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function openNewWindow()
{
window.open("test2.html", null, "height=200, width=200");
}
</script>
</head>
<body>
<a onclick="openNewWindow()">Open</a>
</body>
</html>
test2.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ window.focus(); });
</script>
</head>
<body>
<div id="container" style="background:blue;height:200px;width:300px">
</div>
</body>
</html>
I figured out what the issue was - turns out the reason running window.focus() in the onload wasn't working was because the first window.open().focus() call caused it to start flashing in the background, and after that any subsequent focus calls wouldn't work. If I don't try to focus it from the calling window but only from the popup it comes to the front normally. What an annoying "feature"...
The problem is the Window.focus method does not work in Internet Explorer 8 (IE 8). It's not a pop up blocker or any settings in IE 8 or above; it's due to some security I believe to stop annoying pop-ups being brought back up to the top.
after a lot of hair pulling and googling i found the following:
Microsoft suggest updates but this doesn't appear to work plus how do they seriously expect me to ask all of the users my site to update their machines!
so I've come up with this work around or fix.
What i do with the window is:
first I check if the window is open
if it's open, close it
open a new fresh version of the window on top.
javascript code to include at header or in separate file:
function nameoflink()
{
var nameofwindow = window.open('pagetolinkto.htm','nameofwindow','menubar=1,resizable=1,width=350,height=250');
if (nameofwindow) {
nameofwindow.close();
}
window.open('pagetolinkto.htm','nameofwindow,'menubar=1,resizable=1,width=350,height=250');
return false;
}
link on the page:
Click Here to go to name of link
Tested in MS Windows 7 with IE8 not sure of exact version.