如何在页面加载时动态更改 href 内容答案

【问题标题】：How To Change href content dynamically on page load如何在页面加载时动态更改 href 内容
【发布时间】：2018-06-25 07:40:25
【问题描述】：

我想在网络浏览器上播放 mp4 视频。为此，我正在使用流播放器，并且我想在页面加载时动态更改 href 内容。我使用了下面的代码。

<html><head>
<title>Wow! This is video</title>

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        //var Filename = document.getElementById("<%=hdnFileName.ClientID%>").value;
        var Filename = "http://www.yahoo.com";

        $("a.mylink").attr("href", Filename);
    });
</script></head><body>


<!-- <a href="Video/Test.mp4" style="width: 500px; height: 400px;" id="A"></a>-->
<a href="Video/Test.mp4" style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>
<script language="JavaScript" type="text/javascript">
    flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script></body></html>

在这里，我将在外部传递锚标记值，并且我想将其设置为锚标记。但是上面的代码是不工作的。你能帮忙吗？

【问题讨论】：

$("#Test1").attr("href", Filename); 您没有将mylink 指定为CSS 类，因此它不起作用并且在设置href 后也移动flowplayer(.....)
它没有类mylink
你链接的类是Test1，而不是mylink ...所以它应该是$("a.Test1").attr("href", Filename);
@Satpal 感谢您的回复。我刚刚将我的 CSS 类更改为 mylink 并进行了检查，但仍然无法正常工作。
在设置 href 后也移动 flowplayer(.....)

标签： javascript jquery jquery-plugins flowplayer

【解决方案1】：

我知道有两种方法可以实现你想要的

第一个：不要将href设置为HTML中的任何内容，然后使用js进行设置

HTML 代码：

<a style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>

JS 代码：

document.getElementById("Test1").setAttribute("href", Filename);

第二个：创建一个新的a标签并用它替换a标签

JS 代码：

var Filename = "http://www.yahoo.com";
var aTag = document.createElement("a");
aTag.style.width = "500px";
aTag.style.height = "400px";
aTag.style.display = "block";
aTag.classList.add("Test1");
aTag.setAttribute("href", Filename);
aTag.id = "Test1";
document.getElementById("Test1").replaceWith(aTag)

【讨论】：

【解决方案2】：

工作代码：

<html>
<head>
<title>Wow! This is video</title>

<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head><body>


<!-- <a href="Video/Test.mp4" style="width: 500px; height: 400px;" id="A"></a>-->
<a href="Test.mp4" style="width: 500px; height: 400px; margin: 10px; display: block" class="Test1" id="Test1"></a>
<script language="JavaScript" type="text/javascript">
  file = "http://techslides.com/demos/sample-videos/small.mp4";//any sample file you want
  $("a").attr("href",file);
  flowplayer("Test1", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf"); 
</script></body></html>

您可能想知道为什么这有效，而不是您的。所以这就是原因。

你正在做的两个大错误：

我的链接？它无处可去。如果你使用更好 $("#Test1") 要么 $(".Test1")
当文档准备就绪时，您正在加载脚本。这意味着如果您调试代码或查看页面源代码，您会发现您的 href 已更新，但它只播放旧视频。要更正它，您需要在没有准备好功能的情况下设置属性。还是不行，因为如果你把它写在顶部，它会被实际的 href 属性覆盖。
Yahoo.com 不是 mp4 视频。您提供的属性确保是视频。

【讨论】：