如何制作嵌入代码以供他人在其网站上共享？

Question

上周我制作了一个工具，并且收到了很多关于嵌入代码的请求。 人们只想在他们的页面上放一个代码，以便我的工具显示在他们的网站/博客上。

我知道一些选择，但是我不确定iframe最快，最简单的方法是什么？ 嵌入？ 一个div和一个脚本来加载里面的页面？

我对响应性如此关注的原因是，我的工具有两个并排的div，每个div的宽度都是一半，然后当足够小时，它会降到另一个，而另一个则以全角。

做这个的最好方式是什么？ iFrame可以响应吗？ 完全支持嵌入吗？ div和脚本是否要求太多？

Answer 1

如果内容具有长宽比，我会选择iFrame。 此响应示例的宽高比为16：9。 调整padding-bottom的padding-bottom以更改高度：

<div style='position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;'>
    <iframe style="border:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://charts.datawrapper.de/bTcko/' style='border:0'></iframe>
</div>

如果没有宽高比，则可以使用一个脚本来控制容器的响应度，该脚本也可以是iFrame：

<iframe id="datawrapper-chart-bTcko" src="https://charts.datawrapper.de/bTcko/" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="100%" height="100"></iframe>

<script type="text/javascript">
    var aspectRatio = [4, 3],
        chart = document.getElementById('datawrapper-chart-bTcko');

    chart.style.height = chart.offsetWidth / aspectRatio[0] * aspectRatio[1] + 'px';
</script>

如果设置了正确的CORS标头（出于安全原因），您也可以使用脚本通过AJAX加载内容。

如果可能的话，我个人总是会选择第一个解决方案。 许多人不喜欢嵌入<script> 。