web-dev-qa-db-ja.com

IEでiFrameの読み込みイベントが発生しない

loadイベントがIE for iFramesで発生しないのはなぜですか？

この例 をご覧ください。

FFとChromeで期待どおりに機能しますが、IEは失敗します。

jqueryinternet-exploreriframeload
24
Muleskinner

Internet Explorerのiframeでは、そのイベントハンドラー（onload）をプログラムで設定することはできません。マークアップで指定する必要があります。

何かのようなもの：

<iframe id="myFrame" onload="myFunction();"></iframe>

そうでない場合、IEは関数を無視します。

27
Seis

ハンドラーを追加する前に、IEがコンテンツを既にロードしている（そしてイベントを発生させている）可能性があります。 iframe src attrを静的に指定し、jqueryを介して$（x）.loadイベントハンドラーを追加すると、firefox（3.6.28）がハンドラーをトリガーしましたが、IE（8.0.6001.18702）しなかった。

$（x）.loadハンドラーを追加した後、JavaScriptを介してiframe srcを設定するようにテストプログラムを調整しました。 $（x）.loadハンドラーがIEとFirefoxの同じ時点で呼び出されました（ただし、iframe onload属性を介して追加されたハンドラーはIEそしてFF）。これが私が最終的に何をしたかです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" src="jquery-ui/js/jquery-1.6.2.min.js"></script>

<script language="javascript">

function show_body(name, $iframe) {
  $('.log').append(name+': '+$iframe.contents().find('body').html()+'<br/>');
}

function actuallyLoaded(name, x) {
  $('.log').append(name+' actually loaded<br/>');
}

$(document).ready(function(){
  $('.i1').load(function(){show_body('i1', $('.i1'));});
  $('.i1').attr('src', 'eb_mce_iframe_content.html');
  var $x=$('.i1').clone().removeClass('i1');
  $('body').append($x);
  $x.load(function(){show_body('x', $x);});
  $x.attr('src', 'eb_mce_iframe_content.html');
});

</script>

</head>
<body>

<iframe class="i1" onload="actuallyLoaded($(this).attr('class')+'/'+$(this).attr('src'), this);">
</iframe>

<div class="log">
</div>

</body>
</html>

...そして、Firefoxの「ログ」がここにあります。

i1/eb_mce_iframe_content.html実際に読み込まれたi1

キツネのフレッド。

/eb_mce_iframe_content.html実際に読み込まれたx：

キツネのフレッド。

2
Trevor

IEにはreadystatechangeイベントを使用しています。

var $iframe = $("<iframe>");
$iframe.on("load readystatechange", callback);
1
Ilya

ハンドラーをonloadに直接割り当てると、Chrome、FF、およびIEで機能します（IE 8でテスト済み）。

(function (selector) {
    var frame = $(selector).get(0);

    if (frame) {
        frame.onload = function () {
            alert('frame loaded.');
        };
    }
})('#myframe');
1
Devin

here のjQueryでJavaScriptコードを使用すると、if ($.browser.safari || $.browser.opera) {行をif ($.browser.safari || $.browser.opera || $.browser.msie) {に変更すると機能します。したがって、次のようになります。

$(function(){

    var iFrames = $('iframe');

    function iResize() {

        for (var i = 0, j = iFrames.length; i < j; i++) {
          iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
        }

        if ($.browser.safari || $.browser.opera || $.browser.msie) { 

           iFrames.load(function(){
               setTimeout(iResize, 0);
           });

           for (var i = 0, j = iFrames.length; i < j; i++) {
                var iSource = iFrames[i].src;
                iFrames[i].src = '';
                iFrames[i].src = iSource;
           }

        } else {
           iFrames.load(function() { 
               this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
           });
        }

    });
1
Sarah Vessels

Seisの答えは正しいものであり、非グローバル/匿名関数を使用するように改善できます。

window.dummy_for_ie7 = function() { }
var iframe = $('<iframe onload="dummy_for_ie7" />')[0];
iframe.attachEvent('onload', real_event_handler)

驚いたことに、これはうまくいきます。

注：ハックした後でも、iframe.onload = func（）は機能しません。あなた[〜＃〜] must [〜＃〜] attachEventを使用します。図を行きます。

注：当然、このコードverbatimは、標準に準拠したUAでは機能しません。

0
driedfruit

IDの前に「iframe」というプレフィックスを追加します。

$('iframe#myFrame').load(function() {
  ...
});

あるいは、「load」の代わりに「ready」を使用してみてください。

$('#myFrame').ready(function()  {
    alert("Loaded");
});

これは動作するはずです。

0
EvilMM