The following HTML page should open http://www.seznam.cz in a new window and then open the Print dialog to allow printing it.
<html>
<head>
<script>
function printPage()
{
var newWindow = window.open("http://www.seznam.cz", "seznam");
newWindow.document.close();
newWindow.focus();
newWindow.print();
newWindow.close();
}
</script>
</head>
<body>
<a onClick="printPage(); return false;" href="">Print</a>
</body>
</html>
However it only prints a blank page with "about:blank" in the top right and the current date and time in the bottom right corner.
Why doesn't it work as expected?
Try this one.. it will print the Page.You can Change it to Your Requirements.
<input type="button" value="Print" onclick="printPage('content');"></input>
function printPage(id)
{
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin = window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
The reason is, because you close the window again in you function. Remove
newWindow.document.close();
newWindow.close();
The reason for the blank page is, because you have specified an empty string as href value. Remove the hrefattribute from the tag.
Related
I am trying to figure out how to create a small browser window with no decorations. That is no address bar, no tabs, no bookmarks bar, no minimize/maximize/restore buttons. The only button it has is a small close button. I am trying to create a window that looks like this: dropbox.com/s/xed7p94s1kpnwrg/Smallwindow.png?dl=0
I tried this Javascript, and it is close, but it still leaves the address bar. If I could just get rid of that, it would be great.
<head>
<script class="code" type="text/javascript">
var features = ""
+ "menubar=no,toolbar=no,location=no,personalbar=no"
+ ",status=no,chrome=yes,resizable,centerscreen"
//+ ",width=400" //Width of content window
//+ ",height=200" //Height of content window
+ ",outerWidth=400" //Width of window
+ ",outerHeight=200" //Height of window
+ ",top=500"
+ ",left=600"
;
window.open("http://www.google.com/","_blank",features);
//Can only close windows opened by script.
//window.close();
</script>
</head>
<body>
</body>
The only way I found to do this was with IE (arg!). This html/javascript works:
<html>
<head>
<title>showModalDialog</title>
</head>
<body onload="fnOpen()">
<script>
function fnOpen() {
var sFeatures = "dialogHeight: 500px;";
window.showModalDialog("showModalDialog_target.htm", "", sFeatures)
}
</script>
</body>
I have a help link. If a user clicks on it, it opens a new window with fixed width and height. It's working well except that when I right click the link, there is either no options to 'open in a new tab' (in IE) or I can open in a new tab but is directed to an empty page (chrome). Can any one help to make this like a link and also by default open in a new window (not a tab)?
<html>
<head>
<title>
link
</title>
<script type="text/javascript">
function activateHelpView(helpUri) {
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
(helpWindow).focus();
}
}
</script>
</head>
<body>
<a id='PortOrderPageLearnMoreLink' href='javascript:' title='Learn more' onclick='activateHelpView("http://stackoverflow.com/")'>Learn more</a>
</body>
</html>
Use a real link, not the empty javascript: address. The onclick handler can prevent the link from doing anything "normal", but you'll have something for the right-click to work with.
target=_blank is a strong hint that you want the page opened in a new window, but whether that's honored at all -- and whether in a window or a tab -- is out of the page's control.
<script type="text/javascript">
function activateHelpView(helpUri) {
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
(helpWindow).focus();
}
}
</script>
<a id='PortOrderPageLearnMoreLink' href='http://stackoverflow.com/' title='Learn more' onclick='activateHelpView(this.href); return false;' target='_blank'>Learn more</a>
A more modern way of handling all of this -- particularly if there will be more than one help link -- is to add a class to all of them, and run some JavaScript to add the click handler to each in turn. The HTML stays clean (and with real links, still works if JavaScript is disabled or not loaded).
var helplinks = document.querySelectorAll('.helplink');
for (var i = 0; i < helplinks.length; ++i) {
helplinks[i].addEventListener('click', activateHelpView);
}
function activateHelpView(event) {
event.stopPropagation(); // don't let the click run its course
event.preventDefault();
var helpUri = this.href; // "this" will be the link that was clicked
var WindowId = 'SomeWindowId';
var helpWindow = window.open(helpUri, WindowId, 'width=400,height=500,menubar=no,status=no,scrollbars=no,titlebar=no,toolbar=no,resizable=yes');
if (helpWindow) {
helpWindow.focus();
}
}
<a id='PortOrderPageLearnMoreLink'
href='http://stackoverflow.com/' title='Learn more'
class='helplink' target='_blank'>Learn more</a>
StackOverflow snippets aren't allowed to use some of these functions. A working example can be found here.
This code is generating a random link from variable but that link is not opening in iframe I need to display random links in iframe whenever the button is clicked. How to do that?
<html>
<script>
var cat1 = [
"http://arborjs.org",
"http://cartodb.com",
"http://vis4.net/labs/185"
];
var myFrame = document.getElementById("frame");
getRandomUrl(myFrame);
function getRandomUrl(myFrame) {
var index = Math.floor(Math.random()*cat1.length);
var url = cat1[index];
document.getElementById('frame').src = url;
}
btn.addEventListener("click", function() {
getRandomUrl(myFrame);
});
</script>
<body>
<button id="btn">Click</button>
<br>
<iframe id="frame" src="" style="width:500px; height: 500px"></iframe>
</body>
</html>
You have to put the script tag after all your HTML or wait for the window to load.
Also, you're calling a function before it's defined.
This code is generating a random link from variable
I don't think this is happening, if you open your console it should tell you the function and iframe are both undefined, as I stated above.
So im creating my own slider using javascript. I have 12 images total. 6 50x50, and 6 200x200. The smaller images switch from 1,2,3,4,5,6 and back to 1. When ever the image is clicked on a larger image is suppose to open in a new window. The problem is when i click on the 6th smaller image and the pop up window is opened the image is broken. I have debugged it and see the problem is that when I open up the image i am alerted that the pop is opening up 0.
Any help would be appreciated. It is most likely something simple that I am not seeing.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
number=1
function move(){
brillo.src="images/tudelude_0"+number+".jpg"
number++
if (number>6) number=1
setTimeout("move()",1000)
}
function Open(){
t=number-1
var newWindow = window.open("", "pictureViewer", "fullscreen=no");
newWindow.document.writeln("<img src='images/tude_0"+t+".jpg'/>");
alert(t)
newWindow.document.close();
}
</script>
</head>
<body onload="move()">
<div class="box">
<img src="images/tudelude_01.jpg" name="brillo"
onclick="Open(); return true;">
</div>
</body>
</html>
Your problem is that number doesn't accurately reflect what image is actually being shown.
You should do this instead:
number = 1;
function move() {
number++;
if(number > 6)
number = 1;
brillo.src="images/tudelude_0"+number+".jpg";
}
function Open(){
var newWindow = window.open("", "pictureViewer", "fullscreen=no");
newWindow.document.writeln("<img src='images/tude_0"+number+".jpg'/>");
newWindow.document.close();
}
and in your onload, use setInterval(move, 1000).
I need to pass some text from the current page to a popup window without going for a server hit. The information (herewith represented by 90) is already available in the parent form (it's like a paragraph-long text which is stored in a hidden variable). I just need to display that as a popup.
Here's what I've tried, this works to some extent but doesn't work if I pass text, instead of a number. My second concern is that the solution kinda looks ugly. Any tips? Thank you.
This is SCCE, you can run it straight in your machine.
<html>
<head>
<title>A New Window</title>
<script type="text/javascript">
var newWindow;
var data;
function makeNewWindow(param) {
data = param;
if (!newWindow || newWindow.closed) {
newWindow = window.open("","sub","status,height=200,width=300");
setTimeout("writeToWindow()", 50); /* wait a bit to give time for the window to be created */
} else if (newWindow.focus) {
newWindow.focus( ); /* means window is already open*/
}
}
function writeToWindow() {
var k = data;
alert(data);
var newContent = "<html><head><title>Additional Info</title></head>";
newContent += "<body><h1>Some Additional Info</h1>";
newContent += "<scr"+"ipt type='text/javascript' language='javascript'> var localVar; localVar = "+ k +"; document.write('localVar value: '+localVar);</scr"+"ipt>";
newContent += "</body></html>";
// write HTML to new window document
newWindow.document.write(newContent);
newWindow.document.close( ); // close layout stream
}
</script>
</head>
<body>
<form>
<input type="button" value="Create New Window" onclick="makeNewWindow('90');" />
</form>
</body>
</html>
Actually, I googled and saw some other approach that uses window.opener.document.forms.element, but here, the window has to know in advance what it has to read from the parent. I need to be able to pass it as it will vary:
<textarea rows="15" name="projectcontent" id="projectcontent" cols="87"></textarea>
<b>View Content</b>
<head>
<title>View Project Content</title>
</head>
<body>
<img src="/images/toplogo.jpg"><br/>
<script language="Javascript">
document.write(window.opener.document.forms['yourformname'].elements['projectcontent'].value)
</script>
<img src="/images/bottomlogo.jpg">
</body>
</html>
use window.opener
From Mozilla Developer Network:
When a window is opened from another window, it maintains a reference
to that first window as window.opener. If the current window has no
opener, this method returns NULL.
https://developer.mozilla.org/en-US/docs/Web/API/window.opener
This way you can have on your original window a callback, and you can notify the window it's load and ready, rather than wait a random delay...
you add a function on the original window:
window.popupReady = function (callbackToPopup) {
callbackToPopup(newData);
}
then the popup can tell the parent window it's ready and pass it a callback to update it with data..
and on the popup try something like:
window.dataReady(newData)
{
alert(newData);
}
document.addEventListener("load", function() { window.opener.popupReady (dataReady); }
I didn't test this code, but I would take such a path as this should ensure the popupWindow is ready for you and is along the spirit of JavaScript.
In your onclick attribute you pass '90' to the function, but the function isn't set up to take an argument. So, change the first line of your function like this:
function writeToWindow(data) {
You don't need the global var data; or the local var k = data;, so get rid of them.
And instead of + k + write + data +.
That should do get your data passed.
Use this code, it works perfectly in all browsers .
#desc = parent text area id
#desc_textarea = popup
$("#desc_textarea").val(window.opener.$("#desc").val())