13
Tôi có một trang có chứa một iframe đó được nạp sử dụng Javascript:Javascript vấn đề với iframe đó là ẩn trước khi nạp
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>
Các trang đó được nạp trong iframe chứa một số logic Javascript tính toán kích thước của các phần tử nhất định cho mục đích thêm thanh cuộn 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>
này hoạt động trong Chrome (và các trình duyệt Webkit lẽ khác), nhưng thất bại trong Firefox và IE vì lúc jScrollPane được gọi, tất cả các yếu tố này vẫn invisble và jQuery Thứ nguyên không thể xác định thứ nguyên của bất kỳ phần tử nào.
Có cách nào để đảm bảo iframe của tôi hiển thị trước khi$(document).ready(...) được gọi? Ngoài việc sử dụng setTimeout để trì hoãn jScrollPane, điều mà tôi chắc chắn muốn tránh.
Tại sao không chỉ cần sử dụng javascript từ trang trực tiếp? –
@ChibuezeOpata điều này đã được hơn 5 năm trước vì vậy tôi không thể thực sự nhớ, nhưng tôi biết có một lý do chính đáng cho nó :-) – Aistina