Почему window.open отображает пустой экран в PWA на рабочем столе (выглядит запутанным)? - PullRequest
Новая
       31

Почему window.open отображает пустой экран в PWA на рабочем столе (выглядит запутанным)?

0 голосов
/ 01 апреля 2019

На установленном настольном PWA, начиная с Chrome 73 (в MacOS), когда я выполняю window.open() для события щелчка с обычным URL, страница загружается полностью, но окно пустое.

Это выглядит запутанным, но нет наложенного тега ничего видимого (все в порядке в консоли devtools и на вкладках сети)

Я пробовал использовать стандартную тему Chrome, обе с темным и светлым режимами Мохаве.

HTML-разметка: 

<a href="https://jakearchibald.github.io/svgomg/" data-index="2" data-category="svg" rel="noopener noreferrer" class="data-app-button">
  <span class="app-name">SVGOMG</span>
</a>

JavaScript: 

// clicks
document.addEventListener(
    "click",
    function (event) {
      if (event.target.closest("[data-app-index]")) {
        let appID = event.target.closest("[data-app-index]").getAttribute("data-app-index");
        return openApp(appID);
      }
    },
    false
);


// openApp() - a regular window.open()
const openApp = appID => {
    event.preventDefault();

    // get app options
    let appOptions = State.appList[appID];
    appOptions.window = appOptions.window || {};

    // merge with defaults
    let defaultWindow = State.getDefaultWindow;
    let options = Object.assign({}, defaultWindow, appOptions.window);

    // center window
    options.left = screen.width / 2 - options.width / 2;
    options.top = screen.height / 2 - options.height / 2;

    // translate to window.open args
    let args = [];
    for (let [key, val] of Object.entries(options)) args.push(`${key}=${val}`);
    args = args.join(",");

    // open app
    return window.open(appOptions.url, appOptions.name, args);
};

Перед обновлением до Chrome 73 все работало должным образом: функция window.open() правильно отображала веб-страницу.

Теперь окно открывается, но ничего не видно.

window.open

1 Ответ

0 голосов
/ 01 апреля 2019

ОК. Думаю, я нашел решение: я заметил, что сразу после открытия окна родительское окно (PWA) вернул фокус.Так что он вел себя как поп-ап.Поскольку всплывающие окна являются очень плохой / вредоносной практикой, я думаю, что Chrome блокирует дочернее всплывающее окно.

Итак, я удалил инструкцию возврата в обратном вызове события: 

// I changed this:
return openApp(appID);

// to this:
openApp(appID);

Кажется, что родительское окно больше не крадет фокус, и всплывающее содержимое отображается правильно.

...