Storybook: @ storybook / html 5.0.1无法在故事加载时运行脚本，aka'DOMContentLoaded'不再有用

创建于 2019-03-15 · 6评论 · 资料来源: storybookjs/storybook

嗨伙计！所以，这是我的情况：我的某些组件需要javascript。我可以成功地在preview-head.html调用javascript文件，但是初始化它是一个问题。

在v5.0.1之前，我曾经有：

document.addEventListener("DOMContentLoaded", function(event) {
        /* The stuff I needed to initialise */
    }, false);

它起作用了，但是现在没有了。

我一直在寻找您的文档和Stackoverflow本身，但我找不到解决方案。感觉这应该是Storybook应该考虑的东西。

任何帮助，将不胜感激。

core has workaround question / support

资料来源

BennyZ28

最有用的评论

@ BennyZ28解决方案是什么？

解决方法太复杂了，为什么故事书不提供将故事添加到dom树后才调用的回调？

vipcxj 于 2020-04-04

👍17

所有6条评论

没关系，解决了

BennyZ28 于 2019-03-15

@ BennyZ28解决方案是什么？

shilman 于 2019-03-15

👍1

@shilman其实我还没有解决，我在屏幕前经过了几个小时才经历，但是我错了。

因此，任何帮助仍然感激不尽！

BennyZ28 于 2019-03-15

每当“页面”更改时， iframe的旧div#root元素都会被删除，并添加一个新元素。您可以使用此功能并将其与MutationObserver结合使用，以在每次页面更改时运行一个功能。

在preview-head.html ，您可以添加：

function runOnInit() {
  console.log('Init')
}
function runOnPageChange() {
  console.log('Page has changed!')
}
document.addEventListener('DOMContentLoaded', function() {
  runOnInit();
  const callback = function(mutationsList) {
    for (let i = 0, len = mutationsList.length; i < len; i++) {
      if (mutationsList[i].type == 'childList') {
        runOnPageChange();
        break;
      }
    }
  };

  const observer = new MutationObserver(callback);
  const config = { childList: true, subtree: false };
  observer.observe(document.getElementById('root'), config);
}, false);

要了解MutationObserver工作原理，请参阅MDN文档。

d4nyll 于 2019-03-18

👍10 ❤5 🚀2

🙏

BennyZ28 于 2019-03-18

@ BennyZ28解决方案是什么？

解决方法太复杂了，为什么故事书不提供将故事添加到dom树后才调用的回调？

vipcxj 于 2020-04-04

👍17

此页面是否有帮助？

0 / 5 - 0 等级

Storybook: @ storybook / html 5.0.1无法在故事加载时运行脚本，aka'DOMContentLoaded'不再有用

最有用的评论

所有6条评论

相关问题