porthole.js - как я могу закрыть вкладку, что я открыл с помощью window.open(), но с новой вкладке

Question

мне нужно порождать вкладку с помощью window.open('...', '_blank');

Затем мне нужно, что вкладка для замыкаться, когда пользователь нажимает кнопку (кнопка находится на новой вкладке).

У меня есть контроль над кодовой базой и сервером обоих приложений.

Я попытался следующий:

в приложении № 1:

window.tab = window.open('http://localhost:5007', '_blank'); 

в приложении # 2:

function clickedButton() { 
    window.opener.tab.close(); 
} 

К сожалению, я получаю исключение безопасности: Ошибки: Blocked кадра с происхождение "http://localhost:5007" от доступа к кадру скрещивания.

Как я могу обойти эту ошибку? В любом случае, я могу использовать эту библиотеку, чтобы преодолеть это? https://github.com/ternarylabs/porthole

Answer 1

Я просто приведу документацию здесь, только для тех, кому нужна ссылка, нажмите W3C и MDN.

function openWin() { 
    myWindow = window.open("", "myWindow", "width=200, height=100"); // Opens a new window 
} 

function closeWin() { 
    myWindow.close(); // Closes the new window 
} 

Чтобы разбить его, то open и close функции используют параметры, чем может быть очень полезным, например, URL, когда желая, чтобы открыть или закрыть текущее окно, или в случае открыл окно.

Практический пример: this проблема с переполнением стека. N

Надеюсь, это поможет!

EDIT

Чтобы ответить редактировать оп в на вопрос: Если это вопрос вызвав событие на окно, которое было открыто, вы можете в новом окне, обработчик событий, который будет вызвать window.close() так:

$('#anElementId').click(function() { window.opener.$('body').trigger('theCloseEvent', anyPassedData); }) 

Однако, если вы действительно есть контроль над новой вкладки, потому что это приводит к URL, чей базовый код вы контролируете, то это лишь вопрос инициирования события там вы можете как только окно нагрузок, или когда вы нажимаете на кнопку ... как так:

HTML

<button id="close-window">Close me</button> 

JavaScript/JQuery:

$(document).ready(function(){ 
    $("#close-window").click(function(){ 
     alert("ok"); 
     window.close(); 
    }); 
}); 

EDIT # 2

Для дальнейшее расширение редактирования OP, я хочу включить здесь проблему, с которой можно легко столкнуться при попытке запустить открытое окно для закрытия.

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.

Другими словами, если сценарий вашей веб-страницы не имеет контроль окно, которое было открыто, вы должны/могут не закрывать указанное окно. Это связано с тем, что скрипт, запускающий window.close, не контролирует открытое окно.

EDIT # 3

Так много правок я знаю! Но я отвечаю на это между моей повседневной рутиной, так что медведь со мной. Чтобы ответить на вопрос porthole.js, с ним должно быть гораздо возможно сделать что-то, но вам нужно понять, что вы работаете с iframes.

Существует значительная разница при работе с сайтов против работы с , фреймов, в которых плавающие фреймы являются виджеты и веб-сайтов (в том числе мини-сайтов) дают URL. Есть много соображений, а также с точки зрения безопасности и песочницы, как видно на portholejs demo here. Эта разница также не позволяет вам работать с разными веб-сайтами так, как вы хотите изначально.

Мое мнение будет заключаться в том, чтобы оценить ваши варианты в отношении вашей реализации: от веб-сайта до веб-сайта и от веб-сайта до виджета.

Удачи вам!

Answer 2

Хорошо, я смог выполнить это так, как я теоретизировал, используя porthole.js. Я считаю, что это единственный кросс-браузерный способ сделать это без использования хаков.

Решение состоит из 2 приложений (для этого необходимо добавить код для обоих приложений).

app #1: http://localhost:4000 
app #2: http://localhost:5000 

В моем случае мне понадобилось приложение # 1, чтобы создать нужную вкладку, содержащую приложение # 2. Затем мне понадобилось приложение № 2, чтобы иметь возможность ЗАКРЫТЬ СЕБЯ, щелкнув по кнопке внутри приложения №2.

Если эти приложения были на том же домене (в том числе и тот же порт), это было бы относительно легко, сохраняя ссылку на вкладке в приложении № 1:

window.tab = window.open('...', '_blank'); 

И тогда доступ к этой ссылки внутри приложения # 2 через window.opener.tab.close()

Однако для моего приложения приложениям, находящимся на доменах с доменами и выполняющим этот метод, в результате было исключение безопасности браузера. Поэтому вместо этого мне нужно было сделать хост-приложение №2 внутри iframe внутри приложения # 1 (по определенному маршруту, say/iframe), таким образом, они находятся в том же домене, что и окна браузера, и теперь вторая вкладка должна быть в состоянии закрыть себя, используя window.opener.tab.close().

Однако проблема все еще оставалась, потому что мне нужен триггер, чтобы быть кнопкой INSIDE app # 2 (так называемая кнопка внутри iframe), а так как приложение для хостинга и приложение iframe снова не находятся в одном домене, это похоже, я вернусь к квадрату ... или, может быть, нет.

В этом случае porthole.js сохраняет день. Вы должны загрузить porthole.js в оба приложения (вот почему вам нужен доступ к обоим кодам).Вот код:

в приложении # 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(); 
     } 
    }); 
} 

в приложении № 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'); 
     }); 
    } 

И в-л, вкладка Самозакрывающейся.