Component on new window

Component on New Window

Opening a new window is a common requirement in web applications. Sometimes, we need to display a component or module in a new window. For example, if we want to show a preview of a document or an image, we might open it in a new window. In this case, we can create a new component and render it in the new window.

To open a new window, we can use the method. This method creates a new browser window or tab and returns a reference to it. We can use this reference to interact with the new window.


function openWindow() {
  const url = '';
  const options = 'width=600,height=400,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes';
  const win =, '_blank', options);
  const container = document.createElement('div'); = 'preview-container';

  ReactDOM.render(<Preview />, container);
  • We create a function named openWindow that will be called when the user clicks on a button or link.
  • We define the URL of the page that we want to open in the new window.
  • We define some options for the window, such as its dimensions and whether to show the toolbar, location bar, and other elements.
  • We call with the URL, a target (in this case, _blank to open in a new tab or window), and the options.
  • We create a new div element with an ID of preview-container.
  • We append the div element to the new window's body element.
  • We use ReactDOM.render to render our <Preview /> component into the preview-container element.

We can then define our <Preview /> component as usual and it will be rendered in the new window.

Alternate Approach

Another approach is to use an iframe instead of a new window. This can be useful if we want to display a component inline on the page, but isolated from the rest of the page's styles and scripts.

<div id="preview-container"></div>
<iframe src="" id="preview-iframe"></iframe>

const container = document.getElementById('preview-container');
const iframe = document.getElementById('preview-iframe').contentWindow;

ReactDOM.render(<Preview />, container, () => {
  const iframeDoc = iframe.document || iframe.contentDocument;
  const preview = iframeDoc.getElementById('preview-container');
  • We create a <div> element with an ID of preview-container to hold our component.
  • We create an <iframe> element with a src attribute pointing to the URL of the page that we want to display.
  • We define a JavaScript block to handle rendering of our component in the <div> element and then moving it into the iframe's document.
  • We get a reference to the <div> element and the iframe's window object.
  • We use ReactDOM.render to render our <Preview /> component into the <div> element.
  • We wait for the rendering to finish by passing a callback function to ReactDOM.render.
  • Inside the callback function, we get a reference to the iframe's document (either as iframe.document or iframe.contentDocument) and find the <div> element with the ID of preview-container.
  • We append the first child of our original <div> element (which should be our rendered component) to the <div> element in the iframe.

Subscribe to The Poor Coder | Algorithm Solutions

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]