javascript - 如何制作嵌入代码供其他人在他们的网站上分享？

Question

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

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

我如此关心响应能力的原因是因为我的工具有两个并排的 div，每个 div 都占一半宽度，然后当足够小时，它会下降到另一个上面的一个，每个 div 都占全宽度。

执行此操作的最佳方法是什么？ iFrame 可以响应吗？ 是否完全支持嵌入？ div 和脚本的要求是否过高？

Answer 1

如果内容具有宽高比之类的内容，我会选择 iFrame。此响应式示例的纵横比为 16:9。调整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 header (安全原因)，您还可以使用脚本通过 AJAX 加载内容。

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