动态更改脚本标记的src [英] Dynamically change the src of a script tag

问题描述

我已经阅读了一些类似的问题，但他们并没有完全回答我的这个问题。

I've read some of the similar questions but they don't quite answer this query of mine.

我正在建立一个使用Viddler视频托管的网站。在他们的嵌入代码中你收到一个脚本标签，如下所示：

I am building a website that uses Viddler video hosting. In their embed code you recieve a script tag, like this:

<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，但我有兴趣动态改变的是播放列表。

I have x'd out my client's ID, but the bit I am interested in changing dynamically is the playlist.

Viddler建议只使用标签式容器来容纳所有视频播放列表，但如果我不喜欢在页面上进行大量编码，我会感到很不舒服不需要它。

Viddler suggested just using a tabbed container to house all of the video playlists, but I am not so comfortable with having that amount of coding on the page if I don't need it.

我的解决方法是以某种方式使用按钮来更改脚本源或只是播放列表= 变量。

My workaround is to somehow use buttons to change the script source or just the playlist= variable.

有没有人对如何实现这一点有任何想法？

Does anyone have any ideas on how this could be achieved?

推荐答案

使用jQuery，您可以按需加载和执行JavaScript 。在加载脚本之前，请将播放列表部分附加到脚本网址，如下所示：

With jQuery you can load and execute JavaScript on demand. Before loading the script, append the playlist part to the script url like this:

HTML

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

这篇关于动态更改脚本标记的src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！