动态更改脚本标记的src

Dynamically change the src of a script tag

本文关键字:src 脚本 动态      更新时间:2023-09-26

我看过一些类似的问题,但它们并没有完全回答我的这个问题。

我正在建立一个使用Viddler视频托管的网站。在它们的嵌入代码中,您会收到一个脚本标记,如下所示:

<script src="http://www.viddler.com/tools/vidget.js?widget_type=js_list&amp;widget_width=940&amp;source=playlist&amp;user=USERNAME&amp;playlist=XXXXXXXXXXXXXXXX&amp;style=grid&amp;show_player=true&amp;player_type=simple&amp;max=12&amp;videos_per_row=6&amp;v=2.0&amp;id=XXXXXXXXXX" type="text/javascript" charset="utf-8"></script>

我已经x出了我的客户端的ID,但我感兴趣的是动态更改播放列表。

Viddler建议使用一个标签容器来容纳所有的视频播放列表,但是如果我不需要的话,我不太喜欢在页面上有那么多的编码。

我的解决方法是以某种方式使用按钮来更改脚本源或仅使用playlist=变量。

有没有人对如何实现这一目标有任何想法?

使用jQuery,您可以按需加载和执行JavaScript。在加载脚本之前,像这样将播放列表部分附加到脚本url中:

<a href="playlisturl" class="playlist-link">Play list A</a>
<a href="playlisturl" class="playlist-link">Play list B</a>
<a href="playlisturl" class="playlist-link">Play list C</a>
jQuery

$(".playlist-link").click(function(e){
    e.preventDefault();
    var playlist = $(this).attr("href");
    var url = 'http://www.viddler.com/tools/vidget.js' +
                  '?widget_type=js_list' +
                  '&widget_width=940' +
                  '&source=playlist' +
                  '&user=USERNAME ' +
                  '&playlist='+ playlist +
                  '&style=grid'+
                  '&show_player=true'+
                  '&player_type=simple'+
                  '&max=12'+
                  '&videos_per_row=6'+
                  '&v=2.0'+
                  '&id=XXXXXXXXXX';
    $.getScript(url, function(data, textStatus){
        alert('This is executed after your script is loaded');
    });
});