响应式 TrustPilot 小部件

Question

我有一个来自truspilot 的小部件，它制作了一个我试图做出响应的 iframe。我已经在 SO 上搜索了几个小时来找到如何做到这一点，但似乎没有解决方案可以响应地调整我的高度和宽度。

JSFIDDLE

这是小部件

<div class="tp_-_box" data-tp-settings="domainId:3660907">
    <a href="http://www.trustpilot.com/review/www.longtiestore.com" rel="nofollow" hidden>Long Tie Store Reviews</a>
</div>
<script type="text/javascript">
    (function () { var a = "https:" == document.location.protocol ? "https://ssl.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = a + "/tpelements/tp_elements_all.js"; var c = document.getElementsByTagName("script")[0]; c.parentNode.insertBefore(b, c) })();
</script>

我的 iframe 宽度仅适用于：

iframe {width:100%}

但 iframe 中有一个元素需要设置为 100% 才能使布局正常工作。

.tp-box {width:100%;}

但我无法对父级 iframe 中的内容进行样式化。所以我尝试添加：

window.onload = function () {
    if (parent) {
        var oHead = document.getElementsByTagName("head")[0];
        var arrStyleSheets = parent.document.getElementsByTagName("style");
        for (var i = 0; i < arrStyleSheets.length; i++)
        oHead.appendChild(arrStyleSheets[i].cloneNode(true));
    }
}

但没有成功。

那么我该怎么做才能使宽度和高度流动？

Answer 1

请参阅Making an iframe responsive:: 特别是此评论：

iframe 本身（“盒子”）可以响应。但是 iframe 中的所有内容都是一个单独的页面，因此不在您的 CSS 或 JS 的域中。 – 达。 7 月 25 日 20:12

Answer 2

我最近遇到了类似的问题，特别是让宽度与父 div 匹配并做出响应。我不明白为什么 Trust Pilot 认为设置一些东西来使框架的高度动态而不是宽度是合适的，但无论如何。

首先，我有一些用于父 div 的 CSS，例如：

<style type="text/css">
div.trust-pilot{
    width: 100% !important;
    height: auto;
}
</style>

这实际上可能没有必要，但我还是把它放在那里。

这些是我使用的“信任箱”设置（请参阅http://trustpilot.github.io/developers/#trustbox）：

<div id="trust-pilot" class="trust-pilot">
    <div class="tp_-_box" data-tp-settings="domainId: xxxxxxx,
    bgColor: F5F5F5,
    showRatingText: False,
    showComplementaryText: False,
    showUserImage: False,
    showDate: False,
    width: -1,
    numOfReviews: 6,
    useDynamicHeight: False,
    height: 348 ">

</div>
<script type="text/javascript">
    (function () {
        var a = "https:" == document.location.protocol ? "https://ssl.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script");
        b.type = "text/javascript";
        b.async = true;
        b.src = a + "/tpelements/tp_elements_all.js";
        var c = document.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c) })();
</script>
</div>

用有效的东西替换 domainId（在这个问题的情况下，它是 3660907）。请注意，宽度：-1 参数可能已经为您工作，除非您希望页面具有响应性（如下所示）。

首先，为了使宽度与父 div 匹配，我使用了：

<script type="text/javascript">
jQuery( window ).load(function() {
    _width = jQuery('#trust-pilot').innerWidth();
    jQuery('#tpiframe-box0').attr('width',_width);
});
</script>

然后为了让盒子响应，我使用了：

<script type="text/javascript">
jQuery( window ).resize(function() {
    _width = jQuery('#trust-pilot').innerWidth();
    jQuery('#tpiframe-box0').attr('width',_width);
});
</script>

我希望这会有所帮助。肖恩。

Answer 3

解决此问题的最简单方法是确定有多少响应状态，例如： 如果您的响应式主题中有四个不同的宽度，那么您只需创建四个不同的 css 规则并包含显示标签（如果是主 css，则下面的示例）：

.trustpilot_a {display:block;}
.trustpilot_b {display:none;}
.trustpilot_c {display:none;}
.trustpilot_d {display:none;}

然后将您的“trustbox”代码包装在名为“trustpilot_a”的 div 中，并使用所需宽度的正确大小（以下是 210 像素所需宽度的示例）：

<div class="block trustpilot_a">
<div class="tp_-_box" data-tp-settings="domainId:[your number],
linkColor:59962B,
fontColor:4077BD,
bgColor:ECF1F3,
bgBarColor:4077BD,
borderColor:D3EAF8,
width:210,
fontBarColor:4077BD,
useDarkLogo:False,height:100">
<a href="[your trust pilot domain]" rel="nofollow">[your title]</a></div>
<script type="text/javascript">// <![CDATA[
    (function () { var a = "https:" == document.location.protocol ? "https://s.trustpilot.com" : "http://s.trustpilot.com", b = document.createElement("script"); b.type = "text/javascript"; b.async = true; b.src = a + "/tpelements/tp_elements_all.js"; var c = document.getElementsByTagName("script")[0]; c.parentNode.insertBefore(b, c) })();
// ]]></script>
</div>

然后重复四次，将类更改为“a（宽度：210）”、b（宽度：190）等。将它们全部粘贴到您的代码中，只需更改响应主题中的“显示”设置您需要的“宽度”。

快乐的日子