iframe要素の処理 : JavaScript

Pocket

iframe要素で読み込まれたドキュメントの要素へアクセスするメモ。

index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>インラインフレームのテスト</title>
    </head>
    <body>
        <iframe width="200" id="frame" height="150" src="sample.html">
            テスト
        </iframe>
    </body>
</html>

iframeに読み込むドキュメント。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>インライン</title>
</head>
<body>
<form id="form" action="#" method="POST">
    <input type="submit" value="アラート">
</form>
</body>
</html>

submitボタンをクリックするとアラートを表示する。
index.htmlでjQueryとスクリプトファイルを読み込む。


main.js

jQuery(function($) {
    var frame = document.getElementById('frame');
    // フレーム要素のonloadイベントを使ってドキュメントの読み込みが完了してから処理を行う。
    frame.onload = function() {
        // フレーム内の要素にアクセスはcontentWindowプロパティを使う。
        var form = frame.contentWindow.document.getElementById('form');
        var submit = (function(elem) {
            return function() {
                window.alert('Frame Test');
                return false;
            };
        }(form));
        form.onsubmit = submit;
    };
});

下記のスクリプトはフレームにドキュメントが読み込まれる前にフレーム内の要素にアクセスするのでダイアログにerrorが表示される。

jQuery(function($) {
    var frame = document.getElementById('frame0');
    // frameがドキュメントの読み込みを完了する前に実行されたときformはnull
    var form = frame.contentWindow.document.getElementById('form');
    if (form === null) {
        alert('error');
    }
});

» Gist

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 


人気記事 はてなブックマーク

この日記のはてなブックマーク数