5

サンプルコード:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function on_iframe_load() {
    document.getElementById('iframe_a').onload = function() {
        alert('Thanks for the visit!');
    };
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
<a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load();">Go!</a>
</body>
</html>

すべての主要なブラウザーで問題なく動作しますが、IE8 (およびおそらくそれ以前のバージョン) では認識されません。

更新:解決策を思いついたばかりですが、それが正しいコーディングかどうかはわかりません。確認してください:

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <script>
            var clicked = false;

            function activate() {
                clicked = true;
            }

            function pop() {
                if (clicked) {
                    alert('Thanks for the visit!');
                };
            }
        </script>
    </head>

    <body>
        <iframe name="iframe_a" onload="pop();"></iframe>
        <a href="http://www.example.com/" target="iframe_a" onclick="activate();">Go!</a>

    </body>

</html>
4

4 に答える 4

4

iframe でインライン属性を使用すると、IE8 でこの問題が修正されるようです。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function onIframeLoad(iframe) {
    if(iframe.src) {
        alert('Thanks for the visit!');
    }
}
function onLinkClick(url) {
    document.getElementById('iframe_a').src = url;
}
</script>
</head>
<body>
<iframe id="iframe_a" onload="onIframeLoad(this);"></iframe>
<a href="http://www.example.com/" onclick="onLinkClick(this); return false;">Go!</a>
</body>
</html>

リクエストによる更新:

もっと目立たない JavaScript を書いてみてください。このような方法でコードを記述すると、IE の奇妙なバグを防ぐことができます。

<!DOCTYPE html>
<html>
<body>
    <iframe id="display-frame"></iframe>
    <a href="http://www.example.com/">Go!</a>
    <script>
        window.onload = function() {
            var iframe = document.getElementById('display-frame'),
                link = document.getElementsByTagName('a')[0];

            // load handler
            function onIframeLoad() {
                alert('Thanks for the visit!');
            }

            // event handlers
            if(iframe.addEventListener) iframe.addEventListener('load', onIframeLoad, false);
            else if(iframe.attachEvent) iframe.attachEvent('onload', onIframeLoad);

            link.onclick = function() {
                iframe.src = this.href;
                return false;
            }
        };
    </script>
</body>
</html>
于 2012-10-16T09:46:48.907 に答える
2

できます :)

IE8、ff、chromeでテスト済み

var iframe = document.getElementById('iframeid');

    if (iframe .attachEvent) {
      iframe .attachEvent('onload',alert("IE Iframe loaded"));

    } else {
      iframe .onload = alert("Other than IE Iframe loaded");
    }
于 2013-01-29T07:07:22.283 に答える
2

ページが読み込まれると、DOM プロパティを使用して IE の iFrame に読み込みリスナーを追加できないようです。

しかし、次のように使用できますattachEvent

function on_iframe_load() {
    function foo() {
        alert('Thanks for the visit!');
    };
    var el = document.getElementById('iframe_a');

    if (el.attachEvent) {
      el.attachEvent('onload',foo);
    } else if (el.addEventListener) {
      el.addEventListener('load', 'foo', false);
    }
}

私は IE 6 でテストしていましたが、通常のテスト順序を逆にしてattachEventaddEventListener. 最新バージョンの IE をテストして、逆の順序が機能するかどうかを確認したり、Opera などの他の IE に似たブラウザーをテストしたりすることもできます。

編集

テスト後にコードを変更して(愚かな私)を使用するようにしaddEventListenerました。IEなどで機能するものは次のとおりです。

function on_iframe_load() {
    function foo() {
        alert('Thanks for the visit!');
    };
    var el = document.getElementById('iframe_a');

    if (el.attachEvent) {
      el.attachEvent('onload',foo);

    } else {
      el.onload = foo;
    }
}

また、マークアップで onload 属性を使用する場合、スクリプトを使用してリスナーを追加する必要はありません。

于 2012-10-16T09:41:29.833 に答える
2

jqueryを使用するだけです:

$(iframe).bind( 'load', function(){} );
于 2013-11-06T11:58:00.790 に答える