Question

<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript">

yam.connect.embedFeed({
  "config": {
    "use_sso": false,
    "header": false,
    "footer": false,
    "showOpenGraphPreview": false,
    "defaultToCanonical": false,
    "hideNetworkName": false,
    "defaultGroupId": 8430003
  },
  "container": "#embedded-feed"
});

</script>

如何在其中插入CSS以更改嵌入式yammer的背景颜色？

<style>
#embedded-feed { background-color: orange; }
</style>

如果我使用上面的CSS将其变为橙色，并立即反转。

Answer 1

嵌入的内容位于具有白色背景的iframe内。我担心你无法改变它。

您可以通过在容器（::after）顶部使用伪元素（#embedded-feed）以一种hacky方式对其进行操作，该元素具有背景和混合模式：

#embedded-feed {
  position: relative;
}

#embedded-feed::after {
  content:'';
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background: orange;
  pointer-events: none;
  mix-blend-mode: multiply;
}

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
    yam.connect.embedFeed({
        container: '#embedded-feed',
        network: 'fourleaf.com',
        feedType: 'group',                // can be 'group', 'topic', or 'user'    
        feedId: '123',                     // feed ID from the instructions above
        config: {
             defaultGroupId: 3257958      // specify default group id to post to 
        }
    });    
</script>

jsFiddle：https://jsfiddle.net/azizn/40faxryw/

请注意，这是实验性，目前浏览器支持有限（FF32，Chrome 41 +，Safari 8 +，Opera，No IE）。

您可以使用不同的选项，颜色和/或不透明度：

想不出另一个不涉及CORS的解决方案。

将CSS添加到嵌入式Yammer

1 个答案: