html Webサイトにつけるウィジェットをiframeで作る基本的な手顺ref：http：//qiita.com/ikuwow/items/4343a252d1ff8b4e26a7

Posted 2021-05-11

widget += (function(){/*
 // ここに好き勝手書く
<style>
* {
    font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
// ...省略
*/}).toString().replace(/(\n)/g, '').split('/*')[1].split('*/')[0];

// こんな感じでゴリゴリ書く
var widget = '<div class="cbox">';
widget += '<div class="ctitle">';
widget += '<img src="https://avatars.githubusercontent.com/'+username+'?s=40"/>'+username+'\'s Contributions';
widget += '</div>';
widget += '<div class="cbody">';
widget += '<img src="http://ghchart.rshah.org/'+username+'" alt="'+username+'\'s Github chart" />';
widget += '<a href="https://github.com/'+username+'" target="_blank">See on GitHub</a>';
widget += '</div>';
widget += '</div>';

(function(){

'use strict';

// 目印のaタグからパラメータとってきたら消す
var atag = document.getElementsByClassName('gh-contributions');
var username = atag[0].dataset.ghUsername;
atag[0].style.display = 'none';

var iframe = document.createElement('iframe');
iframe.scrolling = 'no';
iframe.frameBorder = 0;
iframe.marginWidth = 0;
iframe.marginHeight = 0;
iframe.width = '100%';
iframe.height = '180px';
iframe.width = '100%';
iframe.height = '100%';
iframe.id = 'gh-contributions-widget';

// atagの隣にiframeを挿入
atag[0].parentNode.insertBefore(iframe,atag[0]);

// widgetの中身（ここに後で中身を書いていきます）
var widget = 'test';

// iframeにウィジェットの内容
var doc = iframe.contentWindow.document;
doc.open();
doc.write(widget);
doc.close();

})();

<a href="http://github.com/[:username]" class="gh-contributions" data-gh-username="[:username]" target="_blank">[:username]'s contributions</a>
<script src="http://ikuwow.github.io/yourcontributions/widget.min.js"></script>

<div class="cbox">
  <div class="ctitle">
    <img src="https://avatars.githubusercontent.com/ikuwow?s=40">ikuwow's Contributions
  </div>
  <div class="cbody">
    <img src="http://ghchart.rshah.org/ikuwow" alt="ikuwow's Github chart"><a href="https://github.com/ikuwow" target="_blank">See on GitHub</a>
  </div>
</div>

<style>
* {font: 13px / 1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
.cbox {max-width: 728px;border: 1px solid #d8d8d8;border-radius: 3px; background: #fff; overflow: hidden; }
.ctitle { background-color: #f5f5f5; border-bottom: 1px solid #d8d8d8; padding: 6px 10px 8px; font-size: 14px; line-height: 17px; font-weight: bold; }
.ctitle img { height: 20px; width: 20px; margin-top 2px; margin-right: 4px; }
.cbody { padding: 4px; overflow: hidden; }
.cbody img { float: right; margin-right: 4px; }
.cbody a { color: #4078c0; text-decoration: none; font-size: 11px; float: right; padding: 4px 10px 4px;}
</style>