Отзывчивый виджет TrustPilot

0

У меня есть виджет из 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));
    }
}

но без успеха.

Итак, что я могу сделать, чтобы сделать ширину и высоту жидкости?

Теги:
iframe
responsive-design

3 ответа

2

Недавно у меня была аналогичная проблема, в частности, чтобы ширина соответствовала родительскому div и также отвечала. Я не мог понять, почему Trust Pilot счел нужным установить что-то, чтобы высота кадра была динамической, а не шириной, но в любом случае.

Во-первых, у меня был CSS для родительского div, например:

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

На самом деле это не обязательно, но я все равно добавил.

Это настройки "trustbox", которые я использовал (см. 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). Обратите внимание, что параметр width: -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>

Я надеюсь, что это помогает. Shaun.

Поделиться
0

Самый простой способ - определить, какое количество реагирующих состояний существует, например: если у вас есть четыре разных ширины в вашей отзывчивой теме, тогда вы просто создаете четыре разных правила CSS и включаете тег отображения (пример ниже, если для основного css):

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

Затем заверните код "trustbox" в div с именем "trustpilot_a" с нужным размером требуемой ширины (ниже пример 210px требуемой ширины):

<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) и т.д. И т.д. Вставьте их все в свой код и просто измените настройку "display" в своей отзывчивой теме для "ширины" "тебе это нужно.

Счастливые дни

Поделиться
0

См. Создание ответного iframe :: этот комментарий в частности:

Сам iframe ("ящик") может реагировать. Но все внутри iframe - это отдельная страница, а потому не в домене вашего CSS и JS. - DA. 25 июля в 20:12

Поделиться
  • 0
    Можно ли определить, когда iframe загрузился, а затем добавить CSS с Javascript? stackoverflow.com/questions/751435/...
  • 0
    У меня сложилось впечатление, что это вопрос на 1 миллион долларов. Можно подумать, что вы можете прочитать HTML-код из iFrame, а затем написать стили и форматирование поверх iFrame. До сих пор я никогда не мог осуществить это. Мне будет любопытно посмотреть, сможет ли кто-нибудь еще пролить свет на это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню