Javascript 在MVC5中，如何打开新窗口并传递参数？_Javascript_Html_Asp.net Mvc 5_Html5 Audio

Javascript 在MVC5中，如何打开新窗口并传递参数？

javascript html asp.net-mvc-5

Javascript 在MVC5中，如何打开新窗口并传递参数？,javascript,html,asp.net-mvc-5,html5-audio,Javascript,Html,Asp.net Mvc 5,Html5 Audio,我想在新窗口中打开一个音频控件，并从MVC5视图将文件名传递给音频控件我能够在MVC5视图中使用以下代码打开一个简单的html页面： <a href="Music/Music.html" onclick="window.open('Music/Music.html', 'newwindow', 'width=600,height=200'); return

我想在新窗口中打开一个音频控件，并从MVC5视图将文件名传递给音频控件

我能够在MVC5视图中使用以下代码打开一个简单的html页面：

<a href="Music/Music.html"
   onclick="window.open('Music/Music.html',
                         'newwindow',
                         'width=600,height=200');
              return false;">html Link</a>

这是目标Music.html页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
  <audio controls>
    <source src="" id="audio" type="audio/mp3"> audio playback requires IE9 or above
  </audio>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById('audio').src = window.location.search.substr(1)
    });
  </script>
</body>

</html>


音频播放需要IE9或更高版本
document.addEventListener（“DOMContentLoaded”，function（））{
document.getElementById（'audio'）.src=window.location.search.substr（1）
});

对于

html链接a

和

html链接b

，目标Music.html页面将加载并播放003.mp3。但是

html链接a

将打开一个新窗口，而

html链接b

将替换现有窗口

我肯定我犯了一个基本的错误，但是为什么我不能将inline window.open javascript移动到一个函数中，这样页面上可能存在的其他元素就可以调用它呢

<a href="Music/Music.html" onclick="openWindow">html Link</a>

向源HTML添加一个id

<source src="001.mp3" id="audio" type="audio/mp3">

你能用Javascript而不是HTML来分配点击处理程序（最好避免内联JS），然后生成包含文件名的查询的窗口URL吗？听起来不错，但我在这方面还是个新手。我相信我在Javascript中获得了click处理程序并添加了查询参数，之前已经这样做了；我只是在尝试建立基本流程时没有考虑到这一点。我不太清楚html页面是如何接收Javascript发送的文件名并将其发送到音频控件的。您可以从url获取查询参数，然后将源元素的src设置为查询参数。如果您有任何问题，我想我的答案会给出know@alan我的回答有帮助吗？@JoeWarner我道歉。我在你发帖后一个小时内阅读了你提出的答案，我想我应该发表评论，让你知道我很兴奋，因为你的答案对我很有帮助，我想我现在明白了这应该是怎么回事，但我需要一天左右的时间来完成它。虽然我没有看到太多这样的评论，但我应该听听我的想法&让你知道。是的，你的帖子看起来很棒。给我几天时间确认一下。我总是等到我的答案成功后才将其标记为答案，以防有其他细节需要添加。你的帖子帮助我接近解决方案，但我仍然有一些问题。第一条注释：除非我使用

function（）

代替

（event）=>

，否则上面的最后一个脚本不会运行。我假设这是一个

VB与C#的问题&假设是这样，你不可能知道我使用VB。但是这个脚本成功地拉入了URL参数，基本上让我达到了目的。谢谢第二条评论：当onclick函数openWindow运行时，它不会打开一个新窗口，而是替换我当前的选项卡。即使我将以前的内联工作脚本作为函数移动到@Section Scripts区域，内联使用时打开新窗口的javascript也无法作为函数打开新窗口。我可能做错了什么？我在上面发布了。您是否将_blank添加为第一个参数，是的，如果您没有使用最新版本的Javascript，您应该使用函数而不是（）=>如果您想尝试，我已经更改了openWindow函数。我在您的更新中看到的唯一区别是添加了openWindow函数。focus（）。我添加了它，它仍然会覆盖现有页面。我一定是做错了什么。你看到我在原来的帖子中添加了测试代码的当前状态了吗？根据您的URL参数读取建议，目标

.html

页面工作正常。我唯一的问题实际上是摆脱了内联javascript，它看起来很愚蠢，但你已经做到了。我读过的每一篇javascript教程都说这应该是可行的。不过谢谢你的帮助。

<a href="Music/Music.html" onclick="openWindow">html Link</a>

function openWindow() {
  window.open("/Music/Music.html?filenameyouwant", "_blank",
    "width=600, height=200"
  ).focus();
}

<source src="001.mp3" id="audio" type="audio/mp3">

document.addEventListener("DOMContentLoaded", (event) => {
  document.getElementById('audio').src = window.location.search.substr(1)
});