open new windows in javascript - javascript

hi how to use javascriptscript to open a new window and then closing the current window..
currently, i can only open a new window, however my current window is still left open.
Code:
function newfunction()
{
window.open("index.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0");
}

Opening a new window and closing the old one sounds very much like changing the current page to me. Use location.href = 'newurl'.
And if you want to change its size and so on, that can also be done.
window.innerWidth = 300;
window.innerHeight = 300;
location.href = 'newurl';

use like you said window.open and then in the main window window.close(). But if you use like this, the browser will ask you "This website wants to close this window blabla".

add window.opener.close();
function newfunction()
{
window.open("index.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0");
window.opener.close();
}
or add this on the index.html file whenever a new window open it will close the parent window
<body onload="window.opener.close()">

Here is the code you need:
function newfunction()
{
window.open("index.html", "myWindow", "status = 1, height = 300, width = 300, resizable = 0");
window.close();
}
This will work only if the current window was opened via script as well, otherwise IE show warning dialog and other browsers might simply ignore it.

Related

How to resize Chrome browser window with an extension

I am making a chrome extension and wanted to add an option to resize the browser window.
I know I can't resize the window with normal JS.(window.resizeTo(600, 600); etc. won't work)
But with extension it's possible. For example with this tool you can resize the window. Problem is that I don't know how.
Also seems possible to open a new tab with desired sizes but it won't open a normal window but a tab.(Like ads)
Does anyone know how to achieve this?
You can try the window API for chrome extensions
chrome.windows.getCurrent(function(wind) {
alert(wind.id);
var maxWidth = window.screen.availWidth;
var maxHeight = window.screen.availHeight;
var updateInfo = {
left: 0, //change those to whatever you like
top: 0,
width: maxWidth,
height: maxHeight
};
chrome.windows.update(wind.id, updateInfo);});
Found an answer:
We need 2 js files. background.js and main.js(content js file, name can be anything).
main.js doesn't have access to extension apis, tabs, background stuff etc. So we will send a message to background.js from our main.js file and get that message in background.js file and execute what we want.
main.js:
chrome.runtime.sendMessage(
{
action: "resizeWindow",
},
function (createdWindow) {
console.log("Window Resize");
}
);
background.js:
//Windows resize
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request && request.action === "resizeWindow") {
chrome.windows.getCurrent(function (window) {
var updateInfo = {
width: 1200,
height: 710,
};
(updateInfo.state = "normal"), chrome.windows.update(window.id, updateInfo);
});
}
});
Note that we need updateInfo.state = "normal".

Transit js code to newly opened window

Sorry for my Bad language skills.
I rewrite this question 10 times. But still hard to express my question...
My Question
I hope to know how to transit js code to newly opened window.
My situation
I have opening new window event and window resizing event js code
//When user click <a id="new-window">new window</a>, new window come up.
$('#new-window').click(function (){
var videoWidth = $(window).width()/2;
var videoHeight = videoWidth/5*3;
var windowWidth = videoWidth + 20;
var windowHeight = videoHeight + 20;
var w = window.open('', '', 'width=' + windowWidth + ', height=' + windowHeight);
//$(#video) is the
var html = $("#video").clone().attr({
"width" : videoWidth,
"height" : videoHeight
});
$(w.document.body).html(html);
event.preventDefault();
});
function videoFit() {
var videoScreen = $(window).width();
$('#video').css({'width': videoScreen, 'height':videoScreen/5 * 3});
}
$( window ).resize(function(){
videoFit();
});
But when I open developTool(chrome) in new window, there are no js files and css files which I put in the parent window.
following code just adjusted to parent window.
Is there any solution to transit js code?
Thank you for read my questions.

Before and After innerWidth / innerHeight on Window Resize?

I have an event listener that looks like:
window.addEventListener("resize", function(data){
console.log(data);
// Do something
});
Is there anyway to get the before resize innerWidth / innerHeight in the above callback function? I went through the data object in the above code and didn't find anything there.
I ended up saving the old width value every time a browser resize event happened. Code looks like:
var initialWidth = window.innerWidth;
window.addEventListener("resize", function(){
// Do something with 'initialWidth'
initialWidth = window.innerWidth;
});
In the above, I save the browser width on page load. Then, every time the browser gets resized, I save the new browser width at the end of the callback function.
You can't, you have to store previous height/width in some variables. Just put it in variables on page load and then you can access it in this method. There is nothing like bofore resize.
read this
Just add something to track the last resize event values:
var windowSize = (function () {
var lastWidth = 0, lastHeight = 0;
window.addEventListener('resize', function (data) {
// do something with last values
...
console.log(lastWidth);
console.log(lastHeight);
...
lastWidth = window.innerWidth;
lastHeight = window.innerHeight;
});
return { width: lastWidth, height: lastHeight };
})();
Now, you can use the windowSize object outside the closure to find what the current window size is, and internally within the closure you can act upon the previous size of the window before updating lastWidth and lastHeight.
Hope this helps!

How to control the size of pop-up window?

I used the following js to pop-up a new window from original window:
oWin = window.open("PServlet?module=LoginHandler","_blank",
"directories=no,location=no,menubar=no,resizable=yes,status=yes,titlebar=yes,toolbar=no",
false);
As you can see, I did not set the size or location of new window, But my test results is that the size of pop-up windows on every time was shown irregularly from the same size of original window, sometimes it is half, sometime it is full screen or partial size.
Everybody know what is reason?
If I wouldn't change the JS, how can I let the pop-up window to be displayed in full screen in every times.
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
function mypopup()
{
mywindow = window.open("http://www.javascript-coder.com", "mywindow", "location=1,status=1,scrollbars=1, width=100,height=100");
mywindow.moveTo(0, 0);
}
For fullscreen, see here: http://javascript-array.com/scripts/window_open/
function popup(url)
{
params = 'width='+screen.width;
params += ', height='+screen.height;
params += ', top=0, left=0'
params += ', fullscreen=yes';
newwin=window.open(url,'windowname4', params);
if (window.focus) {newwin.focus()}
return false;
}

(Titanium mobile, Android) activeTab.open() new window is not preserving tabs

I am new and I saw similar questions but quite old and without solution. All I want is to open new window inside activeTab and preserve the tab group. Unfortunately my code opens new window but does not keep the tabs, the window is just full screen.
I would greatly appreciate if someone could confirm if what I want to achieve is possible at all. Maybe with views somehow... Once again it should work for android. Here is the code:
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Tab 2',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Tab 2',
window:win2
});
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Window 2',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
var data = [
{title:"Sample 1",color:'black',hasChild:true,font:{fontSize:16,fontWeight:'bold'}},
{title:"Sample 2",color:'black',hasChild:true,font:{fontSize:16,fontWeight:'bold'}}
];
var table = Titanium.UI.createTableView({
data:data,
separatorColor: '#ccc',
backgroundColor:'#fff'
});
win1.add(table);
// create table view event listener
table.addEventListener('click', function(e)
{
var win = Titanium.UI.createWindow({
url:'windows/main.js'
});
// this simply opens the new created window but full screen and without original tab group.
tabGroup.activeTab.open(win,{animated:true});
});
//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
There is currently no way to do that on android:
http://developer.appcelerator.com/question/145471/application-with-strange-navigation-how-to-implement-it#answer-252500
here you can find a demo of my solution...
http://sharesend.com/kbkasavo
hope this helps
You have to create navigation group for each tab windows.
For example
//Here's the first window...
var first = Ti.UI.createWindow({
backgroundColor:"#fff",
title:"My App"
});
Next, we’ll create a NavigationGroup. This is an iPhone-only component that controls a stack of windows (reference doc) – we’ll pass it our first window to use as its initially viewable window:
//Here's the nav group that will hold them both...
var firstnavGroup = Ti.UI.iPhone.createNavigationGroup({
window:first
});
//This is the main window of the application
var mainfirst = Ti.UI.createWindow();
mainfirst.add(firstnavGroup);
then assing this mainfirst window to tab.
Repeat this prosess for all tabs
Now when you need to open new window then you have to write
var second = Ti.UI.createWindow({
background:"#fff",
title:"Child Window"
});
firstnavGroup.open(second);
I hope this will help you.

Categories