Question

我尝试创建一个greaseMonkey脚本，用于检查页面是否标有<a>标记的mp3，并将其替换为html5中的<audio>标记。但我很难理解如何做到这一点。有人能指出我在这里出错的地方吗？感谢。

<html><body>
<!-- tags, might ir might not have ids -->
<a id="myid" href="mp3/basic.phrases.1.mp3">Some mp3 file1.mp3</a><br />
<a href="mp3/basic.phrases.2.mp3">Some mp3 file2.mp3</a><br />

<script language="JavaScript">
var findAtags = document.getElementsByTagName('a');

for( var i = 0; i < findAtags.length; i++) {
var audioTag = document.createElement("audio");
var ext = findAtags[i].getAttribute("href").split('.').pop();

if(ext == "mp3") {
    document.write(findAtags[i] + '[' + i + '] == ' + ext + '<br>' );
    document.body.replaceChild(audioTag, findAtags[0]);
    // I would need to replace the <a href="..." ></a> with '<audio> <source src="' + findAtags[i] + '" type="audio/mp3" /> </audio>';
};
}
</script>

</body></html>

Answer 1

最简单的方法，既没有使用任何框架，也没有乱丢全球范围。

注意 - 如果您将从最后一个到第一个锚点进行迭代，那么您将能够在每个锚点之前插入一个元素并在同一个循环中删除。

 ( function( a ) {   
     for( var i = a.length; i--; ) {
        var  e  = a[i],
             audio = document.createElement( 'audio' ),
             p = e.parentNode;   

        audio.src = e.href;   
        p.insertBefore( audio, e );
        p.removeChild( e );
     }

    } ) ( document.getElementsByTagName( 'a' ) );

Answer 2

执行替换的行包含findAtags[0]而不是findAtags[i]。

另外，你在那里用document.write做什么？

Answer 3

我可以提供以下内容，但似乎应该可以使其更简洁：

var body = document.getElementsByTagName('body')[0];
var as = body.getElementsByTagName('a');

for (var i=0,len=as.length; i<len; i++){
    var source = as[i].href;
    var audioElem = document.createElement('audio');
    audioElem.src = source;

    body.insertBefore(audioElem,as[i].nextSibling);    
}

for (var r=as.length - 1; r>=0; r--){
    body.removeChild(as[r]);
}

JS Fiddle demo

请记住，audio元素基本上是“不可见的”，因此当链接被audio元素替换时，您必须查看DOM（通过Web Inspector，Firebug，Dragonfly） ......）“看到”他们在那里......

替换<a> tags with <audio tags=""> when file type is matched</audio></a>

3 个答案: