This question already has answers here:
JavaScript open in a new window, not tab
(15 answers)
onclick open window and specific size
(9 answers)
Closed 3 years ago.
I am trying to open a new window with a button. The window needs to have a specific height and width. Whenever I click the "open" button it just opens a completely new tab.
var aWindow;
function openWindow() {
aWindow = window.open("", "", "width=400, height = 200");
}
function closeWindow() {
if (aWindow) {
aWindow.close();
}
}
<html>
<body>
<button onclick="openWindow();">Open</button>
<button onclick="closeWindow();">Close</button>
</body>
</html>
window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=300px,height=300px');
Try this code tested
Try to use this code
window.open('https://www.google.co.in/','_blank','toolbar=no, location=no, status=no, menubar=no, scrollbars=yes,resizable=yes, width=10px, height=20px')
DEMO LINK
<input type="button" value="Open a Popup Window" onclick="popupFunction('https://stackoverflow.com')">
<script>
// Popup window function
function popupFunction(url) {
popupWindow = window.open(url,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</script>
Related
I have a link like this:
<a href="/index2.php?option=com_jumi&fileid=3&Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,')
I want the new opening window to open in a specific size. How do I specify the height and width?
<a href="/index2.php?option=com_jumi&fileid=3&Itemid=11"
onclick="window.open(this.href,'targetWindow',
`toolbar=no,
location=no,
status=no,
menubar=no,
scrollbars=yes,
resizable=yes,
width=SomeSize,
height=SomeSize`);
return false;">Popup link</a>
Where width and height are pixels without units (width=400 not width=400px).
In most browsers it will not work if it is not written without line breaks, once the variables are setup have everything in one line:
Popup link
window.open ("http://www.javascript-coder.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
from
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
:]
window.open('http://somelocation.com','mywin','width=500,height=500');
Just add them to the parameter string.
window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250')
<a style="cursor:pointer"
onclick=" window.open('http://YOUR.URL.TARGET','',' scrollbars=yes,menubar=no,width=500, resizable=yes,toolbar=no,location=no,status=no')">Your text</a>
These are the best practices from Mozilla Developer Network's window.open page :
<script type="text/javascript">
var windowObjectReference = null; // global variable
function openFFPromotionPopup() {
if(windowObjectReference == null || windowObjectReference.closed)
/* if the pointer to the window object in memory does not exist
or if such pointer exists but the window was closed */
{
windowObjectReference = window.open("http://www.spreadfirefox.com/",
"PromoteFirefoxWindowName", "resizable,scrollbars,status");
/* then create it. The new window will be created and
will be brought on top of any other window. */
}
else
{
windowObjectReference.focus();
/* else the window reference must exist and the window
is not closed; therefore, we can bring it back on top of any other
window with the focus() method. There would be no need to re-create
the window or to reload the referenced resource. */
};
}
</script>
<p><a
href="http://www.spreadfirefox.com/"
target="PromoteFirefoxWindowName"
onclick="openFFPromotionPopup(); return false;"
title="This link will create a new window or will re-use an already opened one"
>Promote Firefox adoption</a></p>
Using function in typescript
openWindow(){
//you may choose to deduct some value from current screen size
let height = window.screen.availHeight-100;
let width = window.screen.availWidth-150;
window.open("http://your_url",`width=${width},height=${height}`);
}
Anyone looking for a quick Vue file component, here you go:
// WindowUrl.vue
<template>
<a :href="url" :class="classes" #click="open">
<slot></slot>
</a>
</template>
<script>
export default {
props: {
url: String,
width: String,
height: String,
classes: String,
},
methods: {
open(e) {
// Prevent the link from opening on the parent page.
e.preventDefault();
window.open(
this.url,
'targetWindow',
`toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=${this.width},height=${this.height}`
);
}
}
}
</script>
Usage:
<window-url url="/print/shipping" class="btn btn-primary" height="250" width="250">
Print Shipping Label
</window-url>
Using a button to refer to another window with a single click
<Button onClick={() => {window.open("https://www.google.com")}}>
Button Description
</Button>
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 5 years ago.
I am making an idle game and want something to be purchased on user click. I have an onclick event connected to it which triggers the buyCreateScript() function but it is not working. Any advice?
Fiddle:https://jsfiddle.net/wizviper/m1ftgoyp/82/
Javascript:
function buyCreateScript() {
if(bytes >= createScriptCost ) {
createScriptAmount++;
bytes = bytes - createScriptCost;
createScriptCost = createScriptCost * priceIncrease;
}
}
HTML:
<button type="button" class="btn-primary" id="createScript"
onclick="buyCreateScript()">Create Script-0</button>
You need to change how you load the javascript in your fiddle.
Click on the javascript options cog icon
Change "LOAD TYPE" to "No wrap - in < head>"
Click "Run" and try again
The solution is to either:
Keep the onclick attribute but add a script tag in the html section and write the function buyCreateScript() in it:
<button type="button" class="btn-primary" id="createScript" onclick="buyCreateScript()">Create Script-0</button>
<script>
function buyCreateScript() {
console.log('works');
}
</script>
Or, you could add an event listener in the javascript section, remove the onclick attribute and keep your function where it is:
var createScriptBtn = document.getElementById('createScript');
createScriptBtn.addEventListener('click', function() {
buyCreateScript();
});
function buyCreateScript() {
console.log('works');
}
<button type="button" class="btn-primary" id="createScript">Create Script-0</button>
I have an asp.net 2.0 website. On one page - let's call it "P1", I have a button that opens a new window using javascript - let's call the new window "P2".
<script type="text/javascript">
function openMapEditor() {
var editor = window.open('<%= Page.ResolveURL("~/imgmap/MapEditor.aspx") %>', '', 'scrollbars=yes, resizable=yes, width=965, height=800');
var timer = setInterval(function() {
if(editor.closed) {
clearInterval(timer);
__doPostBack('','');
}
}, 1000);
}
</script>
...
<asp:Button ID="cmdEditMap" runat="server" CssClass="cmdbutton" Text="Upload Image" OnClientClick="openMapEditor(); return false;" />
Clicking on the button opens an actual new window in Chrome as I had hoped.
In the new window, I have a link to open another page.
<a name="img_href_check" href="http://facebook.com/fn" target="_blank" onclick="return (new RegExp('^https?://+')).test(this.getAttribute('href'));">Check</a>
What I was hoping was that the page would open in a new tab in P2, but what actually happens is that it is opened in a new tab P1.
How can I make it so that the page opens in a new tab in P2?
Thanks in advance!
I have the following scenario like this :
I have a main window[main.html]. There are three links called Popup1, Popup2, Popup3. On clicking the link open Popup1 window, Popup2 window respectively.
<html>
<head>
<title>Popup Focus Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
openWin[index] = w;
});
});
</script>
</head>
<body>
<div id="elem">
Pop 1
Pop 2
Pop 3
</div>
</body>
</html>
Now the windows open are window 1 & window 2. I want to transfer the focus of the window 1 from window 2. is there anyway this can be done?
pop1.html
<html>
<head>
<title>Popup 1 Example</title>
<script type="text/javascript">
function go() {
if(window.opener.openWin) {
var popup2 = window.opener.openWin[1];
popup2.focus();
}
}
</script>
</head>
<body>
<div>
popup 1 example
</div>
<div>Go to Popup2</div>
</body>
</html>
pop2.html
<html>
<head>
<title>Popup 2 Example</title>
</head>
<body>
<div>
popup 2 example
</div>
</body>
</html>
Check main.html code in fiddle http://jsfiddle.net/tmf8cry8/2/
You have written the code properly, please implement the two changes as listed below...
1) You need to push the window object in openWin Array
var openWin = [];
$(function(){
$('#elem').on('click', 'a', function(){
var index = $(this).index();
var page = 'pop'+(index+1)+'.html';
var w = window.open(page, $(this).attr('title'), '_blank');
//openWin[index] = w;
openWin.push(w); //Push the window object
});
});
2) Access the window object using the array index to focus the window
function go() {
//console.log(openWin);
//if(window.opener.openWin) {
// var popup2 = window.opener.openWin[1];
//popup2.focus();
//}
//Supposing that pop1, pop2 and pop3 are opened, you want to access pop2
openWin[1].focus();
}
Hope it helps!
You can use the method window.open
window.open("",window_name).focus();
Assuming your window is opened, you can transfer focus to the window using the above code.
Please use the following code in pop2.html and try [after opening all windows in a sequential order].
<html>
<head>
<title>Popup 2 Example</title>
<script language="javascript">
function openNew()
{
window.open("","Pop 3").focus();
}
</script>
</head>
<body>
<div>
popup 2 example
</div>
<a href="javascript:void(0);" onclick="javascript:openNew();">
Go to pop3</a>
</body>
</html>
As per you code, you are using title attribute to naming windows, hence Pop 3 is used to transfer focus to Pop 3 window.
Alternatively, you may check if the window instance is opened or not and then load the URL entirely or transfer focus
Hope it helps!!!
Make go() function just call a function in the opener window, e.g.:
window.blur(); //focus out of here
window.opener.myParentWindowFunction( 2 );
That function (in the "parent" window) should call then a function in the target window that just "window.focus()".
funtion myParentWindowFunction( target ){
window.blur();//focus out of here also
openWin[target].callFocus();
}
And on every popup:
function callFocus(){ window.focus(); }
You can't make a window "send" the focus to another (security issues I guess), but you can make a window to "ask for it"... and depends on the browsers if it's going to get it (in chrome doesn't work, but if you add an alert() after the focus it will change the window. Funny, because if you just put the alert but not the focus it doesn't swap the windows...)
Code is just a mockup, but that's the concept. You have to use the opener window as relay comunicate to the desired window that it have to call the focus. Hope you don't need it really crossbrowser.
How to open new popup window from portal using java script.
I have jsp page with button , if i click the button need to open new popup window from portal.
onClick="window.open('/html/viewpdf.jsp','mywindow','width=500,height=350,toolbar=no,resizable=yes')">
this doesn't working jsp page.
Try this:
onClick="
var organizationWindow = window.open('<portlet:renderURL windowState="<%= LiferayWindowState.POP_UP.toString() %>"><portlet:param name="jspPage" value="/html/viewpdf.jsp"/><portlet:param name="redirect" value="#"/></portlet:renderURL>',
'title',
'directories=no, height=340, location=no, menubar=no, resizable=yes,scrollbars=yes, status=no, toolbar=no, width=680');
organizationWindow.focus();"
you can create an icon <liferay-ui:icon image="add" message="Add a Person to this group" url="javascript:alertAdd();" />
then add the script that this icon calls to open the popup
<aui:script use="aui-dialog,aui-overlay-manager">
Liferay.provide(
window,
'alertAdd',
function() {
var instance = this;
var url='${details}';
Liferay.Util.openWindow(
{
cache: false,
dialog: {
align: Liferay.Util.Window.ALIGN_CENTER,
after: {
render: function(event) {
this.set('y', this.get('y') + 50);
}
},
width: 820
},
dialogIframe: {
id: 'addIFrame',
uri: url
},
title: Liferay.Language.get('cloud'),
uri: url
}
);
},
['liferay-util-window']
);
NOTE that you will need the URL ${details}
<portlet:renderURL var="details">
<portlet:param name="mvcPath" value="/html/grouping/member_search_popup.jsp"/></portlet:renderURL>
Yes , this opening popup window.But in liferay portal just opening http://localhost:8080/web/guest only. not opening the viewpdf.jsp.
my requirment is print the datatable values from the page.So datatable have scrollbar, though doesn't print page not correct.
So that i planned to display the datatable values in the popup window and there print button, it should display the all data.
function callsubmit(){
window.print();
window.opener.document.location = window.opener.document.location.href;
window.close();
}
I would like know how to print datatable all values to print.