Question

我正在使用Polymer3（带有导入的Javascript ES6）构建SPA。我的应用程序需要将一些小部件移动到新的浏览器窗口。然后，用户可以在具有多个监视器的情况下将一些小部件移动到多个屏幕。以下是我从现有窗口中分离元素并将其附加到新窗口的过程。

使用HTML DOM removeChild（）方法分离元素
使用window.open（“”，“ myWindow”，'modal = yes'）;
使用newWindow.document.body.appendChild（element）;将新元素附加到新窗口。

问题

当元素在新窗口中时，它不会采用父窗口样式。
分离元素时，某些父窗口样式会损坏。

有人可以指导我达到要求的方式吗？

Answer 1

我不确定100％会正常工作，但是您可以打开已经打开两次的同一窗口。第二次，您使用其他参数打开它。例如

// your app root url -> http://localhost/mySPA

widget1Window = window.open("http://localhost/mySPA/widget1", "myWindow",'modal=yes');

and in your app template you map that route to specific widget.
e.g in pseudo angular2 code, both routes load the same page, but with 
different conditions in route.

<app>
 <maincontent>
  <common-stuff-between-windows></common-stuff-between-windows>
  <widget1 *ngIf="showWidget1"></widget1>
  <widget2 *ngIf="showWidget2"></widget2>
 </maincontent>
</app>
and in your javascript routing you would check if the route contains
a widget reference. If yes, then make that part of the template visible.

分离HTML元素并在不破坏样式的情况下在新的浏览器窗口中打开

1 个答案: