You need to enable JavaScript to run this app.
导航
H5详情分享页
最近更新时间:2023.11.10 15:58:15首次发布时间:2023.11.10 15:58:15
概述

火山引擎提供用于分享的H5详情页链接,客户侧用户可以在客户端内容场景中,点击分享按钮,将内容分享到如:微信好友,朋友圈等应用端外场景。

产品体验
文章类型图文详情页横版短视频竖版小视频

示例效果

接入步骤
  1. 获取个性化内容接口会返回share_url字段,即火山引擎内容H5分享页面链接,以及其它相关信息。

    参数类型描述说明

    title

    String

    内容标题

    abstractString内容简介
    share_urlString分享页H5页面
    cover_image_listString[]封面图,部分内容没有封面图,建议客户添加兜底图,避免引起展示空图片问题
  2. 开发H5页面壳子,部署到客户域名下,然后再壳子中使用iframe加载H5详情页正文部分。

  3. 自定义的业务模块,如示例中的顶部栏。客户自主实现顶部UI,导流浮层,二次分享等。

  4. 客户域名链接格式示例:`https://客户域名?shareUrl=${encodeURIComponent(share_url)}`。

  • 分享后打开此链接时,客户域名H5壳子中处理decodeURIComponent(),将decode后的share_url填入到iframe中;

说明

通过iframe加载火山引擎H5时,如果拼接自定义模块,需要知道火山引擎H5页面的高度,从而更好的设置iframe高度,容纳下所有内容。因此,火山引擎H5会在页面加载完毕高度变更时,向客户H5壳子以postMessage的方式同步内容高度,客户H5可以持续监听该事件调整高度。

// 客户H5在初始化时添加事件监听,接收火山引擎H5高度信息
window.addEventListener('message', function(event){
    try{
        // 可以看到这里data的格式是一个json字符串:{ contentHeight: xxx}
        var data = JSON.parse(event.data || '{}') || {};
        var contentHeight = data.contentHeight;
        document.getElementById('iframeId').style.height = contentHeight + 'px'
    } catch(err){
        console.log(err)
    }
}, false);
合规要求
模块合规内容示例
UI合规基于UI合规要求,包含自定义元素需在客户H5壳子中实现,并在客户域名下访问--
正文内容正文H5需要在火山引擎域名下--
实例代码

如果需要完整展示火山引擎H5详情页,可以将iframe样式设置为:

/* iframe可滚动,并充满整个页面*/
#iframeId{
    width: 100%;
    height: 100vh;
}
/* 导流浮层 */
#fixedUgBanner{
    position: fixed;
}
fe_share_demo.zip
5.01KB