我的页面上有一个iFrame,显示样式为none。我有一个javascript函数来设置源,然后将显示设置为阻止。问题是iframe在加载内容之前显示出来,因此我得到一个闪烁效果。它先变白,然后显示内容。所以我需要设置源代码,并在完成加载源代码的所有内容后,只设置其显示样式。
CSS&的Javascript
.ShowMe{display:block;}
function(url)
{
document.getElementById('myIFrame').src = url;
document.getElementById('myIFrame').className = ShowMe;
}
答案 0 :(得分:3)
我建议您尝试以下方法:
<script type="javascript">
var iframe = document.createElement("myIFrame");
iframe.src = url;
if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera){
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){
//not sure if your code works but it is below for reference
document.getElementById('myIFrame').class = ShowMe;
//or this which will work
//document.getElementById("myIFrame").className = "ShowMe";
}
};
}
else
{
iframe.onload = function(){
//not sure if your code works but it is below for reference
document.getElementById('myIFrame').class = ShowMe;
//or this which will work
//document.getElementById("myIFrame").className = "ShowMe";
};
}
</script>
根据找到的代码here。
答案 1 :(得分:3)
这很简单:
<iframe onload="this.style.opacity=1;" style="opacity:0;border:none;
答案 2 :(得分:2)
您可以在iframe
:
window.onload = function () {
window.frameElement.className = 'ShowMe'; // 'ShowMe' or what ever you have in ShowMe variable.
}
由于您已使用[jquery]
标记了问题,因此我假设您已在$(document).ready()
内执行了代码。当DOM准备好时它会被触发,即它使用本机DOMContentLoaded
事件(如果可用)。当页面上的所有资源都准备就绪时,window.onload
被触发。