Develop Reference

porthole.js - how can I close a tab that I opened using window.open(), but from the new tab

I need to spawn a tab using window.open('...', '_blank');
Then, I need that tab to CLOSE ITSELF, when the user click a button (button is in the new tab).
I have control over the codebase and server of both applications.
I tried the following:
in app#1:
window.tab = window.open('http://localhost:5007', '_blank');
in app#2:
function clickedButton() {
window.opener.tab.close();
}
Unfortunately I get security exception:
Error: Blocked a frame with origin "http://localhost:5007" from accessing a cross-origin frame.
How can I get around this error? Is there anyway I can use this library to overcome this? https://github.com/ternarylabs/porthole

I am simply going to quote documentation here, just for anyone who needs a reference click W3C and MDN.
function openWin() {
myWindow = window.open("", "myWindow", "width=200, height=100"); // Opens a new window
}
function closeWin() {
myWindow.close(); // Closes the new window
}
To break it down, the open and close functions use parameters than can be very useful, such as the URL, when desiring to open or close the current window, or in your case the opened window.
A practical example would be this stack overflow question. N
I hope it helps!
EDIT
To answer the OP's edit to the question: If it is a matter of triggering an event on a window which was opened, you can on the new window have an event handler which will trigger window.close() like so:
$('#anElementId').click(function() { window.opener.$('body').trigger('theCloseEvent', anyPassedData); })
However, if you truly do have control over the new tab, because it leads to a URL whose code base you are in control of, then it is only a matter of triggering an event there that you can trigger either once the window loads, or once you click a button... like so:
HTML
<button id="close-window">Close me</button>
Javascript/jQuery:
$(document).ready(function(){
$("#close-window").click(function(){
alert("ok");
window.close();
});
});
EDIT #2
To further extend the OP's edit, I want to include here an issue that can easily be encountered when attempting to trigger the opened window to close itself.
Quoted from How can I close a browser window without receiving the “Do you want to close this window” prompt?:
Scripts are not allowed to close a window that a user opened. This is considered a security risk. Though it isn't in any standard, all browser vendors follow this (Mozilla docs). If this happens in some browsers, it's a security bug that (ideally) gets patched very quickly.
None of the hacks in the answers on this question work any longer, and if someone would come up with another dirty hack, eventually it will stop working as well.
I suggest you don't waste energy fighting this and embrace the method that the browser so helpfully gives you — ask the user before you seemingly crash their page.
In other words, unless your webpage's script has control of the window which was opened, you should/cannot close said window. That is because the script running the window.close is not in control of the opened window.
EDIT #3
So many edits I know! But I am answering this in between my daily routine so bear with me. To answer the porthole.js question, it should be much more possible to do something with it, however you need to realize that you are working with iframes.
There is a significant difference when working with websites vs working with iframes, in which iframes are Widgets and websites (including mini sites) are given a URL. There are lots of considerations as well in terms of security and sandboxing, as can be seen on the portholejs demo here. This difference is also what does not allow you to work with different websites the way you want to initially.
My advise would be to evaluate your options with respect to your implementation: website to website vs website to widget.
Good luck!

Ok, I was able to accomplish this in the way I theorized by using porthole.js.
I believe this is the only cross-browser way to accomplish this without using hacks.
The solution consists of 2 apps (you must add code to both app for this to work).
app #1: http://localhost:4000
app #2: http://localhost:5000
In my case, I needed app#1 to spawn a need tab containing app#2. Then I needed app#2 to be able to CLOSE ITSELF upon clicking a button inside app#2.
If these apps were on the same domain (including same port), this would be relatively easy by saving a reference to the tab in app#1:
window.tab = window.open('...', '_blank');
And then accessing that reference from within app#2 via window.opener.tab.close()
However, for my case the apps needed to be on diff domains and doing this method resulted in a browser security exception. So instead, what I needed to do was host app#2 within an iframe inside app#1 (on some specific route, say /iframe), this way they ARE on the same domain as far as the browser windows are concerned, and now the second tab should be able to close itself using window.opener.tab.close().
However, a problem still remained because I needed the trigger to be a button INSIDE app#2 (aka a button inside the iframe), and since the hosting app and the iframe app are again not on the same domain, it seems like I would be back to square one... or maybe not.
In this case, porthole.js saves the day. You must load porthole.js into both apps (this is why you need access to both codebases). Here's the code:
in app#1 (http://localhost:4000/iframe)
// create a proxy window to send to and receive messages from the iFrame
var windowProxy;
window.onload = function() {
windowProxy = new Porthole.WindowProxy(
'http://localhost:5000', 'embedded-iframe');
windowProxy.addEventListener(function(event) {
//handle click event from iframe and close the tab
if(event == 'event:close-window') {
window.opener && window.opener.tab && window.opener.tab.close();
}
});
}
in app#2: (http://localhost:5000)
var windowProxy;
window.onload = function() {
windowProxy = new Porthole.WindowProxy(
'http://localhost:4000/#/iframe');
$('button').on('click', function() {
windowProxy.post('event:close-window');
});
}
And wa-lah, a self closing tab.

Creating iframe embeds and using modals

