Заменить <a>метки накогда тип файла совпадает - PullRequest
Новая
       0

Заменить <a>метки накогда тип файла совпадает

3 голосов
/ 24 декабря 2011

Я попытался создать скрипт greaseMonkey, который проверял бы страницу на наличие mp3-файлов, помеченных тегом <a>, и заменял их тегом <audio> из html5. Но мне трудно понять, как это сделать. Может кто-то указать, где я ошибся здесь? Спасибо. 

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

Ответы [ 3 ]

1 голос
/ 24 декабря 2011

Самый простой способ без использования какой-либо инфраструктуры и замусоривающего глобального контекста.

Примечание - если вы сделаете итерацию по якорям от последней к первой, тогда вы сможете вставлять перед каждымиз них элемент и удаляем в одном цикле.

 ( 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' ) );
0 голосов
/ 24 декабря 2011

Я могу предложить следующее, хотя, кажется, можно сделать его более кратким: 

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 ...) «увидеть», что они там ...

0 голосов
/ 24 декабря 2011

Строка, которая выполняет замену, имеет findAtags[0] вместо findAtags[i].

Кроме того, что вы делаете с document.write там?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...