Nw.js: Focusing an iframe causes the window to lose its focus.

Created on 18 Mar 2016 · 10Comments · Source: nwjs/nw.js

Focusing an iframe causes the window to lose its focus.

Tested with: 0.13.0-rc3 & 0.13.0-rc4 on osx.

See the example app.
Archive.zip

P2 WIP bug nw13 triaged

Source

iteufel

All 10 comments

@iteufel could you describe more clear about the issue?
I tried your sample with latest nwjs, when I click the iframe zone, the text above it change to "Lost Focus", and when I click other zone, the text change to "Focused", I think it's the correct behavior?

xzhan96 on 15 Mar 2017

@iteufel , my result is same as @xzhan96 , could you please confirm the result?

Christywl on 21 Apr 2017

@Christywl your result is correct.

@xzhan96 The correct behaviour should be that a window should not lose its focus when I interact with any Element inside.

Event: blur

Emitted when window loses focus.

Event: focus

Emitted when window gets focus.

iteufel on 26 Apr 2017

This could be an issue in Chrome browser, as I reproduce it as well in Chrome if I changed OP's sample so it can run in Chrome:

window.onfocus = function () {
  document.getElementById('msg').innerText = "Focused"
};

window.onblur = function () {
  document.getElementById('msg').innerText = "Lost Focus"
};

rogerwang on 26 Apr 2018

@rogerwang I disagree that this is upstream bug.

You are right, that the DOM window object acts like this, but the DOM window is rather frame, than window. Iframe has isolated window object and this is fine. Probably because of historic reasons. Noone has the force to rename JS window object :). But nw.Window is rather the actual window than the DOM frame inside.

This is what I was trying to describe in #6508. Chromium provides an API chrome.windows, that has desired behavior. But it is not comfortable to use it, because it uses different window IDs, which are unreachable from the nw.Window object.

Beside that I'd not recommend to use chrome.* API to interact with windows, because it causes some issues in NWjs. Last time I encountered a bug which caused NWjs to crash when using chrome.app.window.create() method, while nw.Window.open() worked just fine.

bambooCZ on 30 Apr 2018

I agree. Will fix it in NW.

rogerwang on 30 Apr 2018

👍1

Here is a barebones demo that reproduces the problem with [email protected]. Clicking the iframe sends a focus, then blur event but nothing gets emitted after that. Even touching the window controls or alt-tabbing back has no effect. The only way to get it working again is to click some HTML content not in the iframe (would need to add some extra HTML to the demo to click on).

This also affects windows that you nw.Window.open(...) and use the built-in NW.js hooks, someOtherWindow.on('focus', ...), someOtherWindow.on('blur', ...).

index.html

<html>
<head>
  <title>Focus test</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .full-frame {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>
</head>
<body>

<iframe class="full-frame" frameborder="0" srcdoc="some iframe content"></iframe>

<script>
  console.log('index.html console log');

  window.addEventListener('blur', function() { console.log('window blur'); });
  window.addEventListener('focus', function() { console.log('window focus'); });

  nw.Window.get().on('focus',function() { console.log('nw.js focus'); });
  nw.Window.get().on('focus',function() { console.log('nw.js blur'); });

  window.document.addEventListener('visibilitychange', () => {
    console.log('visibility change');
  }, false);

</script>
</body>
</html>

MadLittleMods on 4 May 2018

just saying, not only iframe, \ tag had same bug.

miaulightouch on 28 May 2018

👍1

@rogerwang Still isn't fixed. (NWjs 0.36.3)

panther7 on 7 May 2019

Hi guys. This crash whole app. I am using 0.45.0-sdk.

// Crash whole app ❌
chrome.app.window.create('index.html');

// Closing new window close parent window ❌
chrome.app.window.create('index.html', {id: 'xxxx'});

// Closing new window close only that window, not parent ✅
nw.Window.open('index.html');

// Closing new window close only that window, not parent ✅
chrome.windows.create({url: 'index.html'});

// Closing new window close only that window, not parent ✅
chrome.browser.openTab({url: "index.html"});

// Closing new window close only that window, not parent ✅
chrome.tabs.create({url: "index.html"});