The company I work for is trying to come up with their own version of embed buttons. The logic is similar to what Twitter and Facebook offer. Unlike Twitter, we are using modals in-place of opening a new window. As the moment, we have developer a modal library which suits our needs.
Now, I will explain the process we are following:
Our embed script will be loaded in the user's website.
It looks for a link which we will provide to the user, and an iframe will be loaded in place of it.
The iframe uses two scripts — jQuery and our modal library.
On clicking the button present inside the iframe, the modal should open but it is present on our domain and it should open in the parent window.
From my analysis of the situation, I have come up with the following questions:
I have looked around the net but I have a feeling that opening a modal inside a parent window is not possible. Is there a workaround for this?
To prevent clickjacking we have set X-Frame-Options to SAMEORIGIN. How can we load content in an iframe from our website?
If we skip loading the button inside the iframe and modify the parent DOM, we can use our modal script, but applying our own styles to the buttons becomes a pain as we will be using important! for all styles. What other options are we left with?

To answer your first question, it isn't impossible as I've done something similar, thus I think it should solve your third question as well.
So on the parent page you would have a script such as
function showModal(display) {
var colorbox = $('#colorbox');
var overlay = $('#cboxOverlay');
if (display) {
colorbox.fadeIn("medium");
} else {
colorbox.fadeOut("medium");
overlay.fadeOut("medium");
}
}
I've used colorbox but you could use your custom modal, I've also used a parameter so you can show and hide it as you please.
Then from your iframe you could use this script to call your modal
javascript: window.parent.showModal(true);
Hope this helps.

1) Why dont you just open the modal from the iframe? It will make no difference if you call it from parent window or the child window.
2) Use JSON-P

prevent child window from being caught by popup blocker

I have a function which upon click, it checks some information with a $.get() call before it can know if it should open a child window. It works fine, only that, because the function which opens the child window was not directly from the click event, it will be considered a pesky unwanted popup. Does anyone know of a work-around or a way to prove to the browser that it is a wanted window? Thanks.
$('#send').click(function(){
$.ajaxSetup({cache: false})
$.get('test3.html',function(data){
if(data == "processing"){
alert("still processing");
}else{
childPage = window.open("test.html","send","width = 300,height = 300");
}
});
});

It would be more reliable to pop up the window immediately (to show the user something's hapenning) with a loading screen. Then in the ajax handler you can redirect the popup to the correct page.
That said, popups in general are a bad idea. Is there no way you could do this another way?

I know that I'm not exactly answering what you want, but I found this way more appealing in general than a normal pop up, and gaining way more control.
I'm talking about using a plugin like fancybox, http://www.fancyapps.com/fancybox/#examples
witch allows you to embed iframes, or any other content you want. I'm pretty sure loading an iframe like this would be much easier than trying to sneek around browser limitations.

Does anyone know of a work-around or a way to prove to the browser that it is a wanted window
This will mean changing the browser settings, these are there to prevent what you are trying to achieve so unfortunately to my knowledge there is no way.

Instead of open a new popup, you also can try simulate a popup window via tag. Try this

Can I open a new window and change the DOM of the calling window in JavaScript?

First I would like to say that I've been programming JavaScript for about 3 months now and also that I'm not very concerned with solving this problem by the standards or best practices. My main concern is learning to use the DOM. I don't want to use any jQuery because I'm not familiar with it.
I'm trying to make a non-profesional "login" function on my page, using JavaScript and the DOM. To begin with I was using "login" screen that would be displayed "hidden" initially and then be displayed "block" when in use. This worked fine and looked really good when I added a darkened screen behind the "login" screen by adding less opacity (0.1 opacity) to the main part of the page that's beneath the "login screen".
This (the opacity) would return to normal when I closed the "login" screen. So you can see all the stuff is happening within the same page using the same DOM. OK, this is how I wanted it to work: you create a username then you your create a password. Boom, finished!
But here's the problem: after you create a username and password I want it to say "Hello (username here)" where the login link initially was. I could just use the DOM and insert the username into the HTML page, but when I submit the form that is the login function the page gets reloaded and the changes to the DOM become erased!
So now I can tell you about the solution I thought of: make the form (login page) be in a new window, so when the form is submitted (and the DOM is manipulated) the new window is reloaded and then subsequently closes leaving the changes to the main pages DOM intact. Only problem is I can't figure out how to do this. You could probably say that's a major problem hahaha.
So, can I manipulate the parent windows (i.e. the calling window) DOM from the new window?

In response to your answer: you can modify the caller window's DOM by using window.opener.document from the new window;
window.opener is a reference to the caller window (if any, otherwise null), but only if both windows are from the same domain).
NOTE: Is it a small webpage or you are going to do a lot of DOM manipulation on a web site/application via javascript? In the later case you should use a javascript library/framework (I recommend jQuery) in order to do the dirty job more easily.

A popup window can find the window that opened it using the opener variable.
If both the popup window and the original window originate from the same domain, then the popup window can indeed modify the HTML of the original window.
If the popup window and the original window contain content from a different domain, then they can't see the HTML of each other - due to the cross-origin protection that browsers put in place.

how to make popup windows always on top?

I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.

myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.

use following javascript code in the page you are opening in popup
<body onblur="self.focus();">

Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.

Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.