javascript - 解码 Base64 URL 并嵌入 HTML

Question

我想要像这样http://www.jredtna.com/read/?hash=cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=

(您看不到 iframe，因为网站使用 cookie 来检查您是否来自其他网站)。

所以请加入这里http://halqat.online/video/watch.php?vid=6f673f4c5然后单击红色播放按钮看看我的意思。

当通过base64解码hash=时:

cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=

会给我们这样的:

player 1 => https://www.youtube.com/embed/fh0QD-WWrcc

player 2 => https://www.youtube.com/embed/2MpUj-Aua48

我的问题是我该怎么做:

获取hash=Base64URL

对其进行解码并按 => 拆分“玩家 1”和“youtube url”

像这样将数据放入html中

<div class="embeding">
  <ul>
      <li><a data-src="https://www.youtube.com/embed/fh0QD-WWrcc">player 1</a></li>
      <li><a data-src="https://www.youtube.com/embed/2MpUj-Aua48">player 2</a></li>
  </ul>
</div>

如果找到其他玩家，则自动添加li a

Answer 1

我使用 splice 方法创建一个数组，然后通过 split 方法从该数组中获取 youtube url 的字符串。

function decodeBase_64(arg){ 
  var decodedData=window.atob(arg);
  var a;
  var c=[];  
  for(var i=0;i<decodedData.split('=>').length;i++){
    if(decodedData.split('=>')[i].length>10){      
      a=decodedData.split('=>')[i];
      a=a.substr(0, 42);
      c.push(a);
    }
  }
   return c; 
}
document.getElementById('player_1').setAttribute('data-src',decodeBase_64('cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=')[0] );
document.getElementById('player_2').setAttribute('data-src',decodeBase_64('cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=')[1] );

console.log(decodeBase_64('cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg='));
console.log(decodeBase_64('cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=')[0]);
console.log(decodeBase_64('cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=')[1]);

<div class="embeding">
  <ul>
      <li><a data-src="" id="player_1">player 1</a></li>
      <li><a data-src="" id="player_2">player 2</a></li>
  </ul>
</div>

检查控制台以查看 c 数组

对于第二期..通过window.location.href获取她，然后

var str='http://www.jredtna.com/read/?hash=cGxheWVyIDEgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvZmgwUUQtV1dyY2MKcGxheWVyIDIgPT4gaHR0cHM6Ly93d3cueW91dHViZS5jb20vZW1iZWQvMk1wVWotQXVhNDg=';
str=str.substring(str.indexOf("hash="));
str=str.replace('hash=','');
console.log(str);