Wednesday, August 24, 2016

Unique popup window using window.open in an iframe

Leave a Comment

I have an iFrame with a window open(url,uniqueID,windowparams). The iFrame is located on a single page app and hosted in another server. Everytime I refresh or change the page then return to the IFrame page, then try to initiate the same window.open. Instead of refreshing the already opened window, it creates an instance of the same window. Upon checking the window.name of each popup, it returns the same uniqueID as its window name. If the url is set blank it behaves as expected. But when a url is set, it creates a new instance of the window.

  • Do iFrame window.open behave like that when destroyed?
  • I tried running the iFrame source locally and the window open behaves properly even after refreshing.
  • I tried in IE, Firefox, and Chrome, and it returned the same behaviour.

UPDATE:

Mike successfully fixed the behavior for Webkit browsers by added sandbox properties for the iFrame source. Now the window.open method works as intended and not creating new instances of the same window of the same window.name.

However, Mike still has no luck with Firefox. If someone could give a work around for this, it would be much appreciated.

The Webkit browser behaviour for an iFrame with sanboxed properties in the video below.

See that the parent, even when refreshed still can detect that there is an already opened popup of the same name. https://youtu.be/z5_xXRjY8Ow

The Firefox behaviour for an iFrame with sanboxed properties in the video below.

When the parent window is refreshed, the browser could not detect the already opened popup and creates another instance of the pop up with the same window.name. https://youtu.be/uHaDveW1Sd0

Is there a workaround to make Firefox behave like Webkit browsers?

UPDATE:

Mike found out that using a blank url in window.open behave properly in firefox. But still how to fix this haha.

UPDATE:

Here's Johnny! er Mike means another test case. Try using webkit browsers and firefox. After opening a popup, refresh the page then open another popup webkit browsers will only have one instance of thy window, however firefox will create a new one. console.log(window.name) on the opened popup window and you shall get 'Mike' as the window name https://bug1295839.bmoattachments.org/attachment.cgi?id=8782242

1 Answers

Answers 1

There are several problems that I see in your code:

  1. You are calling a function that are nested inside another function to close the window, that never gets triggered because parent function is not callable at this time.

    function openWin(){      /* code */ } function closeWin(){      /* code */ } 
  2. To insure browser compatibility to close the Window, I strongly suggest to set and call an injectable function inside generated popup from parent window

Example to inject a function:

myWindow.document.write(         "<p>This is 'myWindow'</p>"         +"<script>"         +"function closeWindow()\{" // sample injected function         +"window.close();"         +"\}<\/script>"     );  

Full Example:

<!DOCTYPE html> <html> <body>   <button onclick="openWin()">Open "myWindow"</button> <button onclick="closeWin()">Close "myWindow"</button>  <script>  var myWindow; function openWin() {     myWindow = window.open("", "myWindow", "width=200,height=100");     myWindow.document.write(         "<p>This is 'myWindow'</p>"         +"<script>"         +"function closeWindow()\{" // sample injected function         +"window.close();"         +"\}<\/script>"     );     } function closeWin() {         if(!myWindow.closeWindow) {             setTimeout(closeWin,1000); // repeat if function not found         } else {              myWindow.closeWindow();         } } </script> </body> </html> 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment