在博客园的博客文章中自动播放插入的 asciinema

需求

我的文章中都是用 Markdown 写的，所以嵌入的 asciinema 只能通过 Embed image link 的方式，这就导致打开文章页面后只有一个 asciinema 的预览图，点击图片后会跳转到 asciinema 网页。我希望不需要跳转，而是直接可以在文章页面播放 asciinema。也就是希望可以 Embed the player，问题是文章页面中不能直接插入 js 代码

最终效果

解决方案

• 首先需要申请博客园的 js 权限
• 然后在「页脚 HTML 代码」中插入以下代码：

<script type="text/javascript">
// asciinema embedded player
(function() {
  function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  }

  function params(container, script) {
    function format(name) {
      var value = script.getAttribute('data-' + name);
      if (value) {
        return name + '=' + value;
      }
    }

    var options = ['size', 'speed', 'autoplay', 'loop', 'theme', 't', 'startAt', 'preload', 'cols', 'rows', 'i', 'idleTimeLimit'];

    return '?' + options.map(format).filter(Boolean).join('&');
  }

  function locationFromString(string) {
    var parser = document.createElement('a');
    parser.href = string;
    return parser;
  }

  function apiHostFromScript(script) {
    return "https://asciinema.org"
  }

  function insertPlayer(script) {
    // do not insert player if there's one already associated with this script
    if (script.dataset.player) {
      return;
    }

    var apiHost = apiHostFromScript(script);

    // var asciicastId = script.id.split('-')[1];
    var asciicastId = script.href.substring('https://asciinema.org/a/'.length);

    var container = document.createElement('div');
    container.id = "asciicast-container-" + asciicastId;
    container.className = 'asciicast';
    container.style.display = 'block';
    container.style.float = 'none';
    container.style.overflow = 'hidden';
    container.style.padding = 0;
    container.style.margin = '20px 0';

    insertAfter(script, container);
    // script.parentNode.removeChild(script);
    script.hidden = true;

    var iframe = document.createElement('iframe');
    iframe.src = apiHost + "/a/" + asciicastId + '/iframe' + params(container, script);
    iframe.id = "asciicast-iframe-" + asciicastId;
    iframe.name = "asciicast-iframe-" + asciicastId;
    iframe.scrolling = "no";
    iframe.setAttribute('allowFullScreen', 'true');
    iframe.style.overflow = "hidden";
    iframe.style.margin = 0;
    iframe.style.border = 0;
    iframe.style.display = "inline-block";
    iframe.style.width = "100%";
    iframe.style.float = "none";
    iframe.style.visibility = "hidden";
    iframe.onload = function() { this.style.visibility = 'visible' };

    container.appendChild(iframe);

    function receiveSize(e) {
      var name = e.data[0];
      var data = e.data[1];

      if (e.origin === apiHost && e.source === iframe.contentWindow && name === 'resize') {
        iframe.style.height = '' + data.height + 'px';
      }
    }

    window.addEventListener("message", receiveSize, false);

    script.dataset.player = container;
  }

  window.onload = e=>{
    // var scripts = document.querySelectorAll("script[id^='asciicast-']");
    var scripts = document.querySelectorAll("a[href^='https://asciinema.org/a/']");
  [].forEach.call(scripts, insertPlayer);
  }
  
})();
</script>

原理

页面加载完成后，自动插入 asciinema player，并隐藏原来的图片

EOF