I have a question about the new tab for the link.
Is there anyway I can set the browser tab title before user clicks a link? It seems like there is no way to debate the title for the new tab if the html contained in the new tab doesn't have title attribute. Am I right? How do I set the title?
//the href is dynamic so I can't set them one by one because I have 100+ html file here
<a href="test.html" target="_blank">open me<a>
As you have it, this is not possible because your links are just normal HTML links. When the new page opens in a new tab, the current page will not have any reference to it and so cannot change it in any way. You will need to open the page using javascript and set the title that way.
You can dynamically set this up in window onload to find all a tags and add a click event whihc opens the window and sets the title.
If you want different titles for each page, you can store this in a data- attribute in the a tag.
Note tho that this will only work with pages in the same domain (for security), and that it does not handle people right clicking and pressing "Open in New Window". Middle click in Windows does seem to work however.
HTML
open me
JavaScript
window.addEventListener("load", function() {
// does the actual opening
function openWindow(event) {
event = event || window.event;
// find the url and title to set
var href = this.getAttribute("href");
var newTitle = this.getAttribute("data-title");
// or if you work the title out some other way...
// var newTitle = "Some constant string";
// open the window
var newWin = window.open(href, "_blank");
// add a load listener to the window so that the title gets changed on page load
newWin.addEventListener("load", function() {
newWin.document.title = newTitle;
});
// stop the default `a` link or you will get 2 new windows!
event.returnValue = false;
}
// find all a tags opening in a new window
var links = document.querySelectorAll("a[target=_blank][data-title]");
// or this if you don't want to store custom titles with each link
//var links = document.querySelectorAll("a[target=_blank]");
// add a click event for each so we can do our own thing
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", openWindow.bind(links[i]));
}
});
Sample JsFiddle
You can pass the title with hash and get it on another page, if this another page is yours and you can modify its code.
1st page:
...
<a href="test.html#the_title_you_want" target="_blank">open me<a>
...
2nd page - modify the body opening tag like this:
<body onload="document.title=window.location.hash.replace('#','');">
If the page you are linking to isn't yours, you can use window.open method:
open me
I have not seen addEventListener work reliably, especially when opening a new page using javascript. The best way to change the tab title and have it work reliably is to set a timeout until the page loads. You may have to play with the timeout value, but it works.
var newWindow = window.open(url, '_blank');
setTimeout(function () {
newWindow.document.title = "My Tab Name";
}, 100);
You have two options. Using pure HTML, you can let the user open up links, then later on change the title. Or you can change the title with inline JavaScript. Here's how you do both:
Method 1
Change your links by assigning a target attribute, and then later on use that window name to control the document. For instance in your links it would be: <a href="whatever" target="theNewWindow">. Whenever you want to change the title for this page, you'd use JavaScript as such: window.open("", "theNewWindow").document.title = "New Page Title!"; The problem with this method however is that all links with that target/window name will open in that same window. In addition, after the first time the link is clicked, your browser won't automatically switch to the new tab/window.
Method 2
Change your links by assigning an onclick attribute, which would open the link manually and change the title of the page immediately. Basically it would come down to look like: <a href="whatever" onclick="var w=window.open(this.href, '_blank'); (w.onload=function(){w.document.title='New Page Title!';})(); return false;">. This opens the window based on the href attribute, immediately changes the title, and sets the window to change the title to that when it finishes loading (just in case there really was a title tag).
The problem with both of these methods (as mentioned by others) is your html files have to be on the same domain.
The simplest way is a follows:
var winTab = window.open("", "_blank")
//Open URL by writing iframe with given URL
winTab.document.write("write iframe with your url in src here")
//Set Title for the new tab
winTab.document.title = "Form Title"
You could make your own Page 2 that opens up the other pages (the ones you can't edit), in a frameset. You can then either change the title dynamically when loading your page 2, or as others have suggested if you use window.open you can control the title from the parent page.
If you are in page 1, and opening page 2 in a new tab, you can't set title for page 2 from page 1.
If you have access to page 2 then it's possible, otherwise not.
Related
I have a website-1 (www.example.com). When a customer reaches out to my website, the other website-2 (www.example2.com) should be open in a new tab corresponding with the website (www.example.com).
How to do this
I would like to add to Daan Teppema's answer.
Add rel property in the tag, if the website is not safe or untrusted add noopener. but if you are directing within your website remove the noreferrer for SEO tracking purposes.
Example 2
This will keep your website tab open and in the meantime open a new tab with the link you've provided.
You can do an <a> element with the target="_blank" attribute.
Like so:
Example 2
If you want them both to load, then you can make it go to the second one in another tab with javascript using the window.onload event.
Like so:
window.onload = function() {
window.open(url, '_blank').focus();
};
I'm trying to make a random link picker - When I press the button, the link goes in the current tab. I'm trying to make it so it will go into a new one.
<script type="text/javascript">
function randomlinks(){
var myrandom=Math.round(Math.random()*2)
var links=new Array()
links[0]="link1.com"
links[1]="link2.com"
links[2]="link3.com"
window.location=links[myrandom]
}
</script>
<form>
<input type="button" value="Random Episode!" onClick="randomlinks()">
</form>
Change it from:
//This sets the location of the current window, which you don't want
window.location = links[myrandom];
To this:
//This says to open a new tab or window, based on the user browser settings, to the url
window.open(links[myrandom]);
Just replace the line
window.location=links[myrandom]
with
window.open(links[myRandom], '_blank');
The target attribute specifies where to open the linked document.
You also have to check your browser settings first. If they are set to new window you can click your whole lifetime and it will still be opened in a new window instead of a new tab.
These are the right attributes.
The target attribute can have one of the following values:
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same window/tab as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
So, this means that the default value (without the target attribute)
window.location=links[myrandom]
is also working. Hope it helps that your scripts work lovely.
I use a standard bookmarklet that looks something like this:
javascript:(function () {var p = document.title;var uri=document.location;window.location = 'http://localhost:8084/'})()
However, every time I use it, it generates a new tab. How do I stop window.location from opening a new tab, or better, how do I get it to load the page in another tab if it exists (ie, if localhost is already open, that's the tab that will be used.)
This question looks similar to
open url in new tab or reuse existing one whenever possible
window.open(URL,name,specs,replace)
URL : Optional. Specifies the URL of the page to open. If no URL is
specified, a new window with about:blank is opened
name : Optional. Specifies the target attribute or the name of the
window. The following values are supported:
_blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
name - The name of the window (Note: the name does not specify the
title of the new window)
< script >
document.getElementById("container").onclick = function(evt) {
if (evt.target.tagName === "A")
window.open(evt.target.href, evt.target.href);
return false;
} < /script>
<div id="container">
goo
sta
</div>
Is it possible to refresh a page from another page using Javascript or JQuery without opening the same page in a new tab.
JS:
var newtab = window.open('http://localhost:8081/app/home');
newtab.document.location.reload(true);
I tried the above, but here, it will open a new tab, with the same page, which is already opened in the browser.
Please suggest a method.
I got the idea from a previous Question , here they used window Object Reference to reload the popup window, but for me it wont work, because, the parent window and child window runs in 2 different ports. So using the same trick, what i did is :
HTML:
<a onclick="openNewTab()">app2</a>
<a onclick="refreshExistingTab()">Refresh</a>
JS:
<script>
var childWindow = "";
var newTabUrl="http://localhost:8081/app/home";
function openNewTab(){
childWindow = window.open(newTabUrl);
}
function refreshExistingTab(){
childWindow.location.href=newTabUrl;
}
</script>
refreshExistingTab() this instend of refreshExistingTab
take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window.open
basically if you do window.open and specify a window name it will overwrite that window with the url you provided.
so if you open the page each time with same window name, it should overwrite it each time you do it again from that other page.
I have a page http://bartle96.narod2.ru/demo.html there are 4 links to the hidden content
Is it possible to make a direct link to the content such as "dolphin".
So that when you click on a link http://bartle96.narod2.ru/demo.html#delfin immediately opened a photo with a dolphin
Yes, you can define and open needed content on onload event.
Check this post where you can find the same behaviour:
jQuery when pointed to a link should show a div that's hidden by default
You can get the hash value using window.location.hash. Then set the pic you want based on the value.
window.onload = function() {
var pic = window.location.hash;
if ( pic === "#delfin" ) {
// Show picture of dolphin
}
}