注：如果您想在您的网站添加一个类似的效果，出于公益性质，我可以无偿为您提供技术支持，愿天下的宝贝都能永伴自己父母身边

宝贝回家/腾讯公益

网友@姬长信 下午在博客留言让我帮忙推广下，访问后发现是公益项目，那这个就必须推广了~

原文地址：姬长信API增加宝贝回家|腾讯公益404核心数据

文章里写出了最简单的调用方法，在网站适当的地方插入代码：

<iframe src="https://api.isoyu.com/gy/" frameborder="0" scrolling="no" width="300" height="300"></iframe>

比如网站的侧边栏等地方

如下图，在WordPress里，你可以通过外观-小工具-自定义html来快速的插入这个项目

宝贝回家|腾讯公益

附上一张效果图

宝贝回家|腾讯公益

在他的api列表里还提供了更详细的调用方法：

公益数据——宝贝回家/腾讯公益404核心数据

但是因为我博客布局已经很紧凑（乱）了，所以我在首页和文章页就不再多加这个api，而是转向了404页面

所谓404，即当页面不存在时，网站抛出的一个状态码

在主题里一般可以找到404页面的模板，在适当的位置插入iframe标签

这里需要特别说明一下，因为我的主题是自适应的，而姬长信在给出调用示例的时候规定了iframe的宽度和高度，这就导致我插入他的代码后，有部分公益信息不显示，所以需要改动下

原iframe变更为：

<iframe src="https://api.isoyu.com/gy/" frameborder="0" scrolling="no" width="100%" onload="mu_changeHeight()" id="isoyu_gy"></iframe>

让其宽度适应父窗口

接着因为跨域的原因，不能取到高度，所以用onload来动态加载高度

附js部分

<script type="text/javascript">
function mu_changeHeight(){
var ifm= document.getElementById("isoyu_gy");
ifm.height=document.documentElement.clientHeight;
}
</script>

最终效果图：

宝贝回家|腾讯公益

 

软件无法下载/安装/其它电脑问题，加企鹅群：709531763

有问题直接群里问，在线的时候有问必答,私聊一般都不看

 

想学电脑知识可以关注我的公众号