I'm having some issues with the window system in Javascript:
I have a website A that lists links to a different website B (currently <a> tags with target="_blank" attributes).
I would like the link in A to open in a new tab from B, however the page from B (which I cannot edit) contains a script that changes the location of the window.parent, in this case the tab containing the website A, then closes itself.
So I'm looking for a way to open a new tab/window without a reference to the current page in window.{parent/top/opener}. Is it possible ?
I found a way to remove the window.opener reference to my site, so if anyone encounters the same kind of problem here is a solution:
Link
var openLink = function(url) {
var w = window.open(url, '_blank');
w.opener = null;
}
Add the rel="noopener" attribute to the anchor tag:
<a target="_blank" rel="noopener" href="http://example.com">Link</a>
This is supported in most browsers: https://caniuse.com/#search=noopener
Notes:
IE and Edge don't support rel="noopener", but they also don't set window.opener for cross-origin links (I can't find an authoritative reference for this, however).
If you need to support other browsers (i.e. Safari 10 or others) that do set window.opener and don't support rel="noopener", #Elassyo's technique will work.
Related
I have been facing a problem.I am able to open a window using window.open method.If I specify the height and width of the window,it opens as a pop up window.If no parameters is given for height or width,then it opens in a new tab.
Is there any property through which I can determine window opened was a pop up or a new tab?
Thank you
Malcolm X
Edit: I have been looking into this a little further.
Seems like there is no different "type" on these windows, simply different options.
A way I found to check if it was a tab or window is to check window.menubar.visible.
For the tab, which is a full and normal window it is true, and for the pop-up the menu is hidden and therefore false. Same applies to window.toolbar.visible.
Works in FF and Chrome at least. Unfortunately not in IE. (Testing done in IE8, which is the version I have installed. For testing of course..)
Example:
if(window.menubar.visible) {
//Tab
} else {
//"Child" Window
}
Found this thread: Internet Explorer 8 JS Error: 'window.toolbar.visible' is null or not an object
If you specify width and height, it means that you also have to specify the name parameter. This can be used in the same way target in an a tag is used, and defaults to _blank.
If you do not specify width and height I assume you also don't specify name and therefore it is opened with name=_blank, which means a new Tab.
If you specify width and height, are you setting a custom name? Doing so results in a child window. If you specify a name, or empty string as name, I suggest you try name:_blank if you want it to be a new tab.
If the window was opened with a name, you can always the window.parent from the child window. If you open with _blank I am not sure if you can get the window.parent
w3schools Window Open
I'm not quite sure what you mean in your question but from what I understand, you might want to use the HTML target attribute:
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame 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
Source: http://www.w3schools.com/tags/att_a_target.asp
You can detect that using onblur, by checking whether the focus is missed or not
<html>
<head>
<script>
function newTab() {
document.getElementById("demo").innerHTML = "New tab opened!<br><br>refesh this page to recheck ";
}
window.onblur = newTab;
</script>
</head>
<body>
<div id="demo">
Open a new tab and then check this page
</div>
</body>
</html>
I have developed a webapp to use it as Firefox extension. In Firefox I include it with an iframe like this
<iframe src="http://mywebapp.com" flex="2" id="browserTable" name="table_frame"/>
Now I want to have some outgoing links in my app. If I just use normal link markup like
Contact
the link is opened in the iframe that is small in space since it is in the sidebar. Is there any way to open it in a new tab in the main browser window?
The target attribute allows you to specify which window to open a link in. You have these special keywords you can place in the attribute:
_blank - new window
_self - same window (default)
_parent - the window which opened the current window, or the parent frame in a frameset
_top - overload the entire page, usually used in a frame context
"string" - in the window with an id of "string", or a new window if "string" is not the id of a current window
So, here is your HTML:
Contact
EDIT Did some research after our discussion in comments, and found this snippet:
var myUrl = "http://mesh.typepad.com";
var tBrowser = top.document.getElementById("content");
var tab = tBrowser.addTab(myUrl);
// use this line to focus the new tab, otherwise it will open in background
tBrowser.selectedTab = tab;
Source: http://mesh.typepad.com/blog/2004/11/creating_a_new_.html
Let me know if that works out... curious myself, but my current FF environment is not one in which I can easily experiment with extension dev, and I don't want to change things to try.
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>
i have Problem with opening popups in javascript i have this function to open my popups in IE6 and IE7:
function open_window(Location,w,h) //opens new window
{
var win = "width="+w+",height="+h+",menubar=no,location=no,resizable,scrollbars,top=500,left=500";
alert(win) ;
window.open(Location,'newWin',win).focus();
}
it's working . i mean my new window opens but an error occurs. The Error Message is :
'window.open(...)' is null is not an object.
do you want to countinue running script on this page ?
then i have button in onclick event it's will call a function to close current window an refresh the opener function is
function refreshParent(location)
{
window.opener.location.href = location ;
window.close();
}
it's also gives me error : window.opener.location is null or not an object but i'm sure i'm passing correct parameters
i call it like this :
for second part :
<input type="button" name="pay" value="test" onclick="refreshParent('index.php?module=payment&task=default')" >
for first part :
<a onclick="javascript:open_window('?module=cart&task=add&id=<?=$res[xproductid]?>&popup=on','500' , '500')" style="cursor:pointer" id="addtocard"> <img src="../images/new_theme/buy_book.gif" width="123" border="0"/> </a>
it's really confuse me . Please Help ;)
When popup windows opened using window.open are blocked by a popup blocker, a feature of pretty much any modern browser these days, the return value of window.open() is not a window object, but null.
In order to circumvent these issues you would need to test the value returned by window.open() before attempting to invoke any methods on it.
Below is a piece of code to demonstrate how to go around this problem:
function open_window(Location,w,h) //opens new window
{
var options = "width=" + w + ",height=" + h;
options += ",menubar=no,location=no,resizable,scrollbars,top=500,left=500";
var newwin = window.open(Location,'newWin',options);
if (newwin == null)
{
// The popup got blocked, notify the user
return false;
}
newwin.focus();
}
In general, popup windows should be used only as a last resort or in controlled environments (internal company website, etc). Popup blockers tend to behave in very inconsistent ways and there may be more than a single popup blocker installed in a given browser so instructing the user on how to allow popups for a given website is not necessarily a solution. Example: IE7 + Google toolbar = two popup blockers.
If I may suggest, perhaps you should consider using something like this:
http://jqueryui.com/demos/dialog/
The advantages are numerous:
Skinnable, so you can create a more consistent look to match your website.
No popup blockers.
Good API and documentation that is consistent across most, if not all, major browsers.
If you still require that the newly opened "window" contain an external URL, you could use an IFRAME inside the opened dialog window.
Hope this helps,
Lior.
Works perfectly fine for me. Tested in IE6/7/8.
Of course I couldn't test it with your URLs so I replaced these with simple filenames. I'd suggest you try it also with simple filenames and see if it also fails then.
Beside that...
You don't need to add "javascript:" at the beginning of onclick attribute value.
It would also be good if you added a href="..." attribute to the link with the same URL that you give to open_window. Then it would become a real link and you wouldn't have to add cursor:pointer to it. For example:
<a href="?module=cart&task=add&id=<?=$res[xproductid]?>&popup=on"
onclick="open_window(this.href, '500' , '500'); return false;"> ...
Here is a way to have your cake and eat it too
I have not tested it on all browsers but it should really work
function open_window(url,target,w,h) { //opens new window
var parms = "width="+w+",height="+h+",menubar=no,location=no,resizable,scrollbars,top=500,left=500";
var win = window.open(url,target,parms);
if (win) {
win.focus();
return false; // cancel the onClick
}
return true; // make the link perform as normal
}
Using the link
<a href="?module=cart&task=add&id=<?=$res[xproductid]?>&popup=on"
target="newWin"
onclick="return open_window(this.href,this.target,500,500)"
id="addtocard"><img src="../images/new_theme/buy_book.gif" width="123" border="0"/></a>
which even saves you the silly cursor thing since it is an actual link which works even when JS is turned off
I have a few links that should all open in the same window or tab.
To accomplish this I've given the window a name like in this example code:
<a href="#" onClick='window.open("http://somesite.com", "mywindow", "");'>link 1</a>
<a href="#" onClick='window.open("http://someothersite.com", "mywindow", "");'>link 2</a>
This works OK in internet explorer, but firefox always opens a new tab/window.
Any ideas?
Actually, the W3Schools documentation linked to by gabriel1836 is only a very very brief summary of functions.
And Oddly, mozilla's own developer reference CONTRADITCS this logic.
MDC / DOM / Window.open
var WindowObjectReference = window.open(strUrl,
strWindowName [, strWindowFeatures]);
If a window with the name
strWindowName already exists, then,
instead of opening a new window,
strUrl is loaded into the existing
window. In this case the return value
of the method is the existing window
and strWindowFeatures is ignored.
Providing an empty string for strUrl
is a way to get a reference to an open
window by its name without changing
the window's location. If you want to
open a new window on every call of
window.open(), you should use the
special value _blank for
strWindowName.
However, the page also states that there are many extensions that can be installed that change this behaviour.
So either the documentation mozilla provides for people targeting their own browser is wrong or something is odd with your test system :)
Also, your current A-Href notation is bad for the web, and will infuriate users.
<a href="http://google.com"
onclick="window.open( this.href, 'windowName' ); return false" >
Text
</a>
Is a SUBSTANTIALLY better way to do it.
Many people will instinctively 'middle click' links they want to manually open in a new tab, and having your only href as "#" infuriates them to depravity.
The "#" trick is a redundant and somewhat bad trick to stop the page going somewhere unintended, but this is only because of the lack of understanding of how to use onclick
If you return FALSE from an on-click event, it will cancel the links default action ( the default action being navigating the current page away )
Even better than this notation would be to use unintrusive javascript like so:
<a href="google.com" rel="external" >Text</a>
and later
<script type="text/javascript">
jQuery(function($){
$("a[rel*=external]").click(function(){
window.open(this.href, 'newWindowName' );
return false;
});
});
</script>
The window.open() function in Javascript is specifically designed to open a new window, please see: w3schools documentation. It actually sounds like IE is handling things in a non-standard way (which is hardly surprising).
If you want to relocate the existing location to a new page using Javascript, you should look at the location.replace() function.
Generally speaking I would recommend that you develop for Firefox and then fix for IE. Not only does Firefox offer better development tools but its implementation of W3C standards tends to be more correct.
By default FF uses a new tab if dimensions are omitted on the window.open parameters. You need to add dimensions for a new browser window.
Try this:
<a href="#" onClick='window.open("http://somesite.com", "mywindow", "width=700", "height=500");'>link 1</a>
Why don't you just use plain HTML like
Link
instead of using JavaScript?