javascript new window cancel original href and target - javascript

My anchor tag, opens in a new blank window if JavaScript disabled
<a target="_blank" onclick="newWindow(this)" href="http://www.google.co.uk">Google</a>
Here's my external javascript which opens the new window then cancels the original href and target from firing.
function newWindow(element) {
var newWin = window.open(element.href, windowName, "top=0, left=0, height=800,width=700,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
return [element.href='Javascript: void()', element.target='_self'];
}
This works ok for 1 click, my problem is that if the user clicks the link again then the href looks like
<a href="Javascript: void();">
so the link wont work!
What am i doing wrong?
How do I code it so once the popup window opens, the original href and target are cancelled?
And the link can be clicked more than once?
thanks

Here is perfectly working solution: http://jsfiddle.net/tceAX/
<a target="_blank" onclick="newWindow(this); return false;" href="http://www.google.co.uk">Google</a>
Javascript:
function newWindow(element) {
var newWin = window.open(element.href, 'window-name', "top=0, left=0, height=800,width=700,resizable=yes,scrollbars=yes,toolbar=no,menubar=no,location=no");
}

You are replacing the link target onClick so just replace
return [element.href='Javascript: void()', element.target='_self'];
with
return false

In your return statement you are setting the element.href property.
element.href='Javascript: void()'
So for the first click it will work, because the element contains the original value. But the second time you click, you already have replaced the href value.

Related

Add url to href on <a> tag but do not want to reload behavior

The following code opens the anchor tag on a new window
However, I do not want to reload the parent page. And also I want to have the ability to Open in a new tab on mouse right click (image below)
If I use href = {'javascript:'} it prevents the parent page from reloading however, when clicked on "Open in a new Tab", it opens on a new tab but url becomes about:blank#blocked
const handleClick = () => {
window.open(
href,
'newwindow',
`width=${window.outerWidth * 0.5}, height=${
window.outerHeight
}, left = ${window.outerWidth * 0.25} `
);
return false;
};
<a href = {href} onClick = {handleClick}> This is Url </a>
Desired result:
By default, open in a new window.
Prevent parent window from refreshing.
Have ability to open on new tab on right click.
You need target="_blank" for this.
Click
To open the link in a new window or a new tab, you can use the target attribute in your anchor tag i.e. ...

How to set the title for the new browser tab?

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.

Javascript link does not work when open in new tab or window

I have some link like this
<a href="#" onclick=aFunction(this)>link</a>
Where "aFunction" opens a link in the current window.
When this link is clicked, it is ok and opens the link, but if it is clicked as "open in new tab" or "open in new window", it does not work.
aFunction code is something like this:
aFunction(object)
{
object.href = "www.mypage.com"
}
Using the context menu for "open in new X" does not trigger the click event. If your code is there simply to set the new window's address, then you'd be far better off doing
link
instead. It won't validate, but it'll degrade better.
Why would you do something like this instead of just putting the url in the href parameter? You can still do other stuff on the click event if you want by adding a click handler even if you use the href attribute properly.
link
<script type="text/javascript">
$(function() { // using jQuery for simplicity, but other methods work, too.
$('a').click( function() {
// do some other stuff
});
});
</script>
Note that by not returning false (or using preventDefault()), we allow the normal click action to take place once our javascript has run.
Use this:
<a id="mylink" href="#">link</a>
<script>
function changeUrl()
{
if( /* some condition here */ )
document.getElementById('mylink').href = "www.someurl.com";
else
document.getElementById('mylink').href = "www.someotherurl.com";
}
</script>
In this way the "Open link in a new tab" of the browser does not brake.
If the condition changes when the user touches something on the page you need to call changeUrl whenever he touches something.
Please find below a function to open url in new window:
function load() {
var load = window.open('http://www.domain.com','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');}

Closing a window

This line is from my JSP file.
I opened this page by setting a target attribute in the <a> tag like target ="_TOP", but the code below is not working. How can I close this window?
<div>click</div>
You can only close a window with JavaScript that has been opened with JavaScript. Since you went with an HTML method, this won't work.
However, if you were to re-code so that JavaScript was opening the window instead...
mylink
Then you could close the resulting window with JavaScript.
target should be _top - this will not pop a NEW window but overwrite the current - is that what you want
try this
<a href="page.jsp" target="_blank"
onclick="var w=window.open(this.href,this.target); return w?false:true">pop a new window</a>
or
<a href="page.jsp" target="mywin"
onclick="var w=window.open(this.href,this.target); return w?false:true">pop a new window</a>
the later you can get the handle:
var w = window.open('','mywin');
if (!w.closed) w.close()

Basic Javascript question: How to open a new window?

How do I open a new window in javascript properly?
I've tried:
<a href='javascript:window.open("testing.html","mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0");' >New Window</a>
This causes a new window to pop up but in Firefox it leaves the original page with a blank window saying "[object Window]". I've also had issues with IE as well.
How can I open a window that works in Firefox, IE, Safari and Chrome?
Bonus: If you can help in creating a link that is javascript degradable (I think that's the term).
By putting the script in the href property, the link will follow the string representation of the return value of the script.
The most backwards compatible way is to put the url and target in the link as regular attributes, and use the onclick event to open a window instead of following the link. By returning false from the event you prevent the link from being followed:
New Window
If Javascript is disabled in the browser, it will follow the link instead and open it in a new window.
Use the target _blank to open a new window.
javascript: links are pretty old-school. Try it with an onclick attribute. And don't forget to return false in the onclick handler to prevent the main page from following the link too.
New Window
you could add void(0) to your javascript code which will prevent the browser from doing anything to the current window
<a href='javascript:window.open("testing.html","mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0"); void(0)' >New Window</a>
<a href='javascript:(function(){window.open("testing.html","mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0")}();' >New Window</a>
Or make it a function:
File
<script>window.onload = function(){
document.getElementsByTagName('a').onclick =
function(evt){ el = evt.target; if (el.className == 'popup'){
window.open(el.href,"mywindow","menubar=0,resizable=1,width=200,height=500,left=0,top=0");
return false; }; };</script>

Categories