2015-10-21 66 views
0

我需要生成使用window.open('...', '_blank');porthole.js - 我怎麼能收,我使用window.open()打開一個標籤,但新標籤

然後一個標籤,我需要關閉這個分頁本身,當用戶點擊一個按鈕時(按鈕在新標籤中)。

我可以控制兩個應用程序的代碼庫和服務器。

我試過如下:

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

在app#2:

在應用#1

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

不幸的是,我得到安全例外: 錯誤:封閉框架來源「http://localhost:5007」訪問一個跨源幀。

我該如何解決這個錯誤?無論如何,我可以用這個庫來克服這個問題嗎? https://github.com/ternarylabs/porthole

+0

你可以在窗口加載時調用javascript window.close()按鈕點擊 – AGE

+0

我很確定用'window.open()'打開的窗口可以用'window.close()'關閉。 –

+1

[如何關閉瀏覽器窗口中的當前選項卡?](http://stackoverflow.com/questions/2076299/how-to-close-current-tab-in-a-browser-window) – LGSon

回答

1

我只是在此處引用文檔,僅供需要參考的任何人點擊W3CMDN

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

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

進行分解,在openclose函數使用比參數可以是非常有用的,比如URL,希望打開或關閉當前窗口的時候,或者在你的情況打開窗口。

一個實際的例子是this堆棧溢出問題。 N

我希望它有幫助!

編輯

要回答OP的編輯的問題:如果是觸發其打開的窗口上的一個事件的問題,你可以在新窗口中有一個事件處理程序,這將觸發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(); 
    }); 
}); 

編輯#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的腳本無法控制打開的窗口。

編輯#3

所以很多編輯我知道了!但我在日常工作之間回答這個問題,所以忍耐着我。要回答porthole.js的問題,應該有更多的可能性去做,但是你需要意識到你正在使用iframe。

有一個顯著差異與網站工作VS與I幀,在iframe會Widget和網站(包括微型站點)工作時給出一個網址。在安全性和沙箱方面也有很多考慮因素,可以在portholejs demo here上看到。這種差異也是不允許你以最初的方式使用不同網站的方式。

我的建議是相對於您的實現,以評估你的選擇:網站,網站VS網站,窗口小部件。

祝你好運!

+0

請參閱編輯。這不是我要問的。有沒有辦法將引用傳遞給myWindow.close()函數INTO第二個窗口,以便第二個窗口可以關閉它自己。我可以控制兩個代碼庫。 – parliament

+1

當你打開這個新標籤頁/窗口時,窗口會自動關閉而不會延遲一段時間?或者它會等待你做些什麼來關閉它,例如按下按鈕? – AGE

+1

@議會控制兩個代碼庫意味着JavaScript控制新窗口,你可以隨時訪問和修改? – AGE

1

好吧,我能在我理論用porthole.js的方式來做到這一點。 我相信這是在不使用黑客的情況下完成此操作的唯一跨瀏覽器方式。

解決方案包括2個應用程序(你必須將代碼添加到應用程序都爲這個工作)。

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

就我而言,我需要應用#1來產生一個包含應用#2的需求選項卡。然後,我需要應用#2才能在單擊應用#2內的按鈕時關閉它自己。

如果這些應用分別對相同的域(包括相同的端口),這將是通過在應用程序#1保存到標籤的基準相對容易:

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

然後從應用程序內訪問該參考通過window.opener.tab.close()

但是#2,我的情況下,應用程序需要的是對差異域和這樣的方法導致了瀏覽器的安全例外。相反,我需要做的是在應用程序#1的iframe中(在某些特定的路線上,比如/ iframe)託管應用程序#2,這樣,就瀏覽器窗口而言,它們位於相同的域中,現在第二個標籤應該能夠使用window.opener.tab.close()關閉自己。

但是,問題仍然存在,因爲我需要將觸發器設置爲INSIDE應用程序#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(); 
     } 
    }); 
} 

在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'); 
     }); 
    } 

和WA-啦,自封閉標籤。

相關問題