我有一个来自truspilot的小部件,它创建了一个iframe,我正在努力做出响应。我在SO上搜索了几个小时以找到如何做到这一点,但似乎没有任何解决方案可以用来调整我的高度和宽度。
这是小部件
<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中设置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));
}
}
但没有成功。
那么我该怎样做才能使宽度和高度变得流畅?
答案 0 :(得分:2)
我最近遇到了类似的问题,特别是使宽度与父div相匹配并且也会响应。我无法理解为什么Trust Pilot认为设置某些东西以使框架的高度动态而不是宽度,但无论如何都是合适的。
首先,我为父div提供了一些CSS,例如:
<style type="text/css">
div.trust-pilot{
width: 100% !important;
height: auto;
}
</style>
这实际上可能没有必要,但无论如何我把它放在那里。
这些是&#39;信托框&#39;我使用的设置(见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>
我希望这会有所帮助。肖恩。
答案 1 :(得分:0)
请参阅Making an iframe responsive ::特别是此评论:
iframe本身(“盒子”)可以响应。但iframe中的所有内容都是一个单独的页面,因此不在CSS和JS的域中。 - DA。 7月25日20:12
答案 2 :(得分:0)
最简单的方法是确定有多少响应状态,例如: 如果您的响应主题中有四个不同的宽度,那么您只需创建四个不同的css规则并包含显示标记(如果主css,则显示如下):
.trustpilot_a {display:block;}
.trustpilot_b {display:none;}
.trustpilot_c {display:none;}
.trustpilot_d {display:none;}
然后将'trustbox'代码包装在名为'trustpilot_a'的div中,并使用所需宽度的正确大小(下面是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)等等。将它们全部粘贴到您的代码中,只需更改响应主题中的“显示”设置即可你需要的'宽度'。
快乐的日子