我有一个页面,其中包含iframe使用Javascript加载的页面:
的index.html
<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>
<script type="text/javascript">
function someFunction() {
var myFrame = document.getElementById('myFrame');
var loader = document.getElementById('loader');
loader.style.display = 'block';
myFrame.src = 'myFrame.html';
myFrame.onload = function() {
myFrame.style.display = 'block';
loader.style.display = 'none';
};
}
</script>
Run Code Online (Sandbox Code Playgroud)
加载的页面iframe包含一些Javascript逻辑,用于计算某些元素的大小,以便添加JS驱动的滚动条(jScrollPane + jQuery Dimensions).
myFrame.html
<div id="scrollingElement" style="overflow: auto;">
<div id="several"></div>
<div id="child"></div>
<div id="elements"></div>
</div>
<script type="text/javascript">
$(document).load(function() {
$('#scrollingElement').jScrollPane();
});
</script>
Run Code Online (Sandbox Code Playgroud)
这适用于Chrome(可能还有其他Webkit浏览器),但在Firefox和IE中失败,因为在jScrollPane调用时,所有元素仍然是隐形的,jQuery Dimensions无法确定任何元素的维度.
有没有办法确保在被叫 …