使用 javascript 通过 iframe 播放音频

Question

我在abc.jsp中有以下代码

 <% 
 out.write("<script type=\"text/javascript\" src=\"scripts/test.js\"></script>");
 out.write("Here is filename"+sfl);
 out.write(""
        + "<input type=\"button\" id=\"playBt\" value=\"Play Now\" onClick=\"playSound()\" >"
        + "<audio id=\"sound\" preload=\"auto\">"
        + "<source src=\"music.ogg\" type=\"audio/ogg\" />"
        + "<source src=\"music.mp3\" type=\"audio/mpeg\" />"
        + "Your browser does not support the audio element."
        + "</audio>"
      );
out.write("");
%>

然后上面的内容被引入到index.jsp的一个框架中

 <iframe id='bgframe' style='display:compact;' src='abc.jsp' width="400" height="200"></iframe>

现在使用这个 JavaScript 函数 - test.js

function playSound() {  
  var frameRef = document.getElementById('bgframe');
  var sound = frameRef.contentWindow.document.getElementById'sound');
  //var sound = frameRef.contentDocument.document.getElementById('sound');
  sound.play();
}

问题是，当我点击播放按钮时，声音没有播放。 在 JavaScript 控制台上，系统返回 null 作为值 frameRef。 此外，根据我使用的是contentDocument 还是contentWindow，我会收到以下错误。

Uncaught TypeError: Cannot read property 'contentDocument'
Uncaught TypeError: Cannot read property 'contentWindow'

我已经实现了不同的解决方案，但未捕获的 typedef 错误仍然存​​在。

请问我在这里做错了什么，我该如何解决？为什么我无法访问框架id=bgframe 上的元素？

Answer 1

您将test.js 包含在abc.jsp 中，not 包含在index.jsp 中，因此您无需引用 iframe，因为脚本已经在其中运行。 你只需要在playSound()函数中做一些改动：

function playSound() {  
  var sound = document.getElementById('sound');
  //do your stuff here
  //line below should make your script alert 'auto' in your case
  alert(sound.preload); 
}