Question

我想在以“https://w.soundcloud.com/player/?url=”开头的每个链接中将"visual=true"替换为"visual=false"。可能吗？我想在我的博客中强制嵌入的soundcloud播放器改变样式（例如：http://jsfiddle.net/gREY2/）。

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/84808541&amp;auto_play=false&amp;hide_related=false&amp;visual=true"></iframe>

有没有办法只用jquery做到这一点？

Answer 1

您可以使用txt.replace('search', 'replace')执行字符串替换，使用txt.indexOf('search')查找字符串是否包含您要搜索的模式。

此代码适用于您：

$("iframe").each(function() {
    var src = $(this).attr('src');
    if(src.indexOf('https://w.soundcloud.com/player/?url=') != -1 && src.indexOf('visual=true') != -1) {
        $(this).attr('src', src.replace('visual=true', 'visual=false'));
    }
});

因为分配新的src实际上会重新加载iframe，因此创建了另一个HTTP请求我已经添加了额外的检查，是否应该使用&& src.indexOf('visual=true') != -1执行此操作。所以它现在只在需要时替换src，而不会触及其他iframes。

Answer 2

以下是纯JS中的做法：

var elements = document.getElementsByTagName('iframe');

for (var i = 0; i < elements.length; i++) {
    if(elements[i].src.indexOf('https://w.soundcloud.com/player/?url=') != -1 && elements[i].src.indexOf('visual=true') != -1) {
        elements[i].src = elements[i].src.replace("visual=true","visual=false");
        elements[i].contentWindow.location.reload();
    }
}

小心elements[i].contentWindow.location.reload();这可能不适用于所有浏览器。您还希望仅在DOM加载后运行它。

Answer 3

以下jQuery选择器可用于查找以指定src开头的所有iframe：

$('iframe[src^=https\\3A \\/\\/w\\.soundcloud\\.com\\/player\\/\\?url\\=')

最好只是查看iframe的src属性是否包含＆＃39; soundcloud＆＃39;，特别是如果您不希望其他iframe包含它：

$('iframe[src*=soundcloud')

然后你可以根据lokers的答案替换字符串替换属性

$('iframe[src*=soundcloud').each(function() {
    var src = $(this).attr('src');
    $(this).attr('src', src.replace('visual=true', 'visual=false'));
});

请注意，当DOM最初加载时，iframe将发送具有visual = true的播放器的请求。然后，您将使用新网址重新加载它，并且您可能会看到两个不同版本的播放器之间的闪烁。我假设您无法更改HTML中的网址...但如果您这样做会更好。

用jquery |替换url的一部分Soundcloud播放器

3 个答案: