Storybook: Why are changes to iframe.html not coming through into the browser?

Created on 23 Mar 2018 · 2Comments · Source: storybookjs/storybook

I am updating storybook/iframe.html to contain <div id="toast-container" />:

<body>
      <div id="root"></div>
      <div id="toast-container"></div>
      <div id="error-display"></div>
      <script src="static/preview.9bf0e573445a1eeb36a0.bundle.js"></script>
</body>

but when I run Storybook start-storybook -s ./storybook/static/ -p 6006 and then view the source of the iframe, the <div id="toast-container" /> is not there.

Please specify which version of Storybook and optionally any affected addons that you're running

@storybook/react 3.2.3
@storybook/addon-something 3.2.4

core question / support

Source

joetidee

Most helpful comment

related to #3268

You shouldn't be modifying the iframe.html. If you require a modification to the code that renders inside the iframe, you should use the preview-head.html to inject it with document.createElement and then document.body.append or something. Or have your story inject it.

danielduan on 23 Mar 2018

👍3

All 2 comments

related to #3268

danielduan on 23 Mar 2018

👍3

Example script in preview-head.html to add your element to the root:

<script>
  function createModalRoot() {
    var modalRoot = document.createElement('div');
    modalRoot.id = 'modal-root';
    document.body.append(modalRoot);
  }
  document.addEventListener('DOMContentLoaded', createModalRoot, false);
</script>