How can I open several tabs in a one new browser window? - javascript

I'm trying to create a web page that opens two separate browser tabs in the same window. However, using window.open appears to open two separate windows, instead of two browser tabs within the same new window.
I attempted to open http://en.wikipedia.org and http://jsfiddle.net in the same browser window, but each tab was opened in a separate window instead:
window.open("http://www.jsfiddle.net/", "newWindow", "height=200,width=200");
window.open("http://en.wikipedia.org/", "newWindow", "height=200,width=200");
What am I doing wrong here, and what is the correct way to open multiple tabs in a single new window using JavaScript?

It depends on browsers setting that usually is part of user preferences and there is no specific trick to force a browser to behave in certain way!

Try with this lines, it should work.
<a class="link1">Link 1</a>
<a class="link2">Link 2</a>
<script type="text/javascript">
$("a.link1").on("click",function(){
window.open('http://www.jsfiddle.net/','_blank');
});
$("a.link2").on("click",function(){
window.open('http://en.wikipedia.org/','_blank');
});
</script>
I think the ablove lines of code may not work in all the browsers, we can do it in other way by setting the target value for the anchor tag as follows.
$('a').click(function() {
$(this).attr('target', '_blank');
});

Opening a webpage URL in window or tab depends on user's preferences in browser settings. Modern browsers do not allow a web application or webpage to change this behavior. But you can create a browser add-on or extension to override user's browser settings and can open a page in a tab or window using the extension.

Related

URLs of currently open tabs of a browser in JavaScript [duplicate]

I am using Mozilla Firefox and I am trying to figure out a way to access the content of other tabs in the same window using JavaScript and the DOM (I am open to other techniques if exist).
E.g., I want to run JavaScript code in tab1 which can find the title of some other tab. Basically I need this so that I can identify a tab which has opened due an href in my current page without using window.open method. All I want is a simple hyperlink which opens a page belonging to the same domain as the current page (the page should be opened in a new tab). Now I want to be able to access this new tab from the current tab.
Whilst you can easily open a new window using JavaScript, I'm sure that is as far as it goes. From a security point of view you wouldn't want JavaScript in one tab being able to query / access the DOM in another tab. Any site would then be able to gain access to your bank account details, etc. if both sites were opened in separate tabs.
You can access the new window/tab if it was opened with JavaScript and the page indeed is in the same domain.
You can open the window/tab like so
var win = window.open("/path_to_page");
Then you'll have to wait for the page to load before you can access e.g. the title.
win.onload = function(){ alert(win.document.title); };
You could use HTML5 cross-window messaging (archive.org link...but that's kind of cutting edge.
Even in that case, you'd probably need to hijack the <a> tag 'click' event with JavaScript and open the window yourself so that you'd have access to the new window object for posting messages.
Try setting a cookie which is accessible to any page in the same domain. On other pages, use a JavaScript timer to check if the cookie value has changed and when it has you can use its value and take an action.
It worked for me.
Well, this would not be possible, you could try
<a target="_blank" rel="opener" href="about:blank"></a>
This makes a link that opens an about:blank, this will have the same domain as the page that opened It because of the Same-Origen-policy.

How to put a window opened with window.open() behind the opener window?

I have a link that when clicked replaces the current page with another through the default <a> element click behaviour, but which also calls a JavaScript function to open another page in a new window. I would like the new window opened from my JavaScript function to appear behind the current window but can't figure out how to do this. In actual usage, I am feeding click thrus to a database, the link that is controlled by the window.open statement. The other link is to the clients site in a new window. I want the clients site to appear on top.
My current code is as follows:
<script language="JavaScript" type="text/JavaScript">
function countClicks(a,b)
{
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
}
</script>
test
So for the example URLs shown above I would like the (original) window with Google to appear in front of the new window with StackOverflow, but the new window always opens in front.
Try using window.focus() at the end of your existing function:
function countClicks(a,b) {
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank");
window.focus();
}
That should bring the existing window back to the front, noting that behaviour may vary between browsers and depending on popup-blocking settings, etc.
Or you could just swap the two urls, i.e., put the StackOverflow url in the href with the appropriate query string specified directly rather than in JS, and put the Google url in the window.open() call.
Popup behavior varies based on browser/user settings. I haven't been able to replicate the open behind behaviour myself, but I believe what you're looking for is .focus().
Try:
window.open("http://stackoverflow.com?id="+a+"&id2="+b, "_blank").focus();

Accessing the content of other tabs in a browser

I am using Mozilla Firefox and I am trying to figure out a way to access the content of other tabs in the same window using JavaScript and the DOM (I am open to other techniques if exist).
E.g., I want to run JavaScript code in tab1 which can find the title of some other tab. Basically I need this so that I can identify a tab which has opened due an href in my current page without using window.open method. All I want is a simple hyperlink which opens a page belonging to the same domain as the current page (the page should be opened in a new tab). Now I want to be able to access this new tab from the current tab.
Whilst you can easily open a new window using JavaScript, I'm sure that is as far as it goes. From a security point of view you wouldn't want JavaScript in one tab being able to query / access the DOM in another tab. Any site would then be able to gain access to your bank account details, etc. if both sites were opened in separate tabs.
You can access the new window/tab if it was opened with JavaScript and the page indeed is in the same domain.
You can open the window/tab like so
var win = window.open("/path_to_page");
Then you'll have to wait for the page to load before you can access e.g. the title.
win.onload = function(){ alert(win.document.title); };
You could use HTML5 cross-window messaging (archive.org link...but that's kind of cutting edge.
Even in that case, you'd probably need to hijack the <a> tag 'click' event with JavaScript and open the window yourself so that you'd have access to the new window object for posting messages.
Try setting a cookie which is accessible to any page in the same domain. On other pages, use a JavaScript timer to check if the cookie value has changed and when it has you can use its value and take an action.
It worked for me.
Well, this would not be possible, you could try
<a target="_blank" rel="opener" href="about:blank"></a>
This makes a link that opens an about:blank, this will have the same domain as the page that opened It because of the Same-Origen-policy.

Google Chrome Extension

How do I open a link in a new tab in the extension HTML.
E.g.
clicks on icon
sees Google chrome window which has the window.html
inside there are two links, one link to open a link in a new tab, other in the original tab.
I used window.location, doesn't work like that.
If the page is indeed in a google chrome extension, you can force the browser to open the page in a new tab using javascript (which you know is enabled sine you are a google chrome extension).
chrome.tabs.create({url:"http://somewhere", selected:true});
Your extension will need the tabs permission.
See: http://code.google.com/chrome/extensions/tabs.html
I don't know why this question has two upvotes, but anyway you can try using the target attribute for anchor elements.
<a target="_blank" src="http://myFancyUrl">This is a link to a new tab</a>
However, it won't open in a new tab unless the user has the navigator configured that way (usually does).

Firefox sidebar extension link loaded into a new browser tab. How-To?

I have a friefox sidebar extension. If its opened by clicking on the toolbar icon I load it with a webpage ( that I have authored ). Now, if the user clicks on the link on the webpage ( thats loaded into the sidebar ) I want the linked webpage to open up in a new tab of the main window. I tried with this in my webpage markup:
<a target="_content" href="http://www.google.com">Google</a>
But the link opens up in the tab that has focus and not in a new tab.
Please help.
Thanks.
If you use target="_blank" instead, FF (version 3) should open a new tab for it. Haven't tried it from a sidebar, but it's worth giving a shot.
Actually, there is no way to load a webpage ( whose link was in another webpage loaded into the sidebar extension ) onto a new tab in the browser. The only way is to use javascript. That has to execute under privileged conditions ( meaning as part of an extension ) like below:
gBrowser.addTab("http://www.google.com/");
EDIT:
The above technique of adding a browser tab did not work in this case. According to this article code running in the sidebar does not have access to the main window. So first up I got access to the browser window before using gBrowser. Here is the code taken from the website that I used and works properly:
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
After I got access to the browser window I accessed gBrowser through the getBrowser function like below:
mainWindow.getBrowser().addTab("http://www.google.com/");
The opens up a new tab in the main window browser.
Google
This is more dependent on the browser that is being used. Firefox and Opera, and I'm sure the newest IE, display "new windows" as a new tab unless otherwise specified by user preference.

Categories