Как динамически изменять href-контент при загрузке страницы - PullRequest
Новая
       35

Как динамически изменять href-контент при загрузке страницы

0 голосов
/ 25 июня 2018

Я хочу запустить 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>

Здесь я передам значение тега привязки извне и хочу установить его в тег привязки.Но приведенный выше код не работает.Можете ли вы помочь?

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Рабочий код: 

<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>

Просто вам может быть интересно, почему это работает, а не ваше. Так вот причина.

Две большие ошибки, которые вы делаете:

  1. MyLink? его нигде. лучше, если вы используете $ ( "# Test1") или же $ (». Test1" )

  2. Вы загружаете скрипт, когда документ готов. Это означает, что если вы отлаживаете свой код или просматриваете исходный код страницы, вы обнаружите, что ваш href обновлен, но он воспроизводит только старое видео. Чтобы исправить это, вам нужно установить атрибут без функции готовности. Тем не менее, это не работает, потому что если вы напишите это сверху, оно будет перезаписано фактическим атрибутом href.

  3. Yahoo.com не является mp4-видео. Атрибут, который вы указываете, является видео.

0 голосов
/ 25 июня 2018

Есть два способа достижения желаемого

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);

2-й: Создайте новый тег и замените тег этим

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)
...