如何为其他人制作嵌入代码以在他们的网站上共享?
How do I make an embed code for other to share on their website?
上周我做了一个工具,我收到了一堆要求嵌入代码的请求。人们只想将代码放到他们的页面上,这样我的工具就会显示在他们的 website/blog 上。
我知道有几个选项,但我不确定最快最简单的方法是什么,iframe?嵌入?一个 div 和一个加载页面的脚本?
我之所以如此关心响应能力,是因为我的工具有两个并排的 divs,每个占一半宽度,然后当足够小时,它会下降到一个在另一个上方,每个占全宽度.
最好的方法是什么?
iFrame 可以响应吗?
完全支持嵌入吗?
div 和脚本是不是要求太多了?
如果内容具有类似宽高比的内容,我会选择 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 headers(安全原因),您也可以使用脚本通过 AJAX 加载内容。
就我个人而言,如果可能的话,我总是会选择第一种解决方案。许多人不喜欢嵌入 <script>
.
的内容
上周我做了一个工具,我收到了一堆要求嵌入代码的请求。人们只想将代码放到他们的页面上,这样我的工具就会显示在他们的 website/blog 上。
我知道有几个选项,但我不确定最快最简单的方法是什么,iframe?嵌入?一个 div 和一个加载页面的脚本?
我之所以如此关心响应能力,是因为我的工具有两个并排的 divs,每个占一半宽度,然后当足够小时,它会下降到一个在另一个上方,每个占全宽度.
最好的方法是什么? iFrame 可以响应吗? 完全支持嵌入吗? div 和脚本是不是要求太多了?
如果内容具有类似宽高比的内容,我会选择 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 headers(安全原因),您也可以使用脚本通过 AJAX 加载内容。
就我个人而言,如果可能的话,我总是会选择第一种解决方案。许多人不喜欢嵌入 <script>
.