javascript

Component on new window

Bodo Coder

— 2 min read

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 window.open() 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.

Example


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

  win.document.body.appendChild(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 window.open 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="https://example.com/preview" id="preview-iframe"></iframe>

<script>
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');
  preview.appendChild(container.firstChild);
});
</script>
  • 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.

Read more