Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Injecting styles into new windows opened via window.open

See original GitHub issue

emotion version: 9.2.5
react version: 16.8.2

Relevant code:

const popupWindow = window.open("", target, openOptionsToString(options));
popupWindowRef.current = popupWindow;

// I need to do this because my styles aren't injected into `popupWindow`.
popupWindow.document.head.innerHTML = window.document.head.innerHTML;

React.createPortal(props.children, popupWindowRef.current.document.body)

What you did: Given a component and the snippet above,

<ShowInNewWindow>
  hello world
</ShowInNewWindow

The “hello world” rendered in the new window is rendered without any styling whatsoever, even though the page that triggered the new window has styles added to its <head>.

Reproduction:

Full reproduction on CodeSandbox

Expected The contents of the new window receive the same styling as the source window.

What I find particularly interesting is that the components on the new window have computed classNames – so that part works. It’s just that there are no styles injected into <head> that is throwing me off.

cc @stereobooster who showed me this issue

Issue Analytics

State:
Created 5 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

tomconnorscommented, Jun 1, 2021

I’m also having difficulty styling components in a window opened with window.open. I forked @RPDeshaies’ sandbox and added the CacheProvider, but I’m still unable to style anything in the external window. I’m creating the cache w/ createCache({key: "my-cache", container: externalWindow.document.head}), and passing that cache as the value for the CacheProvider component. Is this the intended API usage?

https://codesandbox.io/s/elastic-visvesvaraya-ucypu

1reaction

Andaristcommented, May 6, 2021

If you set up a CodeSandbox that would do what you want, just without styling, then I could probably showcase this to you.

Top Results From Across the Web

Open a new javascript window(.open) along with its CSS styling

Open a new javascript window(.open) along with its CSS styling ; <script> ; function printContent() { window.open().document.write($("#content").html()); window.

Window.open() - Web APIs | MDN

The open() method of the Window interface loads a specified resource into a new or existing browsing context (that is, a tab, a...

Why let someone know when a link opens a new window?

What I recommend as a solution to informing people that a link opens a new window is, in my opinion, much cleaner and...

Popups and window methods - The Modern JavaScript Tutorial

A popup can be opened by the open(url, name, params) call. It returns the reference to the newly opened window. Browsers block open...

Understanding the JavaScript Window Object - SitePoint

These properties and methods are made available through the window object. Every browser window, tab, popup, frame, and iframe has a window ......