Question

您好我正在使用iframeSizer动态加载iframe。在父页面上，我正在实现此代码，以使用css加载旋转预加载器映像：

<script type="text/javascript" src="//example.com/iframeResizer.min.js"></script> 

<style>

iframe{width:100%} 
.holds-the-iframe { 
    background:url(//example.com/preloader.gif) center center no-repeat;  
         }
</style> 

<div class="holds-the-iframe">
<iframe src="http://example.com/iframed-content-url" scrolling="no" frameborder="0"></iframe>
</div> 

<script>iFrameResize()</script>

问题是如果iframe内容上有透明背景，则微调器会显示。 iFrameResizer有一个bodyBackground选项，但它会改变整个主体，而不仅仅是iframe内部的内容。

有关如何改善这一点的任何想法？在最初加载iframe之后，有没有办法用CSS或JS来完全删除微调器节点？谢谢！

Answer 1

该插件允许您使用选项，
其中一个是bodyBackground，并接受String值。

所以你可以尝试一下：

iFrameResize({
    bodyBackground : "rgba(0,0,0,1) url(preloader.gif) 50% no-repeat"
});

Answer 2

感谢您的反馈。我的简单解决方案是将微调器作为背景放在实际的iframe css中，而不是放在包装器中。然后内容会在加载时覆盖它。

将加载微调器添加到iframeSizer

2 个答案: