加載時iFrame黑框？

我有一個頁面中的iFrame。當頁面加載時，iFrame顯示爲黑色框，直到它也被加載。這在視覺上分散注意力。如何防止頁面加載時顯示黑框？加載時iFrame黑框？

，iframe代碼+ CSS：

<iframe class="iframe-email-signup" frameborder="0" src="/src.html"></iframe> 

/* CSS for above Class */ 

.iframe-email-signup{ 
    max-height:7em; 
    background: none !important; 
}

是有問題的網站是：http://www.checkplusbalance.com/

這是電子郵件註冊框，下面是你在開幕現場看到的主要內容。

來源

2013-06-30 L84

在加載幀後，您可以設置'visibitily：hidden'並將其重置爲'visible' –

該黑色背景是由正在IFRAME中加載的頁面的CSS引起的。在IFRAME元素的外部頁面中設置背景樣式本身不會對您有所幫助。你能編輯內頁的CSS嗎？ –

@ŠimeVidas - 是的，我可以。內頁設置爲'background：none！important;' – L84

下面是我如何解決黑盒問題。我找不到CSS唯一的解決方案，所以我使用JS在iFrame加載後才顯示iFrame。

，iframe代碼

<iframe id="iFrameID" frameborder="0" src="src.html"></iframe>

CSS

#iFrameID{ 
    display:none; 
}

$(function() { 
    $("#iFrameID").on('load', function() { 
     $("#iFrameID").fadeIn("fast"); 
    }); 
});

注：

如果用戶已禁用JS的IFRAME將不會顯示。在我的情況下，如果沒有啓用JS，iFrame的內容將不起作用，所以我對此感到滿意。

還有其他的解決方法來隱藏使用JS的iFrame，所以如果用戶沒有JS，他們仍然可以看到iFrame。您也可以在<noscript>標籤中包含重複的iFrame。我選擇了適合我情況的最佳方法。

來源

2013-07-06 02:22:18 L84

加載時iFrame黑框？

回答

相關問題