Question

我有一个网站上有一些JS手风琴，他们没有打开，但他们在codepen上。我在chrome上查看了控制台，我没有收到任何错误消息。但是，当我在Firefox中查看控制台时，我收到以下错误消息7次：

不支持“text / html”的HTTP“Content-Type”。媒体资源http://xurbia.tk/alpha/homebeta.html的加载失败。 homebeta.html

所有候选资源都未能加载。媒体加载暂停。 homebeta.html

我不知道这里发生了什么，所以非常感谢任何帮助。

其中一支手风琴的相关代码如下：

<dt>
  <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
    <img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-left"/>
    Detox
    <img src="http://xurbia.tk/alpha/pictures/Play_button_next_stop_music_pause.png" height=40px class="pull-right"/></a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
  <img src="http://xurbia.tk/alpha/pictures/accordian%20pictures/Detox.PNG" width="100%" height="100%" />
  <audio controls>
    <source src="" type="audio/wav" width="100%">
      Your browser does not support the audio element.
  </audio>
</dd>

完整的代码可以在这里找到： http://xurbia.tk/alpha/Stackoverflow.txt

这是我开始制作手风琴的代码笔： http://codepen.io/shardros/pen/OyJqzj

以下是他们无法使用的网站： http://xurbia.tk/alpha/homebeta.html

Answer 1

在实际网站上，您的JavaScript是使用模块模式编写的...这很好。

此模式使用立即调用的函数表达式（https://en.wikipedia.org/wiki/Immediately-invoked_function_expression）。

这意味着只要声明了函数，就会调用它（并执行）。

因为您在页面的<head>部分中有此脚本，所以它在DOM加载之前（在您的实际页面加载之前）执行。

这意味着您的JavaScript会尝试添加事件侦听器并操纵尚不存在的元素！

要解决此问题，请将<script>标记从<head>移出，并将其作为在<body>标记内的最后一个元素。

这将影响在创建所有必要元素之后调用JavaScript 。

（您的示例适用于Codepen，因为它们在DOM加载后执行JavaScript）

Answer 2

您的问题是您的JS在页面加载之前正在执行。最好将<body>元素末尾的JS插入improve page load speed。

您也可以在页面加载后使用事件触发：

window.onload = function(){
    //Page has loaded
}

JS手风琴未开启

2 个答案: