iframe - iframe 透明背景

Question

我的应用程序有一个模态对话框，里面有一个 iframe。我编写了我的 jQuery 代码，这样当对话框打开时，它会设置 iframe 的适当“src”属性，以便加载内容。但是，在对话框打开和内容加载之间的延迟期间，iframe 明显显示为一个白框。我希望 iframe 具有透明背景。

我尝试在 iframe 上设置 allowtransparency="yes" 。有任何想法吗？谢谢！

Answer 1

我用这个通过Javascript创建了一个IFrame，它对我有用：

// IFrame points to the IFrame element, obviously
IFrame.src = 'about: blank';
IFrame.style.backgroundColor = "transparent";
IFrame.frameBorder = "0";
IFrame.allowTransparency="true";

不确定它是否有任何区别，但我在将 IFrame 添加到 DOM 之前设置了这些属性。将其添加到 DOM 后，我将其 src 设置为真实 URL。

Answer 2

<style type="text/css">
body {background:none transparent;
}
</style>

这可能会起作用（如果你放入 iframe）

<iframe src="stuff.htm" allowtransparency="true">

Answer 3

将源页面的背景颜色设置为none并允许iframe元素透明。

源页面（例如，source.html）：

<style type="text/css">
    body
    {
        background:none transparent;
    }
</style>

带有 iframe 的页面：

<iframe src="source.html" allowtransparency="true">Error, iFrame failed to load.</iframe>

Answer 4

为什么不直接将框架加载到屏幕外或隐藏，然后在完成加载后显示它。您可以在其开始的位置显示一个加载图标，以便立即向用户提供它正在加载的反馈。

Answer 5

您需要使 iframe 的主体透明。这个对我有用：

const iframe = document.createElement( 'iframe' );

iframe.onload = function() {
    const doc = iframe.contentWindow.document,
        head = doc.querySelector( 'head' ),
        style = doc.createElement( 'style' );

        style.setAttribute( 'type', 'text/css' );
        style.innerHTML = 'body { background: transparent!important; }';

        head.appendChild( style );
}