別のWebサイトを指すiframeを持つWebページがあります。これがページの残りのロードをブロックすることを望みません。非同期にロードする方法はありますか?
ブロックしないでください。メインページを最初に完全にロードする場合(たとえば、iframeコンテンツの前のメインページの画像)、<body onload="javascript:...">
JQueryを使用すると、これは機能します。
<script type="text/javascript">
$(window).load(function() {
var f = document.createElement('iframe');
f.src = url;
f.width = 1000;
f.height = 500;
$('body').append(f);
});
</script>
ここで、url
はURLです。
OnLoadが起動しないのは@Coxyが正しいと思います。少なくともいくつかのWebページのパフォーマンステストを実行しているときは、iframeがページが完全にロードされたと見なすのを待っているように思えました。したがって、この小さなjQueryスニペットを使用してiframeをロードします。
HTML:<iframe id="blabla"></iframe>
JS:
$(window).load(function() {
if ($('#blabla').length <= 0) { return; } // to avoid errors in case the element doesn't exist on the page / removed.
$('#blabla').attr('src','//example.com/page');
});
iframeは、ユーザーの手間をかけずに非同期でロードする必要があります。
私たちが抱えていた問題の1つは、iframeがすでに非同期でロードしている間に、iframeのロードが完了するまでメインページがOnLoadを起動しないことでした。
この問題を回避するには、メインページの下部にあるスクリプト要素で、閉じているbodyタグの外側でも、必要なメソッドを呼び出してOnLoadを「偽造」しました。
</body>
<script type='text/jscript' language='javascript'>
BodyOnready();
</script>
「onload」が発生してからiframeのsrcを設定するまで待つことができます。
<body onload="loadFrame">
次に、このようなもの:
function loadFrame(){
var myFrame = document.getElementById('myFrame');
myFrame.src = "myURL";
};
これが起こるべきではないことに同意しますが、Webページが完全にロードされるのを待ってから、iframeコンテンツをロードすることができます。 jQueryを使用すると、次のようなことができると思います。
<iframe name="theOtherPage"></iframe>
$(document).ready(function(){
(window.frames || document.frames)["theOtherPage"].window.location = "http://theotherpage.com/";
